RezaCode.id | QA Engineer & AI Testing Specialist

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 16 using the App Router. It is deployed on Vercel's network and combines Server-Side Rendering (SSR) with Static Site Generation (SSG) for 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 through a Next.js Route Handler. Lightweight RAG supplies portfolio context, while schema validation, bounded requests, rate limiting, and scope instructions reduce abuse. Prompt instructions are guidance rather than an absolute security boundary.

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.id, connected to a dedicated sit Sanity Dataset for safe testing.
PROD Environment: The master branch deploys to rezacode.id, 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.

Project Documentation

Documentation Menu