LearnAI Roadmap

• 

  Main page

• 

  Main page with results

• 

  User page/dashboard

• 

  User’s saved roadmap view

Inspiration

The inspiration behind LearnAI Roadmap came from my own experience struggling to learn new technologies efficiently. While many learning roadmaps exist, most of them only list topics without answering the most important question:

How long will this take?

Without clear time estimates, learners often feel lost, jump between resources, or abandon their goals entirely. I wanted to create a platform that not only shows what to learn, but also how long each step realistically takes, making learning more structured and motivating.

The Idea

LearnAI Roadmap generates personalized, time-based learning roadmaps using AI.

Users enter:

• their learning goal

• current skill level

• available daily time.

The system then produces a structured roadmap with clear steps, estimated durations, and practical guidance. Roadmaps can be saved to the user’s account for later use, and they are also shareable, allowing users to share learning paths with others easily.

How I Built the Project

The project is built as a modern web application with a clean separation of responsibilities.

Architecture Overview

Frontend Built with React and Next.js, featuring a split layout where users can browse roadmap steps on the left and view detailed explanations on the right.

Backend Handles AI requests, roadmap generation, and user-related operations securely.

AI Integration The application uses the Gemini 3 API to generate structured roadmap data. AI development prompts are not stored on the server to avoid unnecessary fetch delays and keep responses fast.

Security & API Keys The GEMINI_API_KEY is never exposed to the frontend. It is used only server-side, ensuring security while still providing fast AI-generated results.

Time Estimation Logic

Each roadmap includes time estimates per step. The total learning duration is calculated as:

\(Ttotal​=i=1∑n​Ti​\)

Where: \(Ti \) represents the estimated time for each roadmap step.

This gives learners a realistic overview of the commitment required to reach their goal.

User Experience

The platform is designed to feel simple, focused, and practical:

• Clickable roadmap steps

• Clear explanations and next actions

• Visual separation between navigation and content

• Ability to save and revisit roadmaps

• Easy sharing of roadmaps with others

The goal is to turn learning from a vague plan into a clear, actionable journey.

What I Learned

Through building LearnAI Roadmap, I learned how to:

• Design AI prompts that return structured, predictable data

• Secure AI integrations by keeping API keys server-side

• Optimize performance by avoiding unnecessary prompt fetching

• Create scalable UI patterns for step-based learning

• Translate abstract learning goals into measurable timelines

This project strengthened both my technical and product-thinking skills.

Challenges Faced

One of the biggest challenges was balancing AI flexibility with realistic time estimates. AI tends to be optimistic, so careful prompt design was required to keep timelines practical.

Another challenge was maintaining fast response times while keeping the system secure. Avoiding server-stored prompts while still protecting the API key required thoughtful architectural decisions.

Finally, designing a UI that works equally well for beginners and advanced learners required multiple iterations.

Conclusion

LearnAI Roadmap goes beyond traditional learning roadmaps by adding something essential: time awareness and actionable structure.

By combining AI, clean UX, and realistic planning, the platform helps users move from uncertainty to clarity—knowing exactly what to learn, how to start, and how long the journey will take.

Built With

• firebase
• next.js
• tailwindcss
• typescript