I built a free AI learning roadmap generator in 3 weeks

Shabbir — Sat, 30 May 2026 19:31:40 +0000

The Problem That Drove Me Crazy

Every time I wanted to learn something new — Python, React, Machine Learning —
the same thing happened.

I'd open YouTube. Search "learn Python." Get 47 results. Pick one. Watch 20 minutes.
Get confused. Open another tab. Find a different tutorial. That one uses a different
approach. Now I have 8 tabs open, 3 half-finished courses, and I've learned nothing.

Sound familiar?

This is tutorial hell. And it's not your fault — it's a discovery problem.
There's too much content and no clear path through it.

I spent more time searching for how to learn than actually learning.

So I decided to fix it.

Building the Solution

I wanted something simple: type a skill, get a clear structured path.

Not a generic list of YouTube channels. Not a $200 course. A real roadmap —
phases, topics in the right order, and direct links to the best free videos for each topic.

After 3 weeks of building I launched Path AI.

Here's what it does:

1. Type any skill

Python, React, Machine Learning, UI/UX Design, Cybersecurity, Flutter — anything.

2. Get a structured roadmap

AI generates 4-6 phases in the correct learning order. Each phase has a clear title,
duration estimate, and 4-5 specific topics.

3. Every topic links to YouTube

Click any topic and it opens a YouTube search for that exact topic with the latest
videos filtered. No outdated tutorials from 2015.

4. See career paths

After the roadmap, you see which careers that skill opens up — with difficulty rating,
math intensity, and realistic salary ranges. Click any career to get a dedicated
roadmap for that specific goal.

5. Track your progress

Check off topics as you complete them. Progress saves automatically and syncs
across devices if you sign in with Google.

How It Works Technically

Frontend: React + Vite + Tailwind CSS

AI: Google Gemini API — generates structured JSON roadmaps from a carefully
crafted prompt. The prompt forces specific phase counts, topic counts, and
career paths relevant to the exact skill.

Backend: Vercel serverless functions — the API key never touches the browser.
All Gemini calls go through a server function.

Database: Supabase (PostgreSQL) — stores roadmaps, progress, and generation
counts per user. Row Level Security ensures users only see their own data.

Auth: Supabase Google OAuth — one click sign in, no passwords.

Hosting: Vercel — auto deploys on every GitHub push.

The architecture is simple but production-ready. The API key is secure,
data is in the cloud, and auth is handled properly.

The Biggest Technical Challenge

Getting Gemini to return consistent, parseable JSON was harder than expected.

The model would sometimes:

Return markdown fences around the JSON
Truncate the response mid-object
Add commentary before or after the JSON

The fix was a combination of:

Very strict prompt instructions ("Return ONLY valid JSON, no markdown, no backticks")
Aggressive JSON extraction on the server (find first { and last })
Increasing maxOutputTokens to prevent truncation

After those fixes the parse success rate went from ~70% to ~99%.

What I Learned

Ship early. I spent too long polishing features nobody asked for.
The core value is the roadmap generation — everything else is secondary.

localStorage is not a database. I started with localStorage for everything.
It works until users want cross-device sync. Migrating to Supabase mid-project
was painful but worth it.

Prompt engineering is real engineering. Getting consistent structured output
from an LLM requires the same rigor as any other API contract. Test extensively,
handle edge cases, have fallbacks.

What's Next

Stripe integration for a Pro plan (unlimited generations)
More pre-built templates for popular skills
Better mobile experience
User requested: export roadmap as PDF

Try It

Path AI is completely free — no signup needed to generate your first roadmap.

🔗 https://roadmap-ai-sooty.vercel.app

I'd genuinely love feedback from the dev community. What skills should I add?
What's broken? What would make this actually useful for you?

Drop a comment or reach out — building in public and happy to discuss
any of the technical decisions.

DEV Community: Shabbir