🚀 AI Roadmap Visualizer — turning engineering plans into pixel-perfect art

This post is my submission for DEV Education Track: Build Apps with Google AI Studio.

🧩 What I Built

I built AI Roadmap Visualizer — a chat-based web app that transforms any roadmap text (like a README.md or project plan) into a visual learning path.

It parses milestones, generates cards for each phase, and even creates pixel-style art for every milestone using the Imagen API in Google AI Studio.

I wanted a tool that could visualize my own engineering roadmap — from Java monolith to cloud-ready platform — in a creative yet structured way.

🪄 Core prompt used in Google AI Studio:

Create a web assistant that visualizes engineering roadmaps as a sequence of milestones with AI-generated art. Each milestone should have title, dates, focus, and deliverables. Keep the aesthetic neon-violet and pixel-tech inspired.

🎨 Demo

Here’s how it works in action:

1️⃣ I paste my roadmap text roadmap-2025-2027/README.md.
2️⃣ The AI parses milestones, dates, and goals.
3️⃣ It generates visuals for each stage — Architecture, DevOps, AWS, etc.
4️⃣ I can click on a card to open weekly details.

💡 I also tested how the app adapts to different roadmap styles — from Frontend to Data Science and Creative AI paths:

🔗 Demo: AI Roadmap Visualizer — Google AI Studio Applet

✨ My Experience
Building this project was a short but valuable dive into prompt-driven app design.
Google AI Studio makes it surprisingly easy to go from idea → prompt → working prototype.