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

> Source: <https://dev.to/poseidonrage/i-built-an-interactive-tracker-for-my-25-week-genai-engineering-roadmap-instead-of-using-notion-1ji0>
> Published: 2026-06-13 14:58:26+00:00

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.