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.
Top comments (2)
Demo link isn't working!
Hi @jess ,
could you please try with this one: ai.studio/apps/drive/1jmU01dB0f93y...