Developer Roadmaps

Visual, interactive developer roadmaps — step-by-step guides for building modern AI & application systems, shared as clean, self-contained HTML artifacts. Each one is a single-file, interactive recreation in the spirit of the roadmap-style guides developers already love (à la roadmap.sh) — no build step, just open it in a browser.

Live gallery: https://fahdi.github.io/dev-roadmaps/

Roadmaps

Roadmap	Description
AI Application Architecture	Frontend → Agent Orchestration → Knowledge / Models / Tools → Data Layer → Observability & Evals → Deployment
How to Build a RAG	Load → Chunk → Embed & Tag → Index → Retrieve → Augment → Generate → Evaluate (and iterate)
RAG vs LoRA vs Full Fine-Tuning	Context, adapters, or every weight — pick by the gap: knowledge → RAG, behavior → train
Design Your Agent's Control Plane	CLAUDE.md → Rules → Skills → Agents → Hooks — context tells, skills teach, agents delegate, hooks enforce
6 Levels of Agentic AI	Basic → Router → Tool Calling → Multi-agent → Autonomous → Loop Engineering — levels 1–5 are capabilities, level 6 is the craft
Context Engineering	The window is a budget: write, select, compress, isolate — and the four failure modes of long context
How a Request Travels	DNS → TLS → CDN → Load Balancer → API Gateway → Service → Cache → Database — with the two cache shortcuts
How to Evaluate an LLM App	Golden dataset → four evaluators → offline baseline → CI/CD gate → guardrails → online evals — failures become test cases

Structure

index.html             gallery landing page (published via GitHub Pages)
artifacts/*.html        one self-contained HTML roadmap per file

Adding a new roadmap

1. Drop a new self-contained .html file into artifacts/.
2. Add a card for it to index.html and a row to the table above.
3. Commit and push — GitHub Pages redeploys automatically.

---

Built by Fahad Murtaza with Claude.