Project Documentation
Comprehensive technical documentation detailing the architecture, functional specifications, and technologies used to build this portfolio.
Documentation Menu
System Architecture & Data Model
This portfolio is built with a modern, serverless, and highly scalable architecture designed to demonstrate enterprise-grade capabilities.
Frontend (Next.js & Vercel)
The core application runs on Next.js 15 utilizing App Router. It is deployed on Vercel's Edge Network for global low-latency delivery. We employ Server-Side Rendering (SSR) and Static Site Generation (SSG) for optimal SEO and performance.
Content Management (Sanity)
A headless CMS (Sanity) powers the blog and dynamic content. It allows real-time collaborative editing and delivers content globally via its Global CDN. It is integrated using GROQ queries.
AI Integration (Gemini)
Google's Gemini API is integrated directly via Next.js Route Handlers. It leverages Lightweight RAG (Retrieval-Augmented Generation) to inject real DOM structure context, and Strict Guardrails to restrict interactions exclusively to Playwright testing domains, preventing token abuse.
Observability (OTEL & Grafana)
OpenTelemetry instruments the Next.js application, pushing traces and metrics to Grafana Cloud. This allows real-time monitoring of API latency, page loads, and AI response times.
Entity Relationship Diagram (ERD)
Data is structured in Sanity.io using a document-based NoSQL model. Below is the relational mapping of the core entities:
+-------------------+ +-------------------+
| AUTHOR | | CATEGORY |
+-------------------+ +-------------------+
| _id (PK) |<---+ | _id (PK) |<---+
| name | | | title | |
| slug | | | description | |
| image | | +-------------------+ |
| bio | | |
+-------------------+ | +-------------------+ |
+-----| POST |----+
+-------------------+
| _id (PK) |
| title |
| slug |
| author (Ref) |
| mainImage |
| categories (Ref[])|
| publishedAt |
| body (PortableTxt)|
+-------------------+
CI/CD Pipeline & 2-Tier Environments
The repository employs a professional DevOps pipeline:
- SIT Environment: The
sitbranch deploys tosit.rezacode.cloud, connected to a dedicatedsitSanity Dataset for safe testing. - PROD Environment: The
masterbranch deploys torezacode.cloud, connected to theproductionSanity Dataset. - Automated Testing: GitHub Actions triggers Playwright E2E tests on every push. Reports are automatically deployed to GitHub Pages, isolated by branch.