DEV Community

Cover image for I built an interactive tracker for my 25-week GenAI engineering roadmap (instead of using Notion)
Baqar Hussain Naqvi
Baqar Hussain Naqvi

Posted on

I built an interactive tracker for my 25-week GenAI engineering roadmap (instead of using Notion)

#ai #webdev #react #career

I've spent 8+ years as an enterprise developer — .NET, Oracle, PeopleSoft, the integration trenches. This year I committed to a real transition into GenAI engineering. Not "I watched some YouTube," but a structured, finish-able plan.

The first thing I learned is that the hard part isn't finding learning material. It's the opposite: decision paralysis. Forty browser bookmarks, three half-started Udemy courses, two cohort bootcamps in my cart at \$1,900–\$2,000 each, and five PDFs I "bought to read later."

So before writing a line of Python, I did two things:

  1. Designed my own 25-week curriculum.
  2. Built an interactive tracker for it — into my portfolio — so I couldn't quietly abandon it.

This post is about both, with the engineering bits that turned out to be interesting.

🔗 It's live in read-only guest mode if you want to poke at it: baqar.dev/roadmap

Why build a roadmap instead of buying a cohort?

I actually compared the paid options side by side — the IBM Generative AI Engineering with LLMs spec, two QuestPond courses, ByteByteAI's 6-week cohort, SwirlAI's \$1,900 Maven bootcamp.

The pattern: the good ones (SwirlAI especially) had a syllabus that looked a lot like the one I'd sketched — hybrid retrieval, agentic RAG, LLMOps. What you pay for in a cohort isn't the content, it's accountability, a peer group, and a Demo Day. Valuable, but not knowledge I lacked.

So the roadmap, roughly:

  • Weeks 1–4: Python core, async + FastAPI, Claude/OpenAI APIs with streaming, prompt engineering + structured outputs (Pydantic)
  • Weeks 5–8: LangChain/LCEL, document pipelines, LangGraph state machines, human-in-the-loop
  • Weeks 9–13: RAG done properly — embeddings, Chroma → Qdrant, hybrid search (BM25 + dense), re-ranking, parent-child retrieval, RAGAS evaluation + guardrails
  • Weeks 14–17: agents — ReAct from scratch, CrewAI multi-agent, Semantic Kernel (one C# week as a bridge from my background), supervisor patterns
  • Weeks 18–21: MCP servers, n8n automation, voice (Whisper → LLM → TTS)
  • Weeks 22–24: Docker/ECS, a full SaaS build, LLMOps with Langfuse
  • Week 25 (elective): transformer internals + fine-tuning (LoRA, DPO) — added after I noticed every paid course had this and my plan didn't

Ten portfolio projects along the way, all healthcare/insurance themed since that's my domain.

The part that actually fixed my workflow

The tracker isn't just a checklist. The feature that killed my decision paralysis was mapping every learning resource to the exact week it's relevant — and I own five books plus two video courses, so I mapped them chapter-by-chapter and module-by-module.

The data model is plain typed structures. Each week has a list of curated resources:

type ResourceKind = 'video' | 'docs' | 'article' | 'course' | 'repo' | 'tool' | 'book';

interface WeekResource {
  title: string;
  source: string;
  url: string;
  kind: ResourceKind;
}

// A small helper so book entries stay consistent and point at the
// official code repo (I read the text from my own copy).
const agentsBook = (chapters: string): WeekResource => ({
  title: `30 Agents · ${chapters}`,
  source: 'Imran Ahmad · Packt',
  url: 'https://github.com/PacktPublishing/30-Agents-Every-AI-Engineer-Must-Build',
  kind: 'book',
});

const WEEK_RESOURCES: Record<number, WeekResource[]> = {
  7: [
    { title: 'LangGraph Documentation', source: 'LangChain', url: '...', kind: 'docs' },
    agentsBook('Ch 7 — Tool Manipulation & Orchestration'),
    { title: 'Generative AI with LangChain — Ch 3: Workflows with LangGraph',
      source: 'Ben Auffarth · Packt', url: '...', kind: 'book' },
  ],
  // ...weeks 1–25
};
Enter fullscreen mode Exit fullscreen mode

So when I open Week 7 (LangGraph), the tracker tells me exactly which docs to read, which book chapter lands here, and which course module to watch. No "where do I even start."

I took it one step further: the reading/watching itself is a checkable task in each week's daily plan, not just a link. I inject those into the curriculum's "Learn" day and tag them with an id suffix, then style them differently at render time so they stand out from build tasks:

const isBookTask = task.id.endsWith('_book');
const isCourseTask = task.id.endsWith('_course');

// ...
{isBookTask ? (
  <span className="rt-book-badge"><Library size={10} /> Book</span>
) : isCourseTask ? (
  <span className="rt-course-badge"><PlayCircle size={10} /> Course</span>
) : (
  <span className="rt-task-num">{task.task_num}</span>
)}
Enter fullscreen mode Exit fullscreen mode

A pink "Book" pill, a cyan "Course" pill, gradient cards — so a Monday reads as a stack: read this chapter → watch this module → build these tasks. Multi-modal, all counting toward progress.

The redesign

The first version was a scattered single-column page — a timeline ribbon, week pills, a floating dock that kept fighting me. Classic "too many navigation patterns." I rebuilt it as a proper app shell:

  • A persistent sidebar (the pattern Coursera/Linear use): overall progress ring, then months as an accordion with per-week rows.
  • A week hero with breadcrumb, goal, progress bar, and search.
  • Resources promoted to the first content section, in a responsive tile grid.
  • Everything animated with framer-motion — week switches via AnimatePresence, staggered section entry.

Tech stack: React + TypeScript + Vite, framer-motion, lucide-react icons, a tiny Express/Prisma backend for auth + progress persistence. Light/dark theming via CSS custom properties and a data-theme attribute.

The meta-lesson

Here's the part I find funny: I built and iterated this entire tracker using Claude Code — an agentic coding tool. So my journey of learning to build AI systems started by building with one. Watching how an agent gathers context, plans, and edits a real codebase taught me more about agent design than any tutorial intro.

Takeaways

  • Plan before you consume. Comparing seven paid courses against a syllabus I'd written myself was more clarifying than any single course.
  • Map resources to moments. "What do I read this week" beats "here are 40 great resources."
  • Build the thing that keeps you accountable. A tracker I made is one I'll actually open.

If you're a .NET/enterprise dev eyeing the same jump, the roadmap is yours to fork. And I'd genuinely value critique from people already shipping in this space — particularly: is skipping classical ML entirely (straight to LLM application engineering) a mistake for employability? Tell me in the comments.

→ baqar.dev/roadmap

Top comments (0)