Refactoring continued ...
This commit is contained in:
Nitya Narasimhan
Родитель
9ec23724aa
Коммит
7997359a7f
478
README.md
478
README.md
|
|
@ -22,42 +22,450 @@ The table showcases technologies for which projects were added - click the techn
|
|||
| Technology | Project | Is Live |
|
||||
|:---|:---|:---|
|
||||
| [`Angular`](#Angular) | | |
|
||||
| | [Catsify: A cat names generator](docs/README.md#catsify-a-cat-names-generator)| ✅ |
|
||||
| | [xLayers: Generate Code from SketchApp](docs/README.md#xlayers-generate-code-from-sketchapp) | 🅇 |
|
||||
| | [Catsify: A cat names generator](#catsify-a-cat-names-generator)| ✅ |
|
||||
| | [xLayers: Generate Code from SketchApp](#xlayers-generate-code-from-sketchapp) | 🅇 |
|
||||
| | [Angular AppStore](#angular-appstore) | 🅇 |
|
||||
| | [ngxtools: Angular Package Registry](docs/README.md#ngxtools-angular-package-registry)| ✅ |
|
||||
| | [ngxtools: Angular Package Registry](#ngxtools-angular-package-registry)| ✅ |
|
||||
| | [Meme4Fun](#meme4fun)| 🅇 |
|
||||
| | [Angular Server Side Rendering](docs/README.md#angular-server-side-rendering)| 🅇 |
|
||||
| | [Rock Paper Scissors](docs/README.md#rock-paper-scissors)| 🅇 |
|
||||
| | [Azure Vision](docs/README.md#azure-vision)| 🅇 |
|
||||
| | [angular-swa-auth library demo](docs/README.md#angular-swa-auth-library-demo)| ✅ |
|
||||
| [`Docusaurus`](docs/README.md#docusaurus) | | |
|
||||
| | [Docusaurus Starter](docs/README.md#docusaurus-starter)| ✅ |
|
||||
| [`Eleventy`](docs/README.md#eleventy)| | |
|
||||
| | [Eleventy Blog Starter](docs/README.md#eleventy-blog-starter)| 🅇 |
|
||||
| | [Angular Server Side Rendering](#angular-server-side-rendering)| 🅇 |
|
||||
| | [Rock Paper Scissors](#rock-paper-scissors)| 🅇 |
|
||||
| | [Azure Vision](#azure-vision)| 🅇 |
|
||||
| | [angular-swa-auth library demo](#angular-swa-auth-library-demo)| ✅ |
|
||||
| [`Docusaurus`](#docusaurus) | | |
|
||||
| | [Docusaurus Starter](#docusaurus-starter)| ✅ |
|
||||
| [`Eleventy`](#eleventy)| | |
|
||||
| | [Eleventy Blog Starter](#eleventy-blog-starter)| 🅇 |
|
||||
| [`Gatsby`](#gatsby)| | |
|
||||
| |[Gatsbyjs Starter](docs/README.md#gatsbyjs-starter) | 🅇 |
|
||||
| [`Hugo`](docs/README.md#hugo) | | |
|
||||
| | [ngVikings 2020 Conference](docs/README.md#ngvikings-2020-a-free-online-conference-for-angular-developers)| ✅ |
|
||||
| [`Mongoose`](docs/README.md#mongoose)| | |
|
||||
| | [SWA + Mongoose Starter Kit](docs/README.md#azure-static-web-apps-and-mongoose-starter-kit)| 🅇 |
|
||||
| [`React`](docs/README.md#reactjs)| | |
|
||||
| | [Sunrise Standup](docs/README.md#sunrise-standup)| 🅇 |
|
||||
| [`Stencil`](docs/README.md#stencil)| | |
|
||||
| | [Stencil Starter App](docs/README.md#stencil-starter-app)| 🅇 |
|
||||
| [`Scully`](docs/README.md#scully)| | |
|
||||
| | [PWA Blog](docs/README.md#pwa-blog)| ✅ |
|
||||
| [`Svelte`](docs/README.md#svelte)| | |
|
||||
| | [Shop at Home](docs/README.md#shop-at-home)|✅|
|
||||
| |[Gatsbyjs Starter](#gatsbyjs-starter) | 🅇 |
|
||||
| [`Hugo`](#hugo) | | |
|
||||
| | [ngVikings 2020 Conference](#ngvikings-2020-a-free-online-conference-for-angular-developers)| ✅ |
|
||||
| [`Mongoose`](#mongoose)| | |
|
||||
| | [SWA + Mongoose Starter Kit](#azure-static-web-apps-and-mongoose-starter-kit)| 🅇 |
|
||||
| [`React`](#reactjs)| | |
|
||||
| | [Sunrise Standup](#sunrise-standup)| 🅇 |
|
||||
| [`Stencil`](#stencil)| | |
|
||||
| | [Stencil Starter App](#stencil-starter-app)| 🅇 |
|
||||
| [`Scully`](#scully)| | |
|
||||
| | [PWA Blog](#pwa-blog)| ✅ |
|
||||
| [`Svelte`](#svelte)| | |
|
||||
| | [Shop at Home](#shop-at-home)|✅|
|
||||
| [`Vanilla HTML/JS/CSS`](#vanilla-html-javascript-css)| | |
|
||||
| |[SWAG Demo: A Positive Thought For Your Day](docs/README.md#azure-swag-demo-a-positive-thought-for-your-day) | ✅ |
|
||||
| |[Nitrooo landing page](docs/README.md#nitrooo-landing-page) | ✅ |
|
||||
| |[Hexa CLI Landing Page](docs/README.md#hexa-cli-landing-page) | ✅ |
|
||||
| [`Vue.js`](docs/README.md#vuejs)| | |
|
||||
| | [PoseDance: A TikTok Trainer App](docs/README.md#posedance-a-tiktok-trainer-app)| 🅇 |
|
||||
| |[VS Code Can Do That](docs/README.md#vs-code-can-do-that) | ✅ |
|
||||
|[`VuePress`](docs/README.md#vuepress) | | |
|
||||
| | [Nitro Workshop](docs/README.md#nitro-workshop)| ✅ |
|
||||
| | [Peacock for Visual Studio Code Documentation](docs/README.md#peacock-for-visual-studio-code-documentation)| ✅ |
|
||||
| |[Cognitive Search Static Apps Demo](docs/README.md#cognitive-search-static-apps-demo) | ✅ |
|
||||
| | | |
|
||||
| |[SWAG Demo: A Positive Thought For Your Day](#azure-swag-demo-a-positive-thought-for-your-day) | ✅ |
|
||||
| |[Nitrooo landing page](#nitrooo-landing-page) | ✅ |
|
||||
| |[Hexa CLI Landing Page](#hexa-cli-landing-page) | ✅ |
|
||||
| [`Vue.js`](#vuejs)| | |
|
||||
| | [PoseDance: A TikTok Trainer App](#posedance-a-tiktok-trainer-app)| 🅇 |
|
||||
| |[VS Code Can Do That](#vs-code-can-do-that) | ✅ |
|
||||
|[`VuePress`](#vuepress) | | |
|
||||
| | [Nitro Workshop](#nitro-workshop)| ✅ |
|
||||
| | [Peacock for Visual Studio Code Documentation](#peacock-for-visual-studio-code-documentation)| ✅ |
|
||||
| |[Cognitive Search Static Apps Demo](#cognitive-search-static-apps-demo) | ✅ |
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 💻 | Projects (By Technology)
|
||||
|
||||
## Angular
|
||||
|
||||
### **[Catsify: A cat names generator](https://www.catsify.app/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="docs/media/catsify.png" alt="Catsify App" width="100%">
|
||||
</p>
|
||||
|
||||
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](https://www.catsify.app/)**
|
||||
- GitHub repo: **[HERE](https://github.com/manekinekko/catsify)**
|
||||
|
||||
> Stacks Used: `angular, typescript, azure static web apps, rust, web assembly, nodejs, azure functions`
|
||||
|
||||
### **[xLayers: Generate Code from SketchApp](https://www.xlayers.design/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="docs/media/xlayers-1.png" alt="xLayers App" width="100%">
|
||||
<br/>
|
||||
<img src="docs/media/xlayers-2.png" alt="xLayers App" width="100%">
|
||||
</p>
|
||||
|
||||
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.
|
||||
|
||||
- **[xLayers demo](https://www.xlayers.design/)**
|
||||
- **[xLayers GitHub repo](https://github.com/xlayers/xlayers)**
|
||||
|
||||
> Stacks Used: `angular, typescript, azure static web apps`
|
||||
|
||||
### **[Angular AppStore](https://www.searchapp.store/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="docs/media/angular-search-experience.gif" alt="Angular AppStore App" width="400px">
|
||||
</p>
|
||||
|
||||
Angular AppStore is a reference app featuring a full search user experience using Algolia. Users can enjoy the fast and smooth experience.
|
||||
|
||||
- **[Angular AppStore demo](https://www.searchapp.store/)**
|
||||
- **[Angular AppStore repo](https://github.com/manekinekko/angular-search-experience)**
|
||||
|
||||
> Stacks Used: `angular, typescript, azure static web apps, material design, algolia`
|
||||
|
||||
### **[ngxtools: Angular Package Registry](https://www.ngx.tools/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="docs/media/ngxtools.png" alt="NgxTools App" width="100%">
|
||||
</p>
|
||||
|
||||
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.
|
||||
|
||||
- **[NgxTools project](https://www.ngx.tools/)**
|
||||
- **[NgxTools repo](https://github.com/ngxtools/ngx.tools)**
|
||||
|
||||
> Stacks Used: `angular, typescript, azure static web apps, pwa, algolia`
|
||||
|
||||
### **[Meme4Fun](https://lively-forest-0fd67f010.azurestaticapps.net/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="docs/media/meme4fun.gif" alt="Meme generator app" width="100%">
|
||||
</p>
|
||||
|
||||
Meme4Fun is an app to create custom programming memes from a picture and it also identifies features of people in the image.
|
||||
|
||||
- **[Meme4Fun project](https://lively-forest-0fd67f010.azurestaticapps.net/)**
|
||||
- **[Meme4Fun repo](https://github.com/sajeetharan/meme4fun)**
|
||||
|
||||
> Stacks Used: `angular, typescript, azure static web apps, material design, Azure Cognitive services`
|
||||
|
||||
### **[Angular Server Side Rendering](https://blue-bay-00cc1f303.azurestaticapps.net/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="docs/media/angular-ssr.png" alt="Angular server-side prerendered app" width="100%">
|
||||
</p>
|
||||
|
||||
A prerendred Angular application built with Angular universal (aka. @angular/platform-server).
|
||||
|
||||
- **[Angular universal project](https://blue-bay-00cc1f303.azurestaticapps.net/)**
|
||||
- **[Angular universal repo](https://github.com/manekinekko/angular-ssr-swa)**
|
||||
|
||||
> Stacks Used: `angular, typescript, azure static web apps, server-side rendering`
|
||||
|
||||
### [Rock Paper Scissors](https://www.rockpaperscissors.cloud)
|
||||
|
||||
<p align="center">
|
||||
<img src="docs/media/angular-rock-paper-scissors.png" alt="Rock paper scissors" width="100%">
|
||||
</p>
|
||||
|
||||
An Angular app for the well known game of rock paper scissors. The opponent player is simulated by an Azure Function.
|
||||
|
||||
- **[Rock-Paper-Scissors demo](https://www.rockpaperscissors.cloud/)**
|
||||
- **[Rock-Paper-Scissors repo](https://github.com/stuartleaver/rock-paper-scissors-static-web-app)**
|
||||
- **[Author: @stuartleaveruk](https://twitter.com/stuartleaveruk)**
|
||||
|
||||
> Stacks Used: `angular, typescript, javascript, azure static web apps`
|
||||
|
||||
---
|
||||
|
||||
### **[Azure Vision](https://delightful-flower-09099960f.azurestaticapps.net)**
|
||||
|
||||
<p align="center">
|
||||
<img src="docs/media/azure_vision.gif" alt="Azure Vision" width="100%">
|
||||
</p>
|
||||
|
||||
**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**
|
||||
|
||||
- **[Azure Vision demo](https://delightful-flower-09099960f.azurestaticapps.net)**
|
||||
- **[Azure Visio repo](https://github.com/banujan6/azure-cognitive-service-computer-vision)**
|
||||
|
||||
> Stacks Used: `Angular, Typescript, Azure Static Web Apps, Azure Cognitive Services`
|
||||
|
||||
---
|
||||
|
||||
### [angular-swa-auth library demo](https://angular-swa-auth.codingdemo.co.uk/)
|
||||
|
||||
<p align="center">
|
||||
<img src="docs/media/angular-swa-auth.gif" alt="angular-swa-auth" width="100%">
|
||||
</p>
|
||||
|
||||
Demo app showcasing the use of the npm package [angular-swa-auth](https://www.npmjs.com/package/@christianacca/angular-swa-auth).
|
||||
|
||||
- **[angular-swa-auth demo site](https://angular-swa-auth.codingdemo.co.uk/)**
|
||||
- **[angular-swa-auth repo](https://github.com/christianacca/static-web-apps-auth)**
|
||||
|
||||
> Stacks Used: `angular, typescript, storybook, compodoc, azure static web apps`
|
||||
|
||||
---
|
||||
|
||||
## Docusaurus
|
||||
|
||||
### **[Docusaurus Starter](https://ambitious-pebble-02b2d3010.azurestaticapps.net/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="docs/media/docusaurus-starter.PNG" alt="Docusaurus starter" width="100%">
|
||||
</p>
|
||||
|
||||
A simple starter template for creating documentation website using the Docusaurus framework.
|
||||
|
||||
> Stacks Used: `reactjs, azure static web apps`
|
||||
|
||||
- Link to the project: **[HERE](https://ambitious-pebble-02b2d3010.azurestaticapps.net/)**
|
||||
- GitHub repo: **[HERE](https://github.com/sumitkharche/docusaurus-swa-app)**
|
||||
- Author: [@sumitkharche01](https://twitter.com/sumitkharche01)
|
||||
|
||||
---
|
||||
|
||||
## Eleventy
|
||||
|
||||
### **[Eleventy Blog Starter](https://zealous-wave-0ec9a1203.azurestaticapps.net/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="docs/media/11ty.png" alt="Eleventy starter" width="100%">
|
||||
</p>
|
||||
|
||||
A base blog scaffolded using the Eleventy [base blog starter](https://github.com/11ty/eleventy-base-blog).
|
||||
|
||||
> Stacks Used: `eleventy, html, css, javascript, azure static web apps`
|
||||
|
||||
- **[Eleventy demo](https://zealous-wave-0ec9a1203.azurestaticapps.net/)**
|
||||
- **[Eleventy repo](https://github.com/manekinekko/11ty-blog-swa)**
|
||||
- **[Author @manekinekko](https://twitter.com/manekinekko)**
|
||||
|
||||
---
|
||||
|
||||
## Gatsby
|
||||
|
||||
### **[Gatsbyjs Starter](https://jolly-tree-003047c03.azurestaticapps.net/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="docs/media/gatsby_starter.png" alt="Gatsby starter" width="100%">
|
||||
</p>
|
||||
|
||||
A very simple starter scaffolded using the Gatsby framework.
|
||||
|
||||
> Stacks Used: `reactjs, azure static web apps, gatsbyjs`
|
||||
|
||||
- **[Gatsby demo](https://jolly-tree-003047c03.azurestaticapps.net/)**
|
||||
- **[Gatsby repository](https://github.com/floAr/gatsby-starter-azure_swa)**
|
||||
|
||||
---
|
||||
|
||||
## Hugo
|
||||
|
||||
### **[ngVikings 2020: A free online conference for Angular developers](https://www.ngvikings.org/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="docs/media/ngvikings2020.png" alt="ngVikings 2020" width="100%">
|
||||
</p>
|
||||
|
||||
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.
|
||||
|
||||
- **[ngVikings site](https://www.ngvikings.org/)**
|
||||
- **[ngVikings repo](https://github.com/ngvikings/ngvikings-2020)**
|
||||
|
||||
> Stacks Used: `hugo, azure static web apps, workbox`
|
||||
|
||||
---
|
||||
|
||||
## Mongoose
|
||||
|
||||
|
||||
|
||||
### [Azure Static Web Apps and Mongoose Starter Kit](https://github.com/GeekTrainer/aswa-student-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`
|
||||
|
||||
- **[Mongoose Starter Kit repo](https://github.com/geektrainer/aswa-student-starter-kit)
|
||||
- **[Author: GeekTrainer](https://twitter.com/geektrainer)
|
||||
|
||||
---
|
||||
|
||||
## React.js
|
||||
|
||||
### **[Sunrise Standup](https://www.sunrisestandup.com)**
|
||||
|
||||
|
||||
|
||||
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`
|
||||
|
||||
- **[Sunrise Standup project](https://www.sunrisestandup.com)**
|
||||
- **[Sunrise Standup repo](https://github.com/sunrise-standup/sunrise-standup)**
|
||||
|
||||
---
|
||||
|
||||
## Stencil
|
||||
|
||||
### **[Stencil Starter App](https://kind-meadow-01093c903.azurestaticapps.net/)**
|
||||
|
||||
<p align="center">
|
||||
<img width="100%" alt="Stencil Starter App" src="docs/media/stencil.png">
|
||||
<p>
|
||||
|
||||
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.
|
||||
|
||||
- **[Stencil demo](https://kind-meadow-01093c903.azurestaticapps.net/)**
|
||||
- **[Stencil repo](https://github.com/manekinekko/stencil-swa)**
|
||||
|
||||
> Stacks Used: `stencil.js, azure static web apps`
|
||||
|
||||
---
|
||||
|
||||
## Scully
|
||||
|
||||
### **[PWA Blog](https://www.webmax.ru/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="docs/media/pwablog.png" alt="PWA Blog" width="100%">
|
||||
</p>
|
||||
|
||||
News and articles about Progressive Web Apps.
|
||||
|
||||
- **[Progressive web apps information](https://www.webmax.ru/)**
|
||||
- **[Progressive web apps repo](https://github.com/webmaxru/webmax.ru)**
|
||||
|
||||
> Stacks Used: `angular, scully, azure static web apps, workbox, pwa`
|
||||
|
||||
---
|
||||
|
||||
## Svelte
|
||||
|
||||
### **[Shop at Home](https://www.shopathome.dev)**
|
||||
|
||||
<p align="center">
|
||||
<img src="docs/media/shop-at-home-svelte.png" alt="Svelte Application" width="100%">
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
"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 demo](https://www.shopathome.dev)**
|
||||
- **[Shop at Home repo](https://github.com/johnpapa/shopathome)**
|
||||
|
||||
> Stacks Used: `svelte, react, angular, nodejs, azure static web apps`
|
||||
|
||||
---
|
||||
|
||||
## Vanilla HTML JavaScript CSS
|
||||
|
||||
### **[Azure SWAG Demo: A Positive Thought For Your Day](https://ashy-mushroom-05748f31e.azurestaticapps.net/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="docs/media/positive-quote.png" alt="Positive quote website screenshot" width="100%">
|
||||
</p>
|
||||
|
||||
This is a simple barebone demo for [Azure SWAG](https://docs.microsoft.com/azure/static-web-apps?WT.mc_id=staticwebapps-github-yolasors) (**S**tatic **W**eb **A**pps on **G**itHub).
|
||||
You can use it as a template for your own apps.
|
||||
|
||||
- **[SWAG demo](https://aka.ms/swag-demo)**
|
||||
- **[SWAG repo](https://github.com/sinedied/azure-swag/)**
|
||||
|
||||
> Stacks Used: `html, javascript, nodejs, azure static web apps`
|
||||
|
||||
### **[Nitrooo landing page](https://victorious-ocean-0337ef81e.azurestaticapps.net/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="docs/media/nitrooo.png" alt="Nitrooo App" width="100%">
|
||||
</p>
|
||||
|
||||
Nitro is a heavily opinionated template for building Serverless applications with NestJS, the fastest-growing NodeJS framework in the world by github stars.
|
||||
|
||||
- **[Nitrooo project](https://victorious-ocean-0337ef81e.azurestaticapps.net/)**
|
||||
- **[Nitrooo repo](https://github.com/nitro-stack/website)**
|
||||
|
||||
> Stacks Used: `javascript, css, html`
|
||||
|
||||
---
|
||||
|
||||
### **[Hexa CLI Landing Page](https://www.hexa.run)**
|
||||
|
||||
<p align="center">
|
||||
<img src="docs/media/hexa.png" alt="The ultimate companion for the Azure CLI screenshot" width="100%">
|
||||
</p>
|
||||
|
||||
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.
|
||||
|
||||
- **[Hexa project](https://www.hexa.run)**
|
||||
- **[Hexa repo](https://github.com/manekinekko/hexa/)**
|
||||
|
||||
> Stacks Used: `html, css, javascript`
|
||||
|
||||
---
|
||||
|
||||
## Vue.js
|
||||
|
||||
### **[PoseDance: A TikTok Trainer App](https://proud-moss-070616b1e.azurestaticapps.net/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="docs/media/posedance.png" alt="PoseDance App" width="100%">
|
||||
</p>
|
||||
|
||||
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.
|
||||
|
||||
- **[PoseDance demo](https://proud-moss-070616b1e.azurestaticapps.net/)**
|
||||
- **[PoseDemo repo](https://github.com/jlooper/posedance)**
|
||||
|
||||
> Stacks Used: `vuejs, azure static web apps, machine learning, nodejs, javascript, azure functions`
|
||||
|
||||
### **[VS Code Can Do That](https://www.vscodecandothat.com)**
|
||||
|
||||
<p align="center">
|
||||
<img src="docs/media/vscodecandothat.png" alt="Vs Code Can Do That" width="100%">
|
||||
</p>
|
||||
|
||||
All the best things about VS Code that nobody ever bothered to show you.
|
||||
|
||||
- **[VS Code Can Do That demo](https://www.vscodecandothat.com)**
|
||||
- **[VS Code Can Do That repo](https://github.com/burkeholland/vscodecandothat/)**
|
||||
|
||||
> Stacks Used: `vuejs, azure static web apps`
|
||||
|
||||
---
|
||||
|
||||
## VuePress
|
||||
|
||||
### **[Nitro Workshop](https://nitro-stack.github.io/nitro-workshop/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="docs/media/nitro.png" alt="Nitro logo" width="256" height="256">
|
||||
<p>
|
||||
|
||||
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.
|
||||
|
||||
- **[Nitro workshop](https://nitro-stack.github.io/nitro-workshop/)**
|
||||
- **[Nitro workshop repo](https://github.com/nitro-stack/nitro-workshop)**
|
||||
|
||||
> Stacks Used: `vuepress, azure static web apps, nodejs, nestjs`
|
||||
|
||||
### **[Peacock for Visual Studio Code Documentation](https://www.peacockcode.dev)**
|
||||
|
||||
<p align="center">
|
||||
<img src="docs/media/peacock-icon.png" alt="Peacock icon" width="256" height="256">
|
||||
<p>
|
||||
|
||||
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](https://www.peacockcode.dev)**
|
||||
- **[GitHub repo for Peacock Documentation](https://github.com/johnpapa/vscode-peacock)**
|
||||
- **[Install the Peacock Extension](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock&wt.mc_id=staticwebapps-github-jopapa)**
|
||||
|
||||
> Stacks Used: `vuepress, azure static web apps, nodejs`
|
||||
|
||||
---
|
||||
|
||||
### [Cognitive Search Static Apps Demo](https://lively-sand-033e9ec03.azurestaticapps.net/)
|
||||
|
||||
<p align="center">
|
||||
<img src="docs/media/cognitive-search-demo.png" alt="Cognitive Search Static Apps Demo" width="100%">
|
||||
</p>
|
||||
|
||||
A sample *faceted search* user experience implementation for your [Azure Cognitive Search](https://azure.microsoft.com/services/search/) index. Similar to the [official demo app](https://docs.microsoft.com/azure/search/search-create-app-portal), but a bit more modern. Fork the [repo](https://github.com/scale-tone/cognitive-search-static-web-apps-sample-ui), [deploy](https://docs.microsoft.com/azure/static-web-apps/getting-started?tabs=react#create-a-static-web-app) it to your Static Web Apps instance, connect it to your Cognitive Search index with a set of [config settings](https://github.com/scale-tone/cognitive-search-static-web-apps-sample-ui#config-settings), optionally [configure authN/authZ](https://docs.microsoft.com/azure/static-web-apps/authentication-authorization) - and you get a fully functioning search UI, with facet filters and geovisualization. The [live demo](https://lively-sand-033e9ec03.azurestaticapps.net/) is pointed to [the official Azure Cognitive Search Sample Data](https://docs.microsoft.com/samples/azure-samples/azure-search-sample-data/azure-search-sample-data/) index, and you can start with the same. Feel free to use as a template for your own implementations.
|
||||
|
||||
- **[Lively Sand demo](https://lively-sand-033e9ec03.azurestaticapps.net/)**
|
||||
- **[Lively Sand repo](https://github.com/scale-tone/cognitive-search-static-web-apps-sample-ui)**
|
||||
- **[Author: @tino_scale_tone](https://twitter.com/@tino_scale_tone)**
|
||||
|
||||
> Stacks Used: `react, nodejs, azure static web apps, azure functions`
|
||||
|
|
|
|||
409
docs/README.md
409
docs/README.md
|
|
@ -16,411 +16,4 @@ Welcome to the Azure Static Web Apps Gallery - a showcase of awesome projects bu
|
|||
* [Vue.js](#vuejs)
|
||||
* [VuePress](#vuepress)
|
||||
|
||||
|
||||
<br/>
|
||||
|
||||
---
|
||||
|
||||
## Angular
|
||||
|
||||
### **[Catsify: A cat names generator](https://www.catsify.app/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="./media/catsify.png" alt="Catsify App" width="100%">
|
||||
</p>
|
||||
|
||||
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](https://www.catsify.app/)**
|
||||
- GitHub repo: **[HERE](https://github.com/manekinekko/catsify)**
|
||||
|
||||
> Stacks Used: `angular, typescript, azure static web apps, rust, web assembly, nodejs, azure functions`
|
||||
|
||||
### **[xLayers: Generate Code from SketchApp](https://www.xlayers.design/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="./media/xlayers-1.png" alt="xLayers App" width="100%">
|
||||
<br/>
|
||||
<img src="./media/xlayers-2.png" alt="xLayers App" width="100%">
|
||||
</p>
|
||||
|
||||
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.
|
||||
|
||||
- **[xLayers demo](https://www.xlayers.design/)**
|
||||
- **[xLayers GitHub repo](https://github.com/xlayers/xlayers)**
|
||||
|
||||
> Stacks Used: `angular, typescript, azure static web apps`
|
||||
|
||||
### **[Angular AppStore](https://www.searchapp.store/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="./media/angular-search-experience.gif" alt="Angular AppStore App" width="400px">
|
||||
</p>
|
||||
|
||||
Angular AppStore is a reference app featuring a full search user experience using Algolia. Users can enjoy the fast and smooth experience.
|
||||
|
||||
- **[Angular AppStore demo](https://www.searchapp.store/)**
|
||||
- **[Angular AppStore repo](https://github.com/manekinekko/angular-search-experience)**
|
||||
|
||||
> Stacks Used: `angular, typescript, azure static web apps, material design, algolia`
|
||||
|
||||
### **[ngxtools: Angular Package Registry](https://www.ngx.tools/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="./media/ngxtools.png" alt="NgxTools App" width="100%">
|
||||
</p>
|
||||
|
||||
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.
|
||||
|
||||
- **[NgxTools project](https://www.ngx.tools/)**
|
||||
- **[NgxTools repo](https://github.com/ngxtools/ngx.tools)**
|
||||
|
||||
> Stacks Used: `angular, typescript, azure static web apps, pwa, algolia`
|
||||
|
||||
### **[Meme4Fun](https://lively-forest-0fd67f010.azurestaticapps.net/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="./media/meme4fun.gif" alt="Meme generator app" width="100%">
|
||||
</p>
|
||||
|
||||
Meme4Fun is an app to create custom programming memes from a picture and it also identifies features of people in the image.
|
||||
|
||||
- **[Meme4Fun project](https://lively-forest-0fd67f010.azurestaticapps.net/)**
|
||||
- **[Meme4Fun repo](https://github.com/sajeetharan/meme4fun)**
|
||||
|
||||
> Stacks Used: `angular, typescript, azure static web apps, material design, Azure Cognitive services`
|
||||
|
||||
### **[Angular Server Side Rendering](https://blue-bay-00cc1f303.azurestaticapps.net/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="./media/angular-ssr.png" alt="Angular server-side prerendered app" width="100%">
|
||||
</p>
|
||||
|
||||
A prerendred Angular application built with Angular universal (aka. @angular/platform-server).
|
||||
|
||||
- **[Angular universal project](https://blue-bay-00cc1f303.azurestaticapps.net/)**
|
||||
- **[Angular universal repo](https://github.com/manekinekko/angular-ssr-swa)**
|
||||
|
||||
> Stacks Used: `angular, typescript, azure static web apps, server-side rendering`
|
||||
|
||||
### [Rock Paper Scissors](https://www.rockpaperscissors.cloud)
|
||||
|
||||
<p align="center">
|
||||
<img src="./media/angular-rock-paper-scissors.png" alt="Rock paper scissors" width="100%">
|
||||
</p>
|
||||
|
||||
An Angular app for the well known game of rock paper scissors. The opponent player is simulated by an Azure Function.
|
||||
|
||||
- **[Rock-Paper-Scissors demo](https://www.rockpaperscissors.cloud/)**
|
||||
- **[Rock-Paper-Scissors repo](https://github.com/stuartleaver/rock-paper-scissors-static-web-app)**
|
||||
- **[Author: @stuartleaveruk](https://twitter.com/stuartleaveruk)**
|
||||
|
||||
> Stacks Used: `angular, typescript, javascript, azure static web apps`
|
||||
|
||||
---
|
||||
|
||||
### **[Azure Vision](https://delightful-flower-09099960f.azurestaticapps.net)**
|
||||
|
||||
<p align="center">
|
||||
<img src="./media/azure_vision.gif" alt="Azure Vision" width="100%">
|
||||
</p>
|
||||
|
||||
**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**
|
||||
|
||||
- **[Azure Vision demo](https://delightful-flower-09099960f.azurestaticapps.net)**
|
||||
- **[Azure Visio repo](https://github.com/banujan6/azure-cognitive-service-computer-vision)**
|
||||
|
||||
> Stacks Used: `Angular, Typescript, Azure Static Web Apps, Azure Cognitive Services`
|
||||
|
||||
---
|
||||
|
||||
### [angular-swa-auth library demo](https://angular-swa-auth.codingdemo.co.uk/)
|
||||
|
||||
<p align="center">
|
||||
<img src="./media/angular-swa-auth.gif" alt="angular-swa-auth" width="100%">
|
||||
</p>
|
||||
|
||||
Demo app showcasing the use of the npm package [angular-swa-auth](https://www.npmjs.com/package/@christianacca/angular-swa-auth).
|
||||
|
||||
- **[angular-swa-auth demo site](https://angular-swa-auth.codingdemo.co.uk/)**
|
||||
- **[angular-swa-auth repo](https://github.com/christianacca/static-web-apps-auth)**
|
||||
|
||||
> Stacks Used: `angular, typescript, storybook, compodoc, azure static web apps`
|
||||
|
||||
---
|
||||
|
||||
## Docusaurus
|
||||
|
||||
### **[Docusaurus Starter](https://ambitious-pebble-02b2d3010.azurestaticapps.net/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="./media/docusaurus-starter.PNG" alt="Docusaurus starter" width="100%">
|
||||
</p>
|
||||
|
||||
A simple starter template for creating documentation website using the Docusaurus framework.
|
||||
|
||||
> Stacks Used: `reactjs, azure static web apps`
|
||||
|
||||
- Link to the project: **[HERE](https://ambitious-pebble-02b2d3010.azurestaticapps.net/)**
|
||||
- GitHub repo: **[HERE](https://github.com/sumitkharche/docusaurus-swa-app)**
|
||||
- Author: [@sumitkharche01](https://twitter.com/sumitkharche01)
|
||||
|
||||
---
|
||||
|
||||
## Eleventy
|
||||
|
||||
### **[Eleventy Blog Starter](https://zealous-wave-0ec9a1203.azurestaticapps.net/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="./media/11ty.png" alt="Eleventy starter" width="100%">
|
||||
</p>
|
||||
|
||||
A base blog scaffolded using the Eleventy [base blog starter](https://github.com/11ty/eleventy-base-blog).
|
||||
|
||||
> Stacks Used: `eleventy, html, css, javascript, azure static web apps`
|
||||
|
||||
- **[Eleventy demo](https://zealous-wave-0ec9a1203.azurestaticapps.net/)**
|
||||
- **[Eleventy repo](https://github.com/manekinekko/11ty-blog-swa)**
|
||||
- **[Author @manekinekko](https://twitter.com/manekinekko)**
|
||||
|
||||
---
|
||||
|
||||
## Gatsby
|
||||
|
||||
### **[Gatsbyjs Starter](https://jolly-tree-003047c03.azurestaticapps.net/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="./media/gatsby_starter.png" alt="Gatsby starter" width="100%">
|
||||
</p>
|
||||
|
||||
A very simple starter scaffolded using the Gatsby framework.
|
||||
|
||||
> Stacks Used: `reactjs, azure static web apps, gatsbyjs`
|
||||
|
||||
- **[Gatsby demo](https://jolly-tree-003047c03.azurestaticapps.net/)**
|
||||
- **[Gatsby repository](https://github.com/floAr/gatsby-starter-azure_swa)**
|
||||
|
||||
---
|
||||
|
||||
## Hugo
|
||||
|
||||
### **[ngVikings 2020: A free online conference for Angular developers](https://www.ngvikings.org/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="./media/ngvikings2020.png" alt="ngVikings 2020" width="100%">
|
||||
</p>
|
||||
|
||||
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.
|
||||
|
||||
- **[ngVikings site](https://www.ngvikings.org/)**
|
||||
- **[ngVikings repo](https://github.com/ngvikings/ngvikings-2020)**
|
||||
|
||||
> Stacks Used: `hugo, azure static web apps, workbox`
|
||||
|
||||
---
|
||||
|
||||
## Mongoose
|
||||
|
||||
|
||||
|
||||
### [Azure Static Web Apps and Mongoose Starter Kit](https://github.com/GeekTrainer/aswa-student-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`
|
||||
|
||||
- **[Mongoose Starter Kit repo](https://github.com/geektrainer/aswa-student-starter-kit)
|
||||
- **[Author: GeekTrainer](https://twitter.com/geektrainer)
|
||||
|
||||
---
|
||||
|
||||
## React.js
|
||||
|
||||
### **[Sunrise Standup](https://www.sunrisestandup.com)**
|
||||
|
||||
|
||||
|
||||
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`
|
||||
|
||||
- **[Sunrise Standup project](https://www.sunrisestandup.com)**
|
||||
- **[Sunrise Standup repo](https://github.com/sunrise-standup/sunrise-standup)**
|
||||
|
||||
---
|
||||
|
||||
## Stencil
|
||||
|
||||
### **[Stencil Starter App](https://kind-meadow-01093c903.azurestaticapps.net/)**
|
||||
|
||||
<p align="center">
|
||||
<img width="100%" alt="Stencil Starter App" src="./media/stencil.png">
|
||||
<p>
|
||||
|
||||
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.
|
||||
|
||||
- **[Stencil demo](https://kind-meadow-01093c903.azurestaticapps.net/)**
|
||||
- **[Stencil repo](https://github.com/manekinekko/stencil-swa)**
|
||||
|
||||
> Stacks Used: `stencil.js, azure static web apps`
|
||||
|
||||
---
|
||||
|
||||
## Scully
|
||||
|
||||
### **[PWA Blog](https://www.webmax.ru/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="./media/pwablog.png" alt="PWA Blog" width="100%">
|
||||
</p>
|
||||
|
||||
News and articles about Progressive Web Apps.
|
||||
|
||||
- **[Progressive web apps information](https://www.webmax.ru/)**
|
||||
- **[Progressive web apps repo](https://github.com/webmaxru/webmax.ru)**
|
||||
|
||||
> Stacks Used: `angular, scully, azure static web apps, workbox, pwa`
|
||||
|
||||
---
|
||||
|
||||
## Svelte
|
||||
|
||||
### **[Shop at Home](https://www.shopathome.dev)**
|
||||
|
||||
<p align="center">
|
||||
<img src="./media/shop-at-home-svelte.png" alt="Svelte Application" width="100%">
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
"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 demo](https://www.shopathome.dev)**
|
||||
- **[Shop at Home repo](https://github.com/johnpapa/shopathome)**
|
||||
|
||||
> Stacks Used: `svelte, react, angular, nodejs, azure static web apps`
|
||||
|
||||
---
|
||||
|
||||
## Vanilla HTML JavaScript CSS
|
||||
|
||||
### **[Azure SWAG Demo: A Positive Thought For Your Day](https://ashy-mushroom-05748f31e.azurestaticapps.net/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="./media/positive-quote.png" alt="Positive quote website screenshot" width="100%">
|
||||
</p>
|
||||
|
||||
This is a simple barebone demo for [Azure SWAG](https://docs.microsoft.com/azure/static-web-apps?WT.mc_id=staticwebapps-github-yolasors) (**S**tatic **W**eb **A**pps on **G**itHub).
|
||||
You can use it as a template for your own apps.
|
||||
|
||||
- **[SWAG demo](https://aka.ms/swag-demo)**
|
||||
- **[SWAG repo](https://github.com/sinedied/azure-swag/)**
|
||||
|
||||
> Stacks Used: `html, javascript, nodejs, azure static web apps`
|
||||
|
||||
### **[Nitrooo landing page](https://victorious-ocean-0337ef81e.azurestaticapps.net/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="./media/nitrooo.png" alt="Nitrooo App" width="100%">
|
||||
</p>
|
||||
|
||||
Nitro is a heavily opinionated template for building Serverless applications with NestJS, the fastest-growing NodeJS framework in the world by github stars.
|
||||
|
||||
- **[Nitrooo project](https://victorious-ocean-0337ef81e.azurestaticapps.net/)**
|
||||
- **[Nitrooo repo](https://github.com/nitro-stack/website)**
|
||||
|
||||
> Stacks Used: `javascript, css, html`
|
||||
|
||||
---
|
||||
|
||||
### **[Hexa CLI Landing Page](https://www.hexa.run)**
|
||||
|
||||
<p align="center">
|
||||
<img src="./media/hexa.png" alt="The ultimate companion for the Azure CLI screenshot" width="100%">
|
||||
</p>
|
||||
|
||||
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.
|
||||
|
||||
- **[Hexa project](https://www.hexa.run)**
|
||||
- **[Hexa repo](https://github.com/manekinekko/hexa/)**
|
||||
|
||||
> Stacks Used: `html, css, javascript`
|
||||
|
||||
---
|
||||
|
||||
## Vue.js
|
||||
|
||||
### **[PoseDance: A TikTok Trainer App](https://proud-moss-070616b1e.azurestaticapps.net/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="./media/posedance.png" alt="PoseDance App" width="100%">
|
||||
</p>
|
||||
|
||||
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.
|
||||
|
||||
- **[PoseDance demo](https://proud-moss-070616b1e.azurestaticapps.net/)**
|
||||
- **[PoseDemo repo](https://github.com/jlooper/posedance)**
|
||||
|
||||
> Stacks Used: `vuejs, azure static web apps, machine learning, nodejs, javascript, azure functions`
|
||||
|
||||
### **[VS Code Can Do That](https://www.vscodecandothat.com)**
|
||||
|
||||
<p align="center">
|
||||
<img src="./media/vscodecandothat.png" alt="Vs Code Can Do That" width="100%">
|
||||
</p>
|
||||
|
||||
All the best things about VS Code that nobody ever bothered to show you.
|
||||
|
||||
- **[VS Code Can Do That demo](https://www.vscodecandothat.com)**
|
||||
- **[VS Code Can Do That repo](https://github.com/burkeholland/vscodecandothat/)**
|
||||
|
||||
> Stacks Used: `vuejs, azure static web apps`
|
||||
|
||||
---
|
||||
|
||||
## VuePress
|
||||
|
||||
### **[Nitro Workshop](https://nitro-stack.github.io/nitro-workshop/)**
|
||||
|
||||
<p align="center">
|
||||
<img src="./media/nitro.png" alt="Nitro logo" width="256" height="256">
|
||||
<p>
|
||||
|
||||
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.
|
||||
|
||||
- **[Nitro workshop](https://nitro-stack.github.io/nitro-workshop/)**
|
||||
- **[Nitro workshop repo](https://github.com/nitro-stack/nitro-workshop)**
|
||||
|
||||
> Stacks Used: `vuepress, azure static web apps, nodejs, nestjs`
|
||||
|
||||
### **[Peacock for Visual Studio Code Documentation](https://www.peacockcode.dev)**
|
||||
|
||||
<p align="center">
|
||||
<img src="./media/peacock-icon.png" alt="Peacock icon" width="256" height="256">
|
||||
<p>
|
||||
|
||||
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](https://www.peacockcode.dev)**
|
||||
- **[GitHub repo for Peacock Documentation](https://github.com/johnpapa/vscode-peacock)**
|
||||
- **[Install the Peacock Extension](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock&wt.mc_id=staticwebapps-github-jopapa)**
|
||||
|
||||
> Stacks Used: `vuepress, azure static web apps, nodejs`
|
||||
|
||||
---
|
||||
|
||||
### [Cognitive Search Static Apps Demo](https://lively-sand-033e9ec03.azurestaticapps.net/)
|
||||
|
||||
<p align="center">
|
||||
<img src="./media/cognitive-search-demo.png" alt="Cognitive Search Static Apps Demo" width="100%">
|
||||
</p>
|
||||
|
||||
A sample *faceted search* user experience implementation for your [Azure Cognitive Search](https://azure.microsoft.com/services/search/) index. Similar to the [official demo app](https://docs.microsoft.com/azure/search/search-create-app-portal), but a bit more modern. Fork the [repo](https://github.com/scale-tone/cognitive-search-static-web-apps-sample-ui), [deploy](https://docs.microsoft.com/azure/static-web-apps/getting-started?tabs=react#create-a-static-web-app) it to your Static Web Apps instance, connect it to your Cognitive Search index with a set of [config settings](https://github.com/scale-tone/cognitive-search-static-web-apps-sample-ui#config-settings), optionally [configure authN/authZ](https://docs.microsoft.com/azure/static-web-apps/authentication-authorization) - and you get a fully functioning search UI, with facet filters and geovisualization. The [live demo](https://lively-sand-033e9ec03.azurestaticapps.net/) is pointed to [the official Azure Cognitive Search Sample Data](https://docs.microsoft.com/samples/azure-samples/azure-search-sample-data/azure-search-sample-data/) index, and you can start with the same. Feel free to use as a template for your own implementations.
|
||||
|
||||
- **[Lively Sand demo](https://lively-sand-033e9ec03.azurestaticapps.net/)**
|
||||
- **[Lively Sand repo](https://github.com/scale-tone/cognitive-search-static-web-apps-sample-ui)**
|
||||
- **[Author: @tino_scale_tone](https://twitter.com/@tino_scale_tone)**
|
||||
|
||||
> Stacks Used: `react, nodejs, azure static web apps, azure functions`
|
||||
> Work in Progress
|
||||
Загрузка…
Ссылка в новой задаче