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)
- Azure Static Web Apps Gallery Community Projects
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.
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.
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.
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.
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.
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).
Stacks Used:
angular, typescript, azure static web apps, server-side rendering
Rock Paper Scissors
An Angular app for the well known game of rock paper scissors. The opponent player is simulated by an Azure Function.
Stacks Used:
angular, typescript, javascript, azure static web apps
Azure Vision
Azure Vision is a Object Detection App which will detect the objects in given image using Azure Cognitive Services (Computer Vision API) built with ❤️ & Angular
Stacks Used:
Angular, Typescript, Azure Static Web Apps, Azure Cognitive Services
angular-swa-auth library demo
Demo app showcasing the use of the npm package angular-swa-auth.
Stacks Used:
angular, typescript, storybook, compodoc, azure static web apps
Docusaurus
Docusaurus Starter
A simple starter template for creating documentation website using the Docusaurus framework.
Stacks Used:
reactjs, azure static web apps
- Link to the project: HERE
- GitHub repo: HERE
- Author: @sumitkharche01
Eleventy
Eleventy Blog Starter
A base blog scaffolded using the Eleventy base blog starter.
Stacks Used:
eleventy, html, css, javascript, azure static web apps
Gatsby
Gatsbyjs Starter
A very simple starter scaffolded using the Gatsby framework.
Stacks Used:
reactjs, azure static web apps, gatsbyjs
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.
Stacks Used:
hugo, azure static web apps, workbox
Mongoose
Azure Static Web Apps and Mongoose Starter Kit
Mongoose is the most popular ODM (object document mapper) for Node.js. This basic starter includes the necessary code and steps to create Azure Static Web Apps with Cosmos DB and Mongoose. No front-end framework is used, allowing you to update the site as needed.
Stacks Used:
mongoose, cosmos db, azure static web apps
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
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.
Stacks Used:
stencil.js, azure static web apps
Scully
PWA Blog
News and articles about Progressive Web Apps.
Stacks Used:
angular, scully, azure static web apps, workbox, pwa
Svelte
Shop at Home
"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.
Stacks Used:
svelte, react, angular, nodejs, 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.
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.
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.
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.
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.
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.
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.
Stacks Used:
vuepress, azure static web apps, nodejs
Cognitive Search Static Apps Demo
A sample faceted search user experience implementation for your Azure Cognitive Search index. Similar to the official demo app, but a bit more modern. Fork the repo, deploy it to your Static Web Apps instance, connect it to your Cognitive Search index with a set of config settings, optionally configure authN/authZ - and you get a fully functioning search UI, with facet filters and geovisualization. The live demo is pointed to the official Azure Cognitive Search Sample Data index, and you can start with the same. Feel free to use as a template for your own implementations.
Stacks Used:
react, nodejs, azure static web apps, azure functions
![microsoft-github-operations[bot] avatar](https://avatars.githubusercontent.com/in/41902?v=4 "microsoft-github-operations[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent