AzPark: SWA - Architecture

Hey folks!, In this blog we will see about the high-level architecture of our Az-Park site

Az-Park architecture will be constantly updated, the one as part of this blog is the initial version as of dated 2nd October 2021


My total cost of Az-Park is less than ₹50 per month . For the demo purpose I have moved Azure cognitive services to standard plan , so that everyone can try out the feature.

All of our modules are based out of serverless model and that’s the main reason we didn’t pay any upfront costs / constant payment per month basis.


There are 6 major azure services that are implemented as part of initial version :

  • Azure Static Web Apps
  • Azure Web Pub Sub
  • Azure Cognitive Services
  • Azure Logic Apps
  • Azure Event Grid
  • Azure Cosmos DB

Our entire site is deployed over Azure Static Web Apps . Let’s see why we chose Static Web apps over the traditional Web apps

  • Browser sends request to server
  • Server receives the request and sends information to web application
  • Web application connects to database or other necessary information stores , uses the data to dynamically generate HTML
  • Server sends the created HTML to the browser

  • Browser sends request to server
  • Server receives the request and sends HTML file stored on it back to browser
  • JavaScript in the HTML file uses the browser to connect to data stores and fetch information

Web hosting
Static content like HTML, CSS, JavaScript, and images.
Integrated API
Support provided by Azure Functions with the option to link an existing Azure Functions app using a standard account.
First-class GitHub and Azure DevOps integration
Repository changes trigger builds and deployments.
Globally distributed
Static content, putting content closer to your users.
Free SSL certificates
Automatically renewed.
Custom domains
Provides branded customizations to your app.
Seamless security model
Reverse-proxy when calling APIs, which requires no CORS configuration.
Authentication provider integrations
Supported providers are Azure Active Directory, GitHub, and Twitter
Roles customization
Customizable authorization role definition and assignments
Back-end routing
Rules enabling full control over the content and routes you serve.
Generated staging versions
Powered by pull requests enabling preview versions of your site before publishing.

We have extensive workflow based out of Azure Logic Apps

  1. If user is logging in for the first time , event will be triggered to event grid and then it will be consumed by our Azure logic app where we will pick the mail address of the person who logged in and will send an invitation mail
  2. We have two options on creating the session ( public and private ). If it is a private session and someone is requesting to join the particular session , we will trigger those events and we will send a approval mail flow to the author of the session.
  3. If the author approves the session , then the requester will receive a mail along with the link to join the session
  4. If the author rejects the session, then we will send a notification back to the requester.

Azure Cognitive Services are cloud-based services with REST APIs and client library SDKs available to help you build cognitive intelligence into your applications. You can add cognitive features to your applications without having artificial intelligence (AI) or data science skills. Azure Cognitive Services comprise various AI services that enable you to build cognitive solutions that can see, hear, speak, understand, and even make decisions.

Here are some of the key features of Azure Event Grid:

Simplicity - Point and click to aim events from your Azure resource to any event handler or endpoint.
Advanced filtering - Filter on event type or event publish path to make sure event handlers only receive relevant events.
Fan-out - Subscribe several endpoints to the same event to send copies of the event to as many places as needed.
Reliability - 24-hour retry with exponential backoff to make sure events are delivered.
Pay-per-event - Pay only for the amount you use Event Grid.
High throughput - Build high-volume workloads on Event Grid.
Built-in Events - Get up and running quickly with resource-defined built-in events.
Custom Events - Use Event Grid to route, filter, and reliably deliver custom events in your app.

(1)-(2) WebPubSubConnection input binding with HttpTrigger to generate client connection.

(3)-(4) WebPubSubTrigger trigger binding or WebPubSubRequest input binding with HttpTrigger to handle service request.

(5)-(6) WebPubSub output binding to request service do something.

Key Benefits:

  • Guaranteed speed at any scale
  • Simplified application development
  • Mission-critical ready
  • Fully managed and cost-effective

We will explore all these services in-depth on our upcoming blogs. Meanwhile, please go ahead and join our discord channel (https://discord.gg/8Cs82yNS) to give some valuable feedbacks