Skip to content
Ac.Dev

how.its.built

How this site is built

A small production system with real constraints: a Next.js front end, a NestJS API and a handful of deliberate engineering habits. Everything below describes what actually runs here.

Architecture

Scroll sideways to see the whole diagram.

Pages are rendered by Next.js on Vercel and refreshed with ISR. The browser also calls the NestJS API directly for the chat assistant and the health check.
  • Browser, client
  • Vercel, service, Next.js 16, next-intl
  • NestJS API, service, Prisma
  • MongoDB, datastore
  • Firebase Storage, datastore
  • SendGrid, external
  • Anthropic, external, Claude Haiku 5.5
  1. Browser → Vercel: RSC and ISR pages
  2. Browser → NestJS API: Chat, health
  3. Vercel → NestJS API: Cached reads
  4. NestJS API → MongoDB: Prisma
  5. NestJS API → Firebase Storage: Images
  6. NestJS API → SendGrid: Notifications
  7. NestJS API → Anthropic: AndroAI

Stack

Frontend

  • Next.js
  • React.js
  • TypeScript
  • Tailwind CSS
  • Framer Motion
  • TanStack Query
  • Zustand
  • Zod

Backend and data

  • Nest.js
  • Prisma
  • MongoDB
  • Firebase

AI

  • Claude

Delivery and quality

  • Vercel
  • GitHub Actions
  • Vitest
  • Playwright
  • Yarn

Practices

  • Small, stacked PRs

    Changes ship as small, stacked pull requests, each reviewed on its own.

  • Lighthouse and axe on every preview

    Each Vercel preview gets a Lighthouse run and an axe accessibility check, reported as commit statuses.

  • End-to-end tests cannot write to production

    Playwright contexts abort every write request unless writes are explicitly enabled, so a test can never change real data.

  • Static first, refreshed in the background

    Pages are prerendered and revalidated with ISR, so visitors get cached HTML and content still stays fresh.

  • Analytics that filter bots

    Visits are counted without cookies, and crawlers and automated test browsers are filtered out so the numbers mean people.

  • Grounded AI with a daily budget

    The AndroAI assistant answers from this portfolio's own data, cites the projects it refers to and stops at a daily spending cap in USD.

  • Preview-friendly CORS

    The API matches allowed origins by pattern, so deployment previews can reach it while every other origin stays blocked.

  • Translation parity test

    A unit test fails when the English and Spanish messages drift apart in keys or placeholders.

Live health

Your browser pings the API three times, right now, and reports the median round trip.

Checking the API

Sending 3 requests.

Lighthouse

Lighthouse scores for the home page on a mobile profile.