DevPath AI

Inspiration

Most people with a great app idea never build it — not because they can't code, but because they don't know where to start. We've all been there: a spark of inspiration, then a wall of uncertainty. What language? What tools? What do I even build first? We built DevPath AI to eliminate that wall.

What it does

DevPath AI takes your app idea in plain English and instantly generates a visual roadmap showing you exactly where to start — what to build, what to research, what tools to use, and what programming languages fit your project best. It turns a vague idea into a clear, actionable starting point.

How we built it

We built DevPath AI using a React frontend with a clean, intuitive UI for idea input. On the backend, we used the Anthropic Claude API to interpret user descriptions and generate structured roadmap data, which we then visualize as an interactive diagram using a graph rendering library.

Challenges we ran into

Getting the AI to produce consistently structured, actionable output — not just generic advice — was the hardest part. We also had to figure out how to make the diagram feel like a real roadmap, not just a wall of text in a box.

Accomplishments that we're proud of

Turning a natural language description into a clean, visual, developer-ready roadmap in seconds. It genuinely works — and watching someone go from "I have no idea where to start" to "okay, I know exactly what to do" is incredibly satisfying.

What we learned

Prompt engineering is an art. Small changes in how we asked the model to structure its output had a massive impact on the quality and usefulness of the roadmap. We also learned how powerful visual output is compared to plain text responses.

What's next for DevPath AI

Saving and sharing roadmaps Letting users refine the roadmap through follow-up questions Adding resource links (tutorials, docs, tools) to each roadmap node Team mode for collaborative planning

Built With

• react
• supabase
• tailwindcss
• typescript
• vite