Modern Full Stack Development with Next.js and TypeScript

About this course

Ship a deployed, authenticated, database backed web application with typed end to end data flow and a passing smoke test suite.

This is an 8-week specialist track - our most in-depth program, taking you to a professional, hireable standard. Learn online at your own pace. Practice the concepts with the listed assessments.

What's included

• Self-paced lessons and practice (40 estimated hours).
• Hands-on coding quests you solve inside the EchoLens browser compiler - nothing to install.
• Gems, stages and a leaderboard that keep you moving instead of grade anxiety.
• A verified certificate with a scannable QR code, ready to share on LinkedIn, when you satisfy the course requirements.
• Completely free - no fee, just create an account and start.

What you will learn

Course outline - level by level

12 leveles, each with hands-on quests you clear in the portal.

• Level 1. Components, JSX and Typed Props - Analogy: Snapping standardised Lego blocks together to build a structure, where every stud spacing is fixed so blocks always fit. Covered: Component hierarchies, one way data flow, JSX compilation to createElement calls, prop typing with TypeScript interfaces, discriminated unions for variant props, and children typing.
• Level 2. State with useState and useReducer - Analogy: A cash register that records every drawer opening, sale and refund as a separate entry rather than overwriting yesterday's total. Covered: Local state, the rules of immutable updates, when useReducer beats useState, pure reducer functions, typed action unions, and lifting state to the nearest common parent.
• Level 3. Effects, Cleanup and Custom Hooks - Analogy: A motion sensor light that switches on when someone walks in and, just as importantly, switches itself off when they leave. Covered: useEffect dependency arrays, cleanup functions, avoiding effects for derived state, race conditions with AbortController, and extracting reusable stateful logic into custom hooks.
• Level 4. Server Components and Client Components - Analogy: A restaurant kitchen that plates the dish out of sight and sends only the finished plate to the table, keeping the knives in the back. Covered: React Server Components running on the server with no client bundle cost, the 'use client' boundary, what can and cannot cross it, serialisation limits, and where data fetching belongs.
• Level 5. Server Actions and Form Mutations - Analogy: Dropping a signed deposit slip into a bank drop box that posts straight to your ledger, with no separate teller queue in between. Covered: Server Actions from server and client components, progressive enhancement, `useFormStatus` and `useActionState`, revalidatePath and revalidateTag, and why every action still needs its own authorisation check.
• Level 6. Streaming, Suspense and Loading States - Analogy: Bringing out bread and olives the moment guests sit down while the slow roast keeps cooking, rather than serving nothing for an hour. Covered: Incremental HTML streaming, Suspense boundaries, the loading.tsx and error.tsx conventions, granular boundary placement, and the difference between a slow route and a slow component.
• Level 7. Schema Modelling and Migrations - Analogy: Building codes signed off before the first slab is poured, so nobody discovers the load bearing wall is in the wrong place after handover. Covered: The Prisma schema language, one to many and many to many relations, unique and composite constraints, cascade rules, enum types, and the difference between `migrate dev` and `migrate deploy`.
• Level 8. Queries, Pagination and Transactions - Analogy: A vault transfer where the money leaves one box and enters the other in the same movement, or neither box is touched at all. Covered: Prisma Client reads and writes, `select` versus `include`, cursor pagination against offset pagination, the N plus 1 problem, and interactive transactions with `prisma.$transaction`.
• Level 9. Route Handlers, Zod Validation and Tests - Analogy: A goods inward desk that measures every crate against a checklist before it is allowed onto the warehouse floor. Covered: Route handlers in `route.ts`, parsing request bodies with Zod, inferring TypeScript types from schemas, consistent error envelopes, correct status codes, and writing the first integration tests with Vitest.
• Level 10. Auth.js Credentials, OAuth and Sessions - Analogy: A hotel keycard that opens only your floor and stops working at checkout time, whether or not you hand it back. Covered: Credential and OAuth providers, password hashing with bcrypt or argon2, JWT versus database sessions, session callbacks for role claims, and CSRF protection.
• Level 11. Middleware and Route Protection - Analogy: A station turnstile that checks the pass before the platform, not a guard who taps you on the shoulder once you are already on the train. Covered: Edge middleware and the matcher config, redirecting unauthenticated traffic, why middleware alone is not authorisation, and defence in depth with per action checks.
• Level 12. Testing, Build Configuration and Deployment - Analogy: Sea trials before the ship leaves harbour, then loading the containers and sailing to port under its own power. Covered: Environment variable scoping and the NEXT PUBLIC prefix, secret handling, standalone output, image and font optimisation, Playwright smoke tests in CI, and deploying to Vercel or a Docker host.

Who it's for

Modern Full Stack Development with Next.js and TypeScript suits learners at a intermediate to advanced level who want a practical, project-based route into Modern Full Stack Development with Next.js and TypeScript. You need only a browser and an internet connection - all coding runs inside the EchoLens compiler, so there is nothing to set up.

Certificate

Pass every required assessment at its stated threshold to earn your verified certificate. Optional practice and watching videos do not determine eligibility. Anyone can scan its QR code to verify it on our site. You can add it to your CV or share it to LinkedIn in one click.