4.1 Project Overview

Overview of Project ☁️

Scenario

A travel startup wants to build a web application where users can plan and manage their trips in one place. Users should be able to create trips, add activities, and organize their itinerary efficiently.

To support this, the application needs to:

  • Handle multiple users and requests reliably
  • Store trip and activity data securely
  • Follow a structured architecture that is easy to maintain and scale

Our Solution

We’ll build and deploy a 3-tier Travel Itinerary Planner on Microsoft Azure that:

  • Uses Azure App Service to host both frontend and backend.
  • Implements a Node.js backend API to handle business logic.
  • Stores data in Azure SQL Database.

This approach ensures the application is:

  • Scalable - can handle growth.
  • Structured - clear separation of layers.
  • Cloud-ready - deployed using real Azure services.

About the Project

In this project, you’ll learn how to design and deploy a 3-tier architecture, a foundational concept in cloud computing.

  • Most real-world applications follow this layered approach
  • Each layer has a specific responsibility:
    • Frontend → User interface.
    • Backend → Business logic.
    • Database → Data storage.

You’ll learn to:

  • Deploy applications using Azure App Service.
  • Connect a backend to Azure SQL Database.
  • Build and deploy a full-stack cloud application.
  • Understand how different layers communicate.

By the end, you’ll have hands-on experience building a real-world style application on Azure.

Steps To Be Performed 👩‍💻

  1. Set up Azure SQL Database and create tables.
  2. Deploy the backend API to Azure App Service.
  3. Deploy the frontend application using Azure Static Web Apps.
  4. Connect frontend and backend.
  5. Test the application end-to-end.

Services Used 🛠

  • Azure App Service → Hosts the backend API.
  • Azure Static Web Apps → Hosts the frontend.
  • Azure SQL Database → Stores application data.
  • Frontend (React + Tailwind CSS) → User interface.
  • Backend (Node.js + Express) → API and business logic.

Estimated Time & Cost ⚙️

  • Estimated time: ~2 hours
  • Cost: ~$0 – $5 (within free tier usage)

➡️ Architectural Diagram

This is the architectural diagram for the project:

➡️ Final Result

A fully functional 3-tier web application where:

  • Users can create and manage travel itineraries
  • The frontend communicates with a backend API
  • The backend stores and retrieves data from Azure SQL
  • The entire application is deployed on Azure

By the end, you’ll have a complete full-stack cloud project that demonstrates how modern applications are built.

Complete and Continue