Back to path
LargePortfolio centerpiece ~30h· 6 milestones

Ship a production frontend app with auth, state, and tests

You’re handed "build the frontend" for a real product. You deliver something a team could actually maintain: authenticated, well-tested, observable, and shipped through CI.

React / Next.jsAuth flowsState managementForm validationPlaywright e2e testingCI/CDObservabilityPerformance budgetingChaos / failover testingBlameless postmortems
Build this freeBrowse all projectsNo credit card. Already a member?

What you'll build

A deployed application with an auth flow, client + server state, validated forms, end-to-end tests in CI, error tracking, and analytics, built like a team would maintain it.

See how we teach, before you sign up

You don't just get code dumped on you. Every starter file and every solution is explained line-by-line, in plain English. Here's one real file from this project:

middleware.tsts
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';

const isProtected = createRouteMatcher(['/tasks(.*)', '/settings(.*)']);

export default clerkMiddleware(async (auth, req) => {
  if (isProtected(req)) {
    await auth.protect(); // redirects to sign-in before any content renders
  }
});

export const config = {
  matcher: ['/((?!_next|.*\\..*).*)'],
};

Reading this file

  • createRouteMatcher(['/tasks(.*)'])Declares which URL patterns require a login, the single source of truth for what is protected.
  • await auth.protect()Redirects anonymous users to sign-in before any protected HTML is sent, preventing a content flash.
  • export const config = { matcher: ... }Tells Next.js which requests run this middleware, skipping static assets for performance.

Server-side gate: protected routes never render for anonymous users (Clerk example).

That's 1 of 9 explained code blocks in this single project.

The build, milestone by milestone

  1. 1

    Architect for change

    6 guided steps

    Conflating server cache with client UI state is the root of most messy React apps. Getting the data architecture right first is what makes everything after it maintainable.

  2. 2

    Auth + protected flows

    5 guided steps

    Auth is where security and UX collide, broken redirects, flashes of protected content, and unhandled expiry are common and costly. Doing it cleanly is table stakes for a real app.

  3. 3

    Forms that don’t lie

    5 guided steps

    Forms are where users actually do work, and bad ones lose data or accept invalid input. Schema validation plus honest error states is the difference between a toy and a tool.

  4. 4

    Test the critical paths

    5 guided steps

    The flows that earn money or lose data are exactly the ones a refactor breaks silently. End-to-end tests in CI are the safety net that lets a team ship fast without fear.

  5. 5

    Ship & observe

    5 guided steps

    An app you can not observe is an app you find out is broken from angry users. Error tracking and analytics close the loop between shipping and knowing it works.

  6. 6

    Break it on purpose, then write it up

    5 guided steps

    Every real frontend sits on services that will fail: the API times out, auth expires mid-session, the user goes offline. Engineers who have rehearsed those failures ship apps that degrade instead of white-screen, and a postmortem is how a team turns one incident into a permanent fix.

What's inside when you start

3 starter files, ready to clone
6 guided milestones
6 full reference solutions
9 code blocks explained line-by-line
6 "is it working?" checks
4 interview questions it prepares you for

You'll walk away with

A deployed app with auth, validated forms, and a passing CI pipeline
A Playwright e2e suite covering the core flows and a degraded-path resilience test, required in CI
A short architecture note explaining your state, folder, and auth decisions
A chaos/failover experiment log of the failures you injected and how the app degraded
A one-page blameless postmortem of your worst finding with a follow-up action

This is portfolio-grade. Build it free.

Sign up to unlock every milestone step-by-step, the code skeletons, full reference solutions, and checkable tasks, with your progress saved as you build.

Start building