Next.js Fullstack Training
Chapter 10
Weekly Milestones Tracker
Self-assess at the end of each week. Bring unchecked items to your 1-on-1 with your mentor.
Weeks 1–2 | React 19 & App Router
- I can create a new Next.js 16 project from scratch using pnpm create next-app
- I understand the difference between Server and Client Components
- I can use all 4 new React 19 hooks: use(), useActionState(), useFormStatus(), useOptimistic()
- I can write a loading.tsx skeleton and explain what Suspense does
- I can create dynamic routes and await params correctly
- I understand Tailwind v4 CSS-first config and can create custom tokens
- My portfolio is deployed to Vercel and publicly accessible
- I have submitted my portfolio for mentor review and addressed the feedback received
Weeks 3–4 | Full-Stack
- I can define a Drizzle schema and run migrations with drizzle-kit
- I can perform CRUD operations using Drizzle ORM v2 and Neon
- I can write a Server Action with Zod validation that mutates the database
- I can wire a form to a Server Action using useActionState()
- I understand revalidatePath and revalidateTag and can use them correctly
- My blog is deployed with comments persisting in Neon Postgres
- I have submitted my blog for mentor review and addressed the feedback received
Weeks 5–6 | Capstone Setup + Auth
- I have forked the capstone repo and set it up locally
- I have read all 5 key documents in the capstone repo
- Authentication is working — users can sign up, log in, log out
- Protected routes redirect unauthenticated users to /sign-in
- New user sign-ups create a record in Neon via Clerk webhook
- I have implemented forbidden.tsx and unauthorized.tsx
Weeks 7–8 | Application Core
- Users can create, read, update, and delete projects
- Users can create, read, update, and delete lists within a project
- Users can create, read, update, and delete tasks within a list
- I have used useOptimistic() for at least one mutation
- PPR is enabled on the board page
Weeks 9–10 | Polish
- Drag-and-drop works between Kanban columns using dnd-kit
- Drag-and-drop uses useOptimistic() for instant UI feedback
- I have used the after() API for at least one deferred operation
Weeks 11–12 | Testing + Ship
- At least 10 Vitest unit/integration tests covering core features
- At least 2 Playwright E2E tests for critical user flows
- All tests pass locally: pnpm check && pnpm tsc --noEmit && pnpm test --run
- pnpm build completes with zero errors before final submission
- Application is deployed to Vercel production with custom domain or live URL
- instrumentation.ts initialises OpenTelemetry
- I presented my feature in the final project showcase