Basic → Intermediate → Advanced

Learn Full-Stack development with Next.js

Visual, step-by-step notes for building real web apps: the frontend in Next.js, a backend API with PostgreSQL, type safety with TypeScript, and state management with React Context and Redux.

Start learning View roadmap
What you'll build
Next.js UIReact + Bootstrap + Context/Redux
fetch · Server Actions
Next.js BackendRoute Handlers · Auth · Validation
SQL
PostgreSQLTables · Joins · Indexes

TypeScript runs through every layer

Choose a module

Each page has a sidebar table of contents, a progress tracker, diagrams, code you can copy, quizzes and a cheat sheet.

1. Frontend (Next.js)

App Router, components, routing, layouts, Bootstrap styling, Server vs Client Components, data fetching, caching and streaming.

JSXRoutingHooksSSR/SSG/ISRSuspense
Not started
Open notes

2. Backend (Next.js + PostgreSQL)

Route Handlers, Server Actions, connecting with pg, a CRUD API, Zod validation, JWT auth, proxy, transactions and security.

RESTpgPrismaAuthTransactions
Not started
Open notes

3. PostgreSQL

Tables, data types, constraints, CRUD, joins with Venn diagrams, GROUP BY, CTEs, indexes, ACID transactions, window functions and JSONB.

SQLJoinsIndexesEXPLAINJSONB
Not started
Open notes

4. TypeScript

Types, interfaces, unions, narrowing, generics, utility types, mapped and conditional types, tsconfig, and typing React and Next.js code.

TypesGenericsUtility typesinferTSX
Not started
Open notes

5. React — Context API & Redux

Prop drilling, Context with typed hooks, useReducer, Redux Toolkit slices, async thunks, RTK Query and Next.js store setup. Includes a live Redux demo.

ContextuseReducercreateSliceThunksRTK Query
Not started
Open notes

Suggested roadmap

Follow this order if you're starting from scratch. Already know some of it? Skip ahead.

Step 1 · TypeScript basicsTypes, interfaces, functions, unions. Enough to read Next.js code. (TS Level 1)
Step 2 · Next.js frontendComponents, routing, layouts, styling, then Server and Client Components. (Frontend Levels 1–2)
Step 3 · PostgreSQLTables, CRUD, filtering, joins, aggregates. (PostgreSQL Levels 1–2)
Step 4 · BackendConnect Next.js to Postgres, build a CRUD API, validation, Server Actions. (Backend Levels 1–2)
Step 5 · Shared stateContext API first, then Redux Toolkit for bigger apps.
Step 6 · Go advancedAuth, transactions, caching, streaming, indexes, generics, RTK Query. Then build and deploy a full project!

How to read these notes

The same visual language is used on every page.

BasicIntermediateAdvanced
AnalogyA real-world comparison to build intuition.
TipBest practices and shortcuts.
InfoExtra context and version notes.
WarningCommon gotchas.
DangerSecurity issues and data-loss risks.
Track your progress

Click "Mark done" on any section. Progress is saved in your browser and shown on the cards above. Use in the navbar to switch to dark mode.

The stack at a glance

LayerTechnologyIts jobNotes page
StylingHTML, CSS, Bootstrap 5Layout, components, responsive gridFrontend → Styling
UIReact + Next.js App RouterPages, components, routing, renderingFrontend
Client stateContext API / Redux ToolkitShare state across componentsContext & Redux
APIRoute Handlers, Server ActionsBusiness logic, auth, validationBackend
DatabasePostgreSQL (pg / Prisma)Store data permanently and safelyPostgreSQL
LanguageTypeScriptType safety across every layerTypeScript