Azure Static Web Apps Gallery Community Projects

A gallery of awesome projects built and deployed in Azure Static Web Apps.

🔥 Submit your Projects

Would you like to include your projects to this gallery? Follow the Checklist for Pull Request.

💻 Projects (by technology)

• Angular
  • Catsify: A cat names generator
  • xLayers: Generate Code from SketchApp
  • Angular AppStore
  • ngxtools: Angular Package Registry
  • meme4fun: Angular App to generate programmer memes
  • Angular Server Side Rendering
  • Shop at Home
• Eleventy
  • Eleventy Blog Starter
• Gatsby.js
  • Simple Starter
• Hugo
  • ngVikings 2020: A free online conference for Angular developers
• React.js
  • Shop at Home
  • Sunrise Standup
• Stencil
  • Stencil Starter App
• Scully
  • PWA Blog
• Svelte
  • Shop at Home
  • Svelte Todo App
• Vanilla HTML JavaScript CSS
  • Azure SWAG Demo: A Positive Thought For Your Day
  • Hexa CLI Landing Page
  • Nitrooo landing page
• Vue.js
  • PoseDance: A TikTok Trainer App
  • Shop at Home
  • VS Code Can Do That
• VuePress
  • Nitro Workshop
  • Peacock for Visual Studio Code Documentation

Angular

Catsify: A cat names generator

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 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 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 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

Meme4Fun

Meme4Fun is an app to create custom programming memes from a picture and it also identifies features of people in the image.

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

Stacks Used: angular, typescript, azure static web apps, material design, Azure Cognitive services

Angular Server Side Rendering

A prerendred Angular application built with Angular universal (aka. @angular/platform-server).

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

Stacks Used: angular, typescript, azure static web apps, server-side rendering

---

Eleventy

Eleventy Blog Starter

A base blog scaffolded using the Eleventy base blog starter.

Stacks Used: eleventy, html, css, javascript, azure static web apps

• Link to the project: HERE
• GitHub repo: HERE
• Author: @manekinekko

---

Gatsby.js

Gatsbyjs Starter

A very simple starter scaffolded using the gatsby.js framework.

Stacks Used: reactjs, azure static web apps, gatsbyjs

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

---

Hugo

ngVikings 2020: A free online conference for Angular developers

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

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

---

Stencil

Stencil Starter App

Stencil is a toolchain for building reusable, scalable Design Systems. Generate small, blazing fast, and 100% standards based Web Components that run in every browser.

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

Stacks Used: stencil.js, azure static web apps

---

Scully

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

---

Svelte

Shop at Home (https://www.shopathome.dev)

"Shop at Home" is a sample app which is written in four variations: Angular, React, Svelte and Vue. It is shown in the Build 2020 video presentation.

• Shop at Home
• **GitHub repo for Shop at Home

Stacks Used: vue, svelte, react, angular, azure static web apps

Svelte Todo App

a little descriptions about the project.

Link to the project: HERE

Stacks Used: svelte, azure static web apps

---

Vanilla HTML JavaScript CSS

Azure SWAG Demo: A Positive Thought For Your Day

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

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

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, css, javascript

---

Vue.js

PoseDance: A TikTok Trainer 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

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

Nitro Workshop

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 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.

• Peacock Documentation
• **GitHub repo for Peacock Documentation
• Install the Peacock Extension

Stacks Used: vuepress, azure static web apps, nodejs

---