Project overview

67projects.app

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

next framework 15.1

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 →
react framework 19.0

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.

payload cms 3.81

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 →
tailwindcss styling 4.1

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.

vitest testing 2.1

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.

full stack
Production
@payloadcms/db-postgres 3.81.0 @payloadcms/next 3.81.0 @payloadcms/richtext-lexical 3.81.0 @payloadcms/ui 3.81.0 lru-cache 11.0.0 react-dom 19.0.0 tsx 4.19.0 zod 3.23.8
Dev
@axe-core/playwright 4.10.0 @playwright/test 1.48.0 @tailwindcss/postcss 4.1.0 @types/node 22.10.0 @types/react 19.0.0 @types/react-dom 19.0.0 @vitest/coverage-v8 2.1.0 babel-plugin-react-compiler 1.0.0 eslint 9.15.0 eslint-config-next 15.1.0 eslint-plugin-security 3.0.1 typescript 5.7.0

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

Content Security Policy (CSP)
A browser security layer, sent as an HTTP header, that restricts which scripts, styles and other resources a page is allowed to load.
nonce
A single-use random token; here it marks the page's own scripts so the browser runs them and blocks any injected ones.
Server Action
A Next.js function that runs on the server but is called straight from the UI, with no separate API endpoint to expose or secure.
IP hashing
Storing a one-way fingerprint of a visitor's IP address instead of the address itself, so it cannot be reversed to the original.

The numbers

Data

LOC, work time, sessions, languages and the full file breakdown.

Why it's built this way

Course

A cinematic walkthrough of the "why" — architectural decisions, the traps they avoid, and the roads not taken.

Audited & remediated

Security

What was found and what's fixed — severity posture and before→after remediation.