Full-Stack Engineering — From HTML to Production AI

Build the same support product as eight runnable software projects. You begin with HTML and CSS, then add TypeScript, React, an API, PostgreSQL, Next.js, authentication, realtime updates, multi-tenancy, RAG, evals, AI tools, and human approval.

This README is the map. The learning playbooks contain the explanations, books, courses, videos, repositories, build milestones, and proof checks.

Learning playbooks

Playbook	What it teaches	Projects
Web frontend engineering	Browser fundamentals, TypeScript, React, Next.js, accessibility, testing, performance	01, 02, 04
Backend and data engineering	HTTP, API design, PostgreSQL, Fastify, FastAPI, Spring Boot, auth, multi-tenancy	03, 04, 06
Systems and DevOps	WebSockets, Redis, queues, idempotency, Docker, CI, observability, SRE	05, 06, 08
Applied AI engineering	LLM APIs, structured output, RAG, evals, agents, MCP, model internals	07, 08

Each playbook follows Read → Watch → Build → Prove. The repository explains the mechanism first; external documentation is supporting material rather than the curriculum.

Pick your starting point

You do not need to read everything first. Open one useful source, then build the linked project.

If you want to learn	Open first	Build next
HTML, CSS, browser JavaScript	Web foundations	01 — responsive launch page
JavaScript, TypeScript and React	Typed React interfaces	02 — React data dashboard
Node.js, Python or Java backend	Server implementation routes	03 — PostgreSQL issue API
SQL and PostgreSQL	SQL and PostgreSQL	03 — PostgreSQL issue API
Next.js, sessions and authorization	Full-stack frontend · authorization	04 — authenticated issue tracker
Realtime and system design	Realtime foundations	05 — live board
SaaS backend and DevOps	Reliable services · multi-tenancy	06 — multi-tenant team SaaS
AI engineering, RAG and evals	Applied AI engineering	07 — support copilot
AI agents, tools and MCP	Tools, MCP and durable workflows	08 — production operator
Vibe coding with verification	Codex docs · Claude Code workflows · Google code review guide	Use the AI playbook on any project

Build the product

Each folder has runnable code, a product brief, acceptance checks, exercises, and tests. Projects 04–08 include a browser product surface rather than a domain-only code sample. Click a project title to see the architecture, implemented scope, local-only boundaries, and exact commands.

#	Project	What you build	Main engineering work
01	Responsive launch page	A fast, accessible product page from a visual brief	Semantic HTML, CSS layout, browser JavaScript, accessibility, performance
02	React data dashboard	A typed dashboard that survives an unreliable API	React, TypeScript, forms, runtime validation, loading and error states, tests
03	PostgreSQL issue API	A documented REST API with real data constraints	HTTP, Fastify, SQL, migrations, transactions, indexes, integration tests
04	Authenticated issue tracker	A Next.js App Router product with accounts, issues, and upload preparation	Server/client boundaries, HTTP-only sessions, owner-scoped authorization, accessible mutation states
05	Realtime live board	A browser board with a dependency-free WebSocket server	Ordering, resume, idempotency, presence leases, stale-write handling, load probe
06	Multi-tenant team SaaS	A browser admin surface and API serving isolated organizations	Tenant-scoped storage, RBAC, retry queues, webhooks, dead letters, audit history
07	Support copilot	A browser RAG lab grounded in versioned product documentation	Streaming NDJSON, retrieval evidence, citations, evals, injection tests, refusal behavior
08	Production AI operator	A persisted approval console for bounded agent writes	Exact proposal digests, tool permissions, idempotent writes, crash recovery, MCP boundary

Start at project 01 if the browser is new to you. Start at 03 if you already ship React apps. Start at 07 only if APIs, SQL, authentication, and background jobs are familiar.

Run it

git clone https://github.com/yerdaulet-damir/fullstack-engineering.git
cd fullstack-engineering
corepack enable
pnpm install
pnpm doctor
cp .progress.example.json .progress.json
pnpm next

Requirements: Node.js 22+, pnpm 10+, Git, and Docker for database projects. Projects 07 and 08 include deterministic fake model providers, so an AI API key is optional.

Your first useful move:

cd projects/01-launch-page
npm start

Open http://localhost:3001, use the page, then read brief.md. Run npm test before and after your change.

Repositories worth opening

These are references, not content copied into this repository.

Repository	Use it for
The Odin Project curriculum	Detailed HTML, CSS, JavaScript, Node.js, database, and React foundations with projects between lessons
Full Stack Open	Modern React, APIs, testing, containers, GraphQL, React Native, and CI/CD material
RealWorld	Compare different frontend and backend implementations against one product and API contract
Build Your Own X	Rebuild databases, shells, Git, containers, networking tools, and other systems from first principles
System Design Primer	Review scalability, caching, queues, databases, and system-design tradeoffs
LLMs from Scratch	Understand transformer and LLM internals through executable Python and PyTorch code
Generative AI for Beginners	Build basic generative-AI applications before adding production evaluation and safety
AI Agents for Beginners	Compare agent patterns, tool use, planning, memory, and multi-agent workflows
Anthropic courses	Work through API, prompting, evaluation, and tool-use examples from a model provider

Search demand checked

The wording and stack were checked against worldwide Google Trends comparisons for 9 September 2025–9 September 2026 and current ecosystem reports. Google Trends values are relative within each comparison, not absolute keyword volume.

• Role comparison: AI engineering had the strongest relative interest among those exact phrases. The README still starts with full-stack because the projects teach the web, data, and operations work that production AI depends on.
• Stack comparison: Python was much broader than the framework terms. TypeScript remains the default implementation; Python and Spring Boot are explicit backend routes instead of hidden keywords.
• AI coding comparison: product names carried more relative interest than the generic phrases. The repository stays tool-neutral and links to current tool workflows.
• AI product comparison: MCP is an ambiguous acronym, so it is used only where the Model Context Protocol is actually taught.
• GitHub Octoverse 2025 reported TypeScript as GitHub's most-used language and strong Python growth. Stack Overflow's 2025 survey showed substantial Docker growth; its AI section also explains why these projects emphasize tests and review around generated code.

This is a dated editorial check, not a promise that search demand will stay fixed. Query links are included so anyone can rerun the comparison.

How a project works

projects/03-issue-api/
├── README.md          # run commands, sources, and next project
├── brief.md           # user, problem, constraints
├── acceptance.md      # observable definition of done
├── exercises.md       # break/fix and extension work
├── starter/           # runnable application
└── tests/             # black-box checks

Use this loop:

1. Run the starter and use it before changing code.
2. Read the brief and acceptance checks.
3. Build one vertical slice.
4. Run the checks and reproduce failure cases yourself.
5. Deploy it and save the URL or screenshot in .progress.json.
6. Write what broke, what you measured, and what you would change.

ROADMAP.md contains every deliverable. pnpm next finds the next unfinished project. RESOURCES.md is the complete learning index.

Using coding agents

Use Codex, Claude Code, Copilot, Cursor, or another coding agent. Give it the brief and acceptance checks, ask it to inspect the existing code, and review the resulting diff. The repository checks behavior, not prompts.

Never let an agent approve its own production write, hide a migration, or replace runtime evidence with a confident explanation. The working loop is in playbook/ai-assisted-development.md.

Contributing

Fix a dead link, improve a starter, add a missing test, or propose a production skill that the eight projects do not cover. Read CONTRIBUTING.md before opening a pull request.

MIT licensed.