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

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:

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]

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:

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

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
};

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>
)}

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 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:

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.

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.

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.