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 sit branch deploys to sit.rezacode.cloud, connected to a dedicated sit Sanity Dataset for safe testing.
  • PROD Environment: The master branch deploys to rezacode.cloud, connected to the production Sanity Dataset.
  • Automated Testing: GitHub Actions triggers Playwright E2E tests on every push. Reports are automatically deployed to GitHub Pages, isolated by branch.

Reza Yusuf Maulana

QA Engineer & AI Testing Specialist based in South Tangerang, Indonesia.

Quick Links

Connect

© 2026 Reza Yusuf Maulana. All rights reserved.