{"slug": "i-built-an-interactive-tracker-for-my-25-week-genai-engineering-roadmap-instead", "title": "I built an interactive tracker for my 25-week GenAI engineering roadmap (instead of using Notion)", "summary": "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.", "body_md": "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.\n\nThe 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.\"\n\nSo before writing a line of Python, I did two things:\n\nThis post is about both, with the engineering bits that turned out to be interesting.\n\n🔗 It's live in read-only guest mode if you want to poke at it:\n\n[baqar.dev/roadmap]\n\nI 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.\n\nThe 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.\n\nSo the roadmap, roughly:\n\nTen portfolio projects along the way, all healthcare/insurance themed since that's my domain.\n\nThe 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*.\n\nThe data model is plain typed structures. Each week has a list of curated resources:\n\n```\ntype ResourceKind = 'video' | 'docs' | 'article' | 'course' | 'repo' | 'tool' | 'book';\n\ninterface WeekResource {\n  title: string;\n  source: string;\n  url: string;\n  kind: ResourceKind;\n}\n\n// A small helper so book entries stay consistent and point at the\n// official code repo (I read the text from my own copy).\nconst agentsBook = (chapters: string): WeekResource => ({\n  title: `30 Agents · ${chapters}`,\n  source: 'Imran Ahmad · Packt',\n  url: 'https://github.com/PacktPublishing/30-Agents-Every-AI-Engineer-Must-Build',\n  kind: 'book',\n});\n\nconst WEEK_RESOURCES: Record<number, WeekResource[]> = {\n  7: [\n    { title: 'LangGraph Documentation', source: 'LangChain', url: '...', kind: 'docs' },\n    agentsBook('Ch 7 — Tool Manipulation & Orchestration'),\n    { title: 'Generative AI with LangChain — Ch 3: Workflows with LangGraph',\n      source: 'Ben Auffarth · Packt', url: '...', kind: 'book' },\n  ],\n  // ...weeks 1–25\n};\n```\n\nSo 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.\"\n\nI 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:\n\n``` js\nconst isBookTask = task.id.endsWith('_book');\nconst isCourseTask = task.id.endsWith('_course');\n\n// ...\n{isBookTask ? (\n  <span className=\"rt-book-badge\"><Library size={10} /> Book</span>\n) : isCourseTask ? (\n  <span className=\"rt-course-badge\"><PlayCircle size={10} /> Course</span>\n) : (\n  <span className=\"rt-task-num\">{task.task_num}</span>\n)}\n```\n\nA 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.\n\nThe 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:\n\n`framer-motion`\n\n— week switches via `AnimatePresence`\n\n, staggered section entry.Tech stack: **React + TypeScript + Vite**, `framer-motion`\n\n, `lucide-react`\n\nicons, a tiny Express/Prisma backend for auth + progress persistence. Light/dark theming via CSS custom properties and a `data-theme`\n\nattribute.\n\nHere'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.\n\nIf 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.", "url": "https://wpnews.pro/news/i-built-an-interactive-tracker-for-my-25-week-genai-engineering-roadmap-instead", "canonical_source": "https://dev.to/poseidonrage/i-built-an-interactive-tracker-for-my-25-week-genai-engineering-roadmap-instead-of-using-notion-1ji0", "published_at": "2026-06-13 14:58:26+00:00", "updated_at": "2026-06-13 15:14:31.376438+00:00", "lang": "en", "topics": ["generative-ai", "developer-tools", "artificial-intelligence"], "entities": ["React", "TypeScript", "Vite", "framer-motion", "LangGraph", "LangChain", "Packt", "IBM"], "alternates": {"html": "https://wpnews.pro/news/i-built-an-interactive-tracker-for-my-25-week-genai-engineering-roadmap-instead", "markdown": "https://wpnews.pro/news/i-built-an-interactive-tracker-for-my-25-week-genai-engineering-roadmap-instead.md", "text": "https://wpnews.pro/news/i-built-an-interactive-tracker-for-my-25-week-genai-engineering-roadmap-instead.txt", "jsonld": "https://wpnews.pro/news/i-built-an-interactive-tracker-for-my-25-week-genai-engineering-roadmap-instead.jsonld"}}