israfil.dev

Architecture & System Design

How this portfolio website is designed, built, and deployed — itself an engineering showcase.

Infrastructure Overview

// System Architecture Flow

Azure Live Deployment

Developer

git push

➔

GitHub Repository

main branch

➔

GitHub Actions

CI + CD Pipeline

Frontend (Static Export)

Azure Static Web AppsGlobal Edge CDN Distribution

Serverless Backend

Azure Functions v4Managed API Endpoints (/api)

Database & Cache

MongoDB Atlas / PostgresPersistent Storage & Cache

Backend Layered Architecture

// Layer Separation Pattern

Routes / Functions (/api)➔ HTTP method & path mapping with security headers

Validation Layer (lib/validate.ts)➔ Zod schemas validating request payloads & types

Authentication (lib/auth.ts)➔ x-ms-client-principal role & token verification

Database & Cache (lib/db.ts)➔ Database connection pooling & cached query models

Key Design Decisions

Why Next.js 16 Static Export?

Static export produces pre-rendered HTML/CSS/JS assets that deploy instantly to Azure Static Web Apps global CDN nodes with zero runtime server latency and high security.

Why Serverless Functions & Managed APIs?

Azure Managed Functions scale to zero when idle, fitting perfectly within free-tier budgets while providing dynamic contact handling and guestbook persistence.

Why Type Safety with TypeScript & Zod?

Strict TypeScript end-to-end combined with Zod runtime schema validation guarantees that all API payloads and component props are strictly checked before processing.

Why Azure Hosting?

Deploying on Microsoft Azure demonstrates production cloud engineering, custom domain routing, automated SSL termination, and real DevOps workflows rather than simplistic PaaS magic.

Why Automated GitHub Actions CI/CD?

Every push to the main branch automatically runs linting, TypeScript type verification, unit testing with Vitest, and triggers direct deployment to Azure Static Web Apps.

Production Secret Management

Database connection strings and admin credentials are kept strictly in Azure environment variables and GitHub Secrets — zero secrets committed to source control.