A community showcase of projects built with Azure Static Web Apps 🎉 Visit: https://microsoft.github.io/static-web-apps-gallery-code-samples/
Перейти к файлу
sinedied 4e6b9b48c5 Update TOC 2020-05-18 18:01:35 +02:00
.github/PULL_REQUEST_TEMPLATE Updating the PR informations 2020-05-18 12:49:33 -03:00
media Add Nitro workshop website 2020-05-18 18:00:17 +02:00
.gitignore Initial commit 2020-05-07 20:23:26 +00:00
CODE_OF_CONDUCT.md Initial CODE_OF_CONDUCT.md commit 2020-05-07 13:23:30 -07:00
CONTRIBUTING.md Including a github template for future PR's 2020-05-16 01:13:47 -03:00
LICENSE Initial LICENSE commit 2020-05-07 13:23:31 -07:00
README.md Update TOC 2020-05-18 18:01:35 +02:00
SECURITY.md Initial SECURITY.md commit 2020-05-07 13:23:33 -07:00

README.md

Azure Static Web Apps Gallery Sample Projects

A gallery of sample projects in JavaScript/Node.js and frameworks/Jamstack site generators deployed in Azure Static Web Apps.

🔥 Submit your Projects

Would you like to include your project hosted/deployed on Azure Static Web Apps on our gallery of samples? If so, just follow the Checklist for Pull Request, which as soon as possible we will include your deployed project in our repository!

💻 Projects

Angular Projects

Catsify: A cat names generator

Catsify App

Catsify is a simple and creative app that allows you to find a unique name for your lovely cat. What's interesting about this app is that the names generator is all written in Rust and compiled to WASM; and the API is exposed through a Node.js Azure Function.

  • Link to the project: HERE
  • GitHub repo: HERE

Stacks Used: angular, typescript, azure static web apps, rust, web assembly, nodejs, azure functions

xLayers: Generate Code from SketchApp

xLayers App
xLayers App

xLayers is an online Web application which aims to bridge the gap between designers and developers. Its mission is to allow both the Design and Development worlds to collaborate and iterate fast. Simply upload your design to xLayers and instantly scaffolds code for many popular frameworks1 and libraries such as Angular, Vue, React, Stencil...etc.

  • Link to the project: HERE
  • GitHub repo: HERE

Stacks Used: angular, typescript, azure static web apps

Angular AppStore

Angular AppStore App

Angular AppStore is a reference app featuring a full search user experience using Algolia. Users can enjoy the fast and smooth experience.

  • Link to the project: HERE
  • GitHub repo: HERE

Stacks Used: angular, typescript, azure static web apps, material design, algolia

ngxtools: Angular Package Registry

NgxTools App

NgxTools is an NPM registry clone made only for Angular packages. You can access hundred thousand of packages built specifically for Angular and available on NPM. You can access their metadata information, and even open them directly on StackBlitz.

  • Link to the project: HERE
  • GitHub repo: HERE

Stacks Used: angular, typescript, azure static web apps, pwa, algolia


Scully Projects

PWA Blog

PWA Blog

News and articles about Progressive Web Apps.

  • Link to the project: HERE
  • GitHub repo: HERE

Stacks Used: angular, scully, azure static web apps, workbox, pwa


Hugo Projects

ngVikings 2020: A free online conference for Angular developers

ngVikings 2020

ngVikings is a non-profit, non-commercial, 100% community-driven event comprised of many Nordic Angular groups with more than 6500 active members in total.

  • Link to the project: HERE
  • GitHub repo: HERE

Stacks Used: hugo, azure static web apps, workbox


React.js Projects

Sunrise Standup

preview image for sunrise standup

A social platform for teams to post 15 second status update videos. Videos are uploaded and streamed from Azure Storage, videos are transcribed using Cognitive Services and user locations are shown with Azure Maps.

Stacks Used: reactjs, azure static web apps, azure storage, azure cognitive services, azure maps

  • Link to the project: HERE
  • GitHub repo: HERE

Svelte Projects

Svelte Todo App

a little descriptions about the project.

Link to the project: HERE

Stacks Used: svelte, azure static web apps


Vanilla HTML/JavaScript Projects

Azure SWAG Demo: A Positive Thought For Your Day

Positive quote website screenshot

This is a simple barebone demo for Azure SWAG (Static Web Apps on GitHub). You can use it as a template for your own apps.

  • Link to the project: HERE
  • GitHub repo: HERE

Stacks Used: html, javascript, nodejs, azure static web apps

Nitrooo landing page

Nitrooo App

Nitro is a heavily opinionated template for building Serverless applications with NestJS, the fastest-growing NodeJS framework in the world by github stars.

  • Link to the project: HERE
  • GitHub repo: HERE

Stacks Used: javascript, css, html


Hexa CLI Landing Page

The ultimate companion for the Azure CLI screenshot

Hexa is the ultimate companion for the Azure CLI. It allows you to seamlessly configure, setup and deploy to different Azure services such as Resource Groups, Storage accounts, Hosting, Azure Functions and Databases (CosmosDB and Table Storage) and more.

  • Link to the project: HERE
  • GitHub repo: HERE

Stacks Used: html, javascript


Vue.js Projects

PoseDance: A TikTok Trainer App

PoseDance App

Using PoseDance, a Machine-Learning library that can discern body positions, this app allows you to perfect your dance moves via your webcam. Match your dance, get a high score! Also features PlayFab and Azure Functions for the backend service.

  • Link to the project: HERE
  • GitHub repo: HERE

Stacks Used: vuejs, azure static web apps, machine learning, nodejs, javascript, azure functions

VS Code Can Do That

Vs Code Can Do That

All the best things about VS Code that nobody ever bothered to show you.

  • Link to the project: HERE
  • GitHub repo: HERE

Stacks Used: vuejs, azure static web apps


VuePress Projects

Nitro Workshop

Nitro logo

Online workshop built with Vuepress to learn how to build a backend using NestJS. This is a practical workshop where you'll learn "hands-on" by iteratively building an application from scratch using NestJS and Azure.

  • Link to the project: HERE
  • GitHub repo: HERE

Stacks Used: vuepress, azure static web apps, nodejs, nestjs

Peacock for Visual Studio Code Documentation

Peacock icon

Peacock is a Visual Studio Code extension with 700,000+ installations. It subtly changes the color of your Visual Studio Code workspace. This is ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to quickly identify your editor.

Stacks Used: vuepress, azure static web apps, nodejs