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

A developer built an interactive 25-week GenAI engineering roadmap tracker to overcome decision paralysis from scattered learning resources. The tracker maps every resource—books, courses, and docs—to specific weeks and tasks, using React, TypeScript, and framer-motion. It replaces traditional tools like Notion with a structured, multi-modal progress system.

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