What you'll build
A white-label multi-tenant frontend
One static build that serves every tenant domain — yours to keep (MIT).
A static-export MPA — one host-agnostic build that serves every tenant domain, no Node runtime
Runtime tenancy & theming with no flash — a render-blocking bootstrap sets CSS vars before first paint
Cookie auth with no BFF — an httpOnly cookie, no token ever in JavaScript, no NextAuth
The full login lifecycle: password → email-OTP 2FA → dashboard, remember-me, trust-device
A client route guard + permission-driven UI gated from /api/me
Real data screens: cursor pagination, CSRF-protected mutations, uploads & authorized downloads
Ship it: build to out/, serve behind nginx, test with Vitest + Playwright + axe
Curriculum
Eleven chapters, F00 free
Each chapter ends green — you build a slice of the real frontend against the live API.
Module F00 — Static export & the MPAFree · ~3 h
output:'export' and what it disables
One .html per route (a real MPA)
The App Router as a static page generator
Next.js 16 + Tailwind v4 wired for export
Module F01 — The shell: layout, nav, header, search~3–5 h
One shared layout.tsx
Single-open accordion nav
State that survives <Link> and <a>
Module F02 — Runtime tenancy & theming — no flash~3–5 h
A render-blocking <head> bootstrap
Tailwind v4 @theme + CSS variables
Reskin any tenant with zero rebuild
Module F03 — Same-origin /api, cookies, no token in JS~3–5 h
credentials:'include' + httpOnly cookie
RFC 9457 problem details
No NextAuth, no Node BFF
Module F04 — Auth flows: login → email-2FA → dashboard~3–5 h
The two-step 2FA challenge on a static client
Remember-me & trust-this-device
Logout
Module F05 — The client route guard (no middleware)~3 h
/api/me 401 → /login
The guard is UX, not the security boundary
Module F06 — Permission-driven UI from /api/me~3 h
Render nav, routes & buttons by permission
Permission-based, never role-name checks
Module F07 — Lists, cursor pagination, states~3–5 h
Consuming ?cursor / ?filter / ?sort
Loading / error / empty states
Module F08 — Mutations, forms, uploads, downloads~3–5 h
X-CSRF-TOKEN double-submit
Problem Details validation
Upload + a 403/404-aware download
Module F09 — Build, deploy & test~3 h
out/ behind nginx, cache headers, CSP
Vitest + Playwright + axe
Module F10 — Capstone: a feature slice end-to-end~3–5 h
Nav + guard + permission + cursor list + a mutation
Emitting its own .html
Stack
Modern full-stack, pinned
The tools today's product teams actually ship with.
Next.js 16static exportTailwind v4TypeScriptReactnginxVitestPlaywrightaxedocker-compose
What's included
11 chapters (F00 free) — shipping with the project’s Phase 6
The full MIT-licensed frontend codebase, tagged per stage
A hands-on build lab in every chapter, with a worked solution
The companion ARCHITECTURE.md decision log
A docker-compose stack to run the real .NET API behind your frontend
Lifetime access + every future chapter
FAQ
Questions, answered
Do I need to know .NET?
No. The backend is a given API contract — you run it with `docker compose up` and build against it, never reading or writing any C#.
Do I lose SEO / performance by skipping SSR?
It is an authenticated B2B dashboard behind a login — there is nothing to index, and a static bundle on a CDN is about as fast a first paint as you can ship. SSR/RSC solve problems this product does not have.
Is this just “Next.js without the good parts”?
It is Next.js with the parts this architecture can actually use, and a clear-eyed account of what each rejected default would have cost you. That contrast is the course.
Is the course finished?
It ships with the project’s Phase 6. Buy now while it is being written and you lock in today’s price and get every chapter as it lands, at no extra cost.
Can I use the code commercially?
Yes — the frontend code is MIT. The lessons are not redistributable; the code is.
Enroll in the Frontend Track
One-time — the full course plus future updates. Build a real SaaS, keep the code, and walk away with an AI-first workflow.
1,8000 TND
Enroll now