Overview

Built this from scratch for a GCSE and A-Level maths tutor. The process started entirely in Figma: brand identity, user flows, and a full component spec across seven marketing sections before writing any code. Once the design was locked in, the build covered the public marketing site, Clerk-authenticated dashboard, and a structured course catalogue across six subject areas, all shipped to a self-hosted VPS with a zero-touch deployment pipeline.

Design Process

Figma-first meant engineering decisions were already validated against real user needs before implementation started:

• Brand identity, colour system, and typography locked in before any code was written
• Seven marketing sections prototyped: Hero, Product Display, Results, Possibilities, Curriculum, Differentiators, AI Benefits
• Student dashboard and course pages designed as a component spec, then coded directly from that

System Architecture

Next.js 16 App Router with route groups separating marketing, auth, dashboard, and course concerns:

• Clerk handles auth with a checkUser sync pattern that keeps Clerk and Postgres in step on every sign-in
• PostgreSQL via Prisma ORM, schema covers users and tasks with cascade deletes on user removal
• Express sidecar running on port 3001 for server-side logic that sits outside the Next.js request lifecycle
• Standalone output in next.config so the app self-hosts without a separate Node runtime layer
• Six course routes: GCSE Foundation, GCSE Higher, A-Levels, Further Maths, Exam Prep, Homework Support

Deployment Pipeline

GitHub Actions handles the full build and deploy on every push to main, no manual steps:

• Pipeline: npm ci, Prisma generate, Next.js build, verify standalone output exists, bundle static assets
• SCP deploys the Next.js standalone build and Express server to the DigitalOcean VPS as separate steps
• PM2 manages both processes on the VPS with auto-restart on failure
• Nginx sits in front as the reverse proxy
• Took deployment from 20+ minutes of manual SSH and copy steps down to under 3 minutes end-to-end