Skip to content

Architecture Overview

System Architecture

The portfolio website is built with a modern, cloud-native architecture deployed on Azure.

High-Level Architecture

graph TB subgraph "User Layer" Browser[Web Browser] end subgraph "Azure Cloud" subgraph "Container Apps Environment" Frontend[Frontend Container
React + Vite] Backend[Backend Container
FastAPI] end subgraph "Static Web App" Docs[MkDocs Documentation] end subgraph "Shared Services" ACR[Container Registry] KeyVault[Key Vault] AppInsights[Application Insights] LogAnalytics[Log Analytics] end end subgraph "External Services" Gmail[Gmail SMTP] end Browser -->|HTTPS| Frontend Browser -->|HTTPS| Docs Frontend -->|API Calls| Backend Backend -->|Send Email| Gmail Frontend -.->|Logs| AppInsights Backend -.->|Logs| AppInsights Docs -.->|Logs| AppInsights ACR -->|Pull Images| Frontend ACR -->|Pull Images| Backend Backend -->|Get Secrets| KeyVault

Components

Frontend (React + TypeScript)

  • Technology: React 18, TypeScript, Vite
  • Styling: Tailwind CSS, shadcn/ui
  • Hosting: Azure Container Apps
  • Port: 80 (internal), 443 (external)

Backend (FastAPI)

  • Technology: Python 3.11, FastAPI
  • Features: Email service, API endpoints
  • Hosting: Azure Container Apps
  • Port: 8000 (internal)

Documentation (MkDocs)

  • Technology: MkDocs Material
  • Hosting: Azure Static Web App
  • Features: Planning docs, API docs, guides

Data Flow

  1. User Request → Browser sends HTTPS request
  2. Frontend → Serves React application
  3. API Call → Frontend calls Backend API
  4. Email Processing → Backend sends email via Gmail SMTP
  5. Monitoring → All components log to Application Insights

Security

  • HTTPS: All traffic encrypted with SSL/TLS
  • Secrets: Stored in Azure Key Vault
  • Authentication: Managed identities for Azure resources
  • CORS: Configured for frontend-backend communication

Scalability

  • Auto-scaling: Container Apps scale based on HTTP requests
  • Min Replicas: 1 (always available)
  • Max Replicas: 5 (cost-optimized)
  • Scaling Rule: 100 concurrent requests per replica

Monitoring

  • Application Insights: Performance monitoring, error tracking
  • Log Analytics: Centralized logging
  • Metrics: CPU, memory, request count, response time
  • Alerts: Configured for critical issues

Next Steps