Project overview
A production marketing-and-CMS site for a 67-day shipping challenge: the public pages and an embedded Payload admin run from one Next.js deploy, one Postgres database and one shared set of types — behind a deliberately hardened request path.
The stack, explained
A React framework for building full-stack web apps: you write the UI as React components and Next.js layers on routing, server and client rendering, and build optimizations. It auto-configures the lower-level tooling so you focus on the product instead of the setup.
Here: hosts the public site and the embedded Payload admin as two App Router route groups in one process.
why this choice →A JavaScript library for building user interfaces from small, isolated, reusable pieces called components. Components are functions that return markup, letting you compose everything from a single button to a full screen.
Here: renders every page as server and client components, with the React Compiler handling memoization automatically.
An open-source, code-first headless CMS and backend framework for Next.js, written in TypeScript. You define your content models in code and it generates an admin panel, database schema, REST and GraphQL APIs, authentication and file storage.
Here: the content layer — collections, globals and the /admin panel, read in-process by pages through its Local API.
why this choice →A utility-first CSS framework where you style elements by applying small predefined classes directly in your markup instead of writing custom CSS. It scans your templates and generates only the CSS you actually use, producing a small, optimized stylesheet.
Here: all styling via a CSS-first config in globals.css — there is no tailwind.config.js.
A fast testing framework powered by Vite that reuses your project's Vite config and transform pipeline, so tests run with the same setup as your app. It offers a Jest-compatible API plus watch mode, mocking, snapshots and coverage.
Here: unit and integration tests with a 90/85% coverage gate over lib and the API routes.
Why this stack
One app, two route groups
Payload 3 mounts inside the App Router, so there's no wire format to drift between frontend and API — and one deploy plus one database beats running two services for a solo build.
full decision in the course → what is next ↑ what is payload ↑A fresh CSP nonce on every request
Each request mints a one-time nonce, so injected inline scripts are rejected, while 'strict-dynamic' keeps Next's dynamic chunks working without 'unsafe-inline'.
full decision in the course →IP hashing with a daily-rotating salt
Visitor IPs are hashed under a salt that rotates daily, limiting correlation to the one-day window rate-limiting needs and making the small IPv4 space impractical to reverse — GDPR minimization by construction.
full decision in the course →Validate the whole environment before boot
The entire environment is parsed through a Zod schema on first import and the process refuses to start on a bad value — silent misconfiguration becomes a loud, single-source-of-truth crash.
full decision in the course →What it gives you
Glossary
The numbers
DataLOC, work time, sessions, languages and the full file breakdown.
Why it's built this way
CourseA cinematic walkthrough of the "why" — architectural decisions, the traps they avoid, and the roads not taken.
Audited & remediated
SecurityWhat was found and what's fixed — severity posture and before→after remediation.