1.1 Project Overview

Overview of Project ☁️

Scenario

A startup wants to launch an online recipe cookbook application where users can browse, search, and explore different recipes.

The application needs to be:

  • Fast and responsive,
  • Easily scalable as users grow,
  • Able to store and retrieve recipe data efficiently.

At the same time, the team does not want to manage servers or infrastructure. They are looking for a serverless, cloud-native solution that is simple to build and maintain.

Our Solution

We’ll build a serverless full-stack application on Microsoft Azure that:

  • Hosts the frontend using Azure Static Web Apps.
  • Uses Azure Functions to handle backend API requests.
  • Stores recipe data in Azure Cosmos DB (NoSQL database).
  • Connects all components into a seamless end-to-end application.

This architecture ensures the application is scalable, cost-efficient, and easy to manage without servers.

About Project

In this project, you’ll learn how to build your first serverless full-stack application using Azure.

  • These concepts are important because modern applications are built using decoupled frontend, backend APIs, and cloud databases.
  • You’ll learn to:
    • Deploy frontend applications using Azure Static Web Apps.
    • Build backend APIs using Azure Functions.
    • Store and manage data using Azure Cosmos DB.
    • Connect all components into a complete working system.

By the end, you’ll have hands-on experience building a production-style cloud application, a foundational skill for any cloud or AI role.

Steps To Be Performed 👩‍💻

We’ll go through the following steps in the next lessons:

  1. Deploy the frontend using Azure Static Web Apps.
  2. Create backend APIs using Azure Functions.
  3. Set up Azure Cosmos DB and add recipe data.
  4. Connect backend APIs to the database.
  5. Integrate frontend with backend APIs.
  6. Test the complete application.

Services Used 🛠

  • Azure Static Web Apps → Hosts the frontend application.
  • Azure Functions → Handles backend API logic.
  • Azure Cosmos DB → Stores and retrieves recipe data.

Estimated Time & Cost ⚙️

  • Estimated time: ~2 hours
  • Cost: Free or minimal (within Azure free tier)

➡️ Architectural Diagram

This is the architectural diagram for the project:

➡️ Final Result

By the end of this project, you will have built a working recipe cookbook web app using Azure.

Here’s what you’ll learn:

  • Hosting a frontend application on the Azure cloud.
  • Build backend APIs without managing servers.
  • Store and retrieve data from a cloud database.
  • Cloud database storing and managing recipes.

By the end, you’ll have a complete end-to-end serverless application, forming a strong foundation for building real-world cloud solutions.

Complete and Continue