Packaged solutions for Contoso real estate
The Contoso Real Estate application contains the reference architecture and components for building enterprise-grade modern composable frontends (or micro-frontends) and cloud-native applications. It is a collection of best practices, architecture patterns, and functional components that can be used to build and deploy modern JavaScript applications to Azure.
The following packages are listed in order of learning priority.
Public blog with Container Apps and Azure Database for PostgreSQL
This package provides data authoring and storing capabilities for both vertical micro-frontend applications (Blog and Portal). We enable these capabilities, via the implementation of a Headless CMS, powered by Strapi.
There are two components that make up the architecture of this solution:
- A Headless CMS, implemented using Strapi.
- A frontend application, implemented using Next.js, that consumes the data from the Headless CMS and renders the blog pages.
- A PostegreSQL database that stores the data for the Headless CMS. The CMS is hosted in Azure Container Apps, and the database is hosted in Azure Database for PostgreSQL. They'll connect to each other via the endpoints built in the Strapi server implementation.
Both of these applications are hosted in Azure Container Apps.
Packages:
Secure portal with Static Web Apps and Azure Functions API
This frontend application is the main entry point for the users implementing Angular as a JavaScript framework.
This service is deployed to Azure Static Web Apps, including capabilities like
- Authentication and Authorization with Easy Auth
The API backend is deployed to Azure Functions, which is a serverless compute service that allows you to run code on-demand without having to explicitly manage infrastructure.
The database for content, integrated to the serverless API backend, is an Azure Database for PostgreSQL populated from a headless CMS implementation in Scenario 1.
A database for user events and user profiles, integrated into the serverless API backend is an Azure Cosmos DB, which is a fully managed NoSQL database service that offers multiple APIs, including the MongoDB API.
Packages:
User authentication with built-in functionality for secure portal
User authentication is provided as built-in functionality in the portal's Azure Static web app. The typical flow of sign in, redirecting a user to an authorization provider to complete authentication, then redirecting the authenticated user back to the application, is offered with several social media providers.
Once a user is logged in, their user information is stored in Cosmos DB for MongoDB API such as favorited-properties, and property reservations.
Stripe payments
This package supports the checkout process, in the portal, to pay for a property reservation. The payment flow is implemented with Stripe, a payment processing platform that allows you to accept payments online. This package containerizes the payment processing functionality in a Fastify application deployed to Azure Container Apps
When Azure API Management receives a request for the webhook endpoint URL from Stripe, it forwards the request to the Fastify API. The API handles the incoming webhook event and performs the payment actions such as checkout, checkout completed, checkout expired.
Playwright testing
This package provides the end to end testing for Contoso real estate. It uses Playwright to automate the browser and test the user experience of the application.
Documentation site
This package provides extensive documentation for the Contoso real estate reference architecture. It's built with Docusaurus, a modern static website generator.
Documentation package source code