Edit

Share via

Get started with Contoso Real Estate enterprise app

  • Article

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 Contoso Real Estate app

The Contoso Real Estate enterprise app allows employees of the Contoso company to search for a reserve relocation housing through a web app. This web app is an internal tool used by Contoso HR and new hire or relocating employees. Both authenticated Talent Managers, and new hires can interact with the application features, while nonauthenticated users can access some parts of it.

  • Learn Live: Learn more about this solution by watching the Learn Live sessions.
  • Learn Collection: Learn more about this solution with the Learn Collection.

Prerequisites

To deploy this entire app solution to Azure, you need:

  • An Azure subscription - Create one for free
  • A GitHub account. If you don't have one, sign up for free.
  • A Strapi account for headless CMS
  • A Stripe account for payments

Application

The Contoso Real Estate app has two client applications, the portal and the blog. The blog publicizes new real estate offerings and if visible without authentication. The portal app requires authentication to view, reserve, and pay for listings. Separate development teams have built and support this end-to-end architecture with their own choice of technical stack.

Public blog with Next:

The blog and its API are hosted from Azure Container Apps. The blog content is served from a headless Strapi CMS with data stored in Azure Database for PostrgreSQL. The CMS also stores the real estate listings. Property images for listings are stored in Azure Blob Storage.

Screenshot of Contoso blog featuring information about technology, news, gastronomy, releases, and locations relevant to users of the HR relocation portal.

Secure portal client with Angular

The portal is hosted in an Azure Static Web app with API support from an Azure Functions App. It also uses the listings held in the Azure Database for PostrgreSQL. The portal provides authentication through social providers such as Microsoft, Google, and Facebook.

Screenshot of Contoso portal featuring several property listings with images, descriptions, and prices.

Once a user signs in, and selects a property, they can choose to reserve the property then pay for it with a Stripe integration.

Screenshot of Contoso portal property page showing property images, details, and offering a user the ability to reserve the property with a payment form.

Other Azure services used include:

Packages

This application is divided into several packages. Each package describes a scenario of what is in the package and step-by-step instructions to help you build and deploy the package to Azure.

Package technology stack
Blog, Blob-CMS Next.js app with a Strapi CMS, both hosted in an Azure Container app.
Portal, API Angular web portal hosted from Static Web Apps with Azure Functions API app for the backend.
Stripe Fastify API Payment service API in an Azure Container app.
Testing End to end testing with Playwright.
Docs Learn more about this end to end solution.

Next step

Understand the solution with User Scenarios