Architecture

System design, technology decisions, and infrastructure overview.

Data Flow

GitLab API v4

Data Source

Read-only integration fetches pipelines, jobs, stages, environments, and commit metadata via personal access token.

REST API pollingWebhook receiverRate-limited sync

Next.js API Routes

Processing Layer

Serverless edge functions transform, validate, and normalize GitLab data before persistence. Handles admin operations and SSE streaming.

Data normalizationAdmin auth (API key)DORA computation

Supabase PostgreSQL

Persistence

Fully managed PostgreSQL stores projects, pipelines, stages, jobs, environments, and pre-computed metrics with Row Level Security.

6 tablesRLS policiesIndexed queries

SSE Stream

Real-time Layer

Server-Sent Events endpoint polls for database changes every 5 seconds and pushes pipeline and environment updates to connected clients.

5s poll interval30s heartbeatAuto-reconnect

React Dashboard

Presentation

Server Components fetch data at the edge with zero client JS. Client Components handle interactivity, charts, and real-time event rendering.

RSC-firstRechartsCSS animations

Design Patterns

Server-First Architecture

Data fetching happens in Server Components — zero JavaScript shipped for read-only pages. Client Components are used only for interactivity.

Typed Query Layer

All Supabase queries are centralized in a typed query module with explicit return types and error handling. No raw queries in components.

Real-time via SSE

Server-Sent Events with DB polling instead of WebSockets. Simpler, stateless, and compatible with serverless/edge environments.

Component Architecture

Reusable UI primitives built with CVA + clsx + tailwind-merge. No component library dependency — full control over design.

Technology Stack

Frontend

Next.js 16

App Router, React Server Components, Turbopack

TypeScript

Strict mode, full type safety across all layers

Tailwind CSS 4

Utility-first with CSS variable design tokens

Recharts 3

Composable charts for metrics visualization

Lucide React

Consistent, accessible icon system

Backend

Next.js API Routes

Serverless functions with edge runtime support

Supabase

PostgreSQL, Row Level Security, typed queries

Server-Sent Events

Real-time streaming via DB polling

DORA Calculator

Automated metric computation from pipeline data

Integration

GitLab API v4

Pipeline, job, environment, and commit data

Webhook Receiver

Real-time pipeline event ingestion endpoint

Admin API

Protected endpoints for sync and data management

Infrastructure

Vercel

Edge deployment with serverless functions

Supabase Cloud

Managed PostgreSQL (eu-west-1)

GitHub

Source control and CI/CD