Roadmate

Roadmate – Personalized AI Learning Companion

What inspired it

The core idea for Roadmate sprang from a simple yet profound realization: knowledge is everywhere, but the true path to mastery often feels obscured. We've all experienced that initial overwhelm when starting a new skill, like programming or data science. Most educational platforms offer content, but rarely is it truly adapted to who we are as individual learners.

We observed that two people with different goals and learning styles are often forced down the exact same, static roadmap. This became painfully clear witnessing friends and family abandon their learning journeys due to a lack of clear, personalized guidance and the isolation of learning alone. We were also inspired by static roadmapping sites like roadmap.sh, and wondered: What if these maps could come alive?

Our "Aha!" moment was realizing the immense potential of generative AI to transform these rigid learning paths into dynamic, living itineraries. Roadmate was born from the vision of a learning companion as personal as a coach, but as powerful as AI, adapting to a user's cognitive profile, ambitions (e.g., job, project), pace, and unique strengths and weaknesses. We wanted to solve the critical problem for learners, especially in Africa, who are often scattered across disparate resources, lack real-world application, accountability, and mentorship. Our goal: "No longer navigating the educational fog alone, but with a custom-made compass."

How we built it

We focused on demonstrating a core "epoch" or proof-of-concept that clearly illustrates Roadmate's personalized learning flow within the hackathon's tight timeframe.

User Onboarding & Track Selection: We built a basic login screen where users can select a learning "track," such as "Backend Developer."
Project-Based Learning Integration: Users then choose from pre-seeded, real-world projects (e.g., "NGO Water Tracker App").
AI-Powered Personalized Roadmap Generation: This is where the magic happens. We leveraged the Google Gemini API to take a base roadmap template (JSON) and dynamically filter steps relevant to the chosen project, adapting the roadmap based on a quick learner profile (experience, time available, learning style) from a self-assessment quiz. The AI reorders modules and suggests "skip/review" topics, displaying this as an interactive UI.
AI-Curated & Generated Resources: When a user clicks a specific roadmap item, the Gemini API fetches and summarizes the best 3 external resources (links, tutorials, videos). Crucially, if good resources aren't available or are too advanced, Gemini generates a concise, beginner-friendly explanation ("explain this step like I'm new").
Front-end & Backend: We used Next.js with React and Tailwind CSS for a fast-to-build, responsive user interface. For the backend, we utilized Firebase (Auth + Firestore) for quick user and project data storage, and integrated Google Cloud Functions for handling AI calls.

We prioritized demonstrating this single, end-to-end AI workflow cleanly, mocking non-critical parts like the full project marketplace or real-time pairing logic to ensure a focused and impactful demo.

What we did differently

Roadmate differentiates itself by fundamentally rethinking how learning journeys are structured and supported:

Truly Personalized, Adaptive Roadmaps: Unlike static platforms, our AI dynamically tailors the learning path to each individual's goals, current skills, preferred learning style, and even the specific project they're working on. This isn't just about showing content; it's about curating your optimal learning sequence.
Deep Project-Based Learning from Day One: Learners aren't just consuming content; they're immediately applying knowledge by working on real or realistic projects. This "learn by building" approach, with a "client simulation" aspect, ensures practical skills, problem-solving abilities, and value delivery are prioritized from the outset.
Revolutionary Client-Technical Exchange: Our unique "Project Marketplace" envisions third parties (NGOs, startups, even other learners) posting projects. These "clients" define requirements, and learners practice scoping and delivering, fostering a direct, real-world customer-developer interaction often missing in traditional education.
Integrated Collaborative & Social Learning (Vision): While mocked for the MVP, our design prioritizes peer and mentor connections. We believe in "classroom neighbors" over "gurus," fostering an environment where learners can pair up, simulate teamwork, and get support, combating the isolation common in online learning. This transforms learning into a more social and accountable experience.

What went wrong

Like any hackathon, we encountered our share of challenges that pushed us to iterate quickly:

Prompt Engineering for Roadmap Structure: A significant challenge was finding the optimal prompt engineering strategy for the Gemini API to consistently generate a perfectly structured roadmap akin to what you'd find on roadmap.sh. While we achieved a functional, personalized roadmap, getting the AI to output the exact granularity, categorization, and logical flow of a professional, human-curated roadmap was a continuous refinement process that we couldn't fully perfect within the hackathon's scope.
Dynamic UI Complexity: Displaying and updating the AI-generated roadmap and resources in a dynamic and intuitive user interface quickly within the short timeframe required strategic component design and efficient state management.
API Rate Limits & Latency: As we scaled our AI calls during testing, we had to be mindful of potential API rate limits and optimize our calls to ensure a smooth user experience without noticeable delays.
Scope Management: The sheer ambition of Roadmate meant constant vigilance against scope creep. We had to be disciplined in deciding what features to mock or defer to future phases, ensuring our core demo remained achievable and impactful.

What we learned

This hackathon was an incredible learning experience, particularly in leveraging cutting-edge AI:

Mastering Google AI Studio & Gemini API: We gained deep hands-on experience with Google AI Studio for prompt experimentation and directly integrating the Gemini API into a full-stack application. We learned about its capabilities for content generation, summarization, and conditional responses. We also gained valuable insights into the nuances of prompt design, especially when aiming for structured outputs.
The Art of AI-Powered Personalization: We learned how to translate user profiles and project requirements into effective AI prompts that generate genuinely personalized and adaptive content, moving beyond static data.
Rapid Prototyping with Modern Stack: We reinforced our skills in rapid web development using Next.js and Firebase, proving that complex, AI-driven applications can be prototyped quickly and effectively.
Strategic Feature Scoping: The hackathon environment honed our ability to identify core value propositions and ruthlessly prioritize features for an "epoch" demo, while still holding a clear vision for the product's future.

What next

Roadmate has immense potential beyond this hackathon. Our immediate next steps include:

Implementing Mocked Features: Fully integrate real-time peer pairing, a more robust mentor matching system, and the complete project marketplace where external "clients" can post projects.
Advanced AI Personalization: Deepen user profiling with more nuanced assessments of learning styles and cognitive strengths, leading to even more precise roadmap adjustments and resource recommendations.
Expand AI-Generated Content: Integrate Google's media AI (like Veo, if available) to generate short, playful, and culturally relevant visual or video explainers for abstract concepts.
Gamification & Incentives: Introduce badges, progress tracking, and integrate pathways for internships, job interviews, or certification exams based on project completion.
Localization & Scalability: Explore multi-language support and culturally relevant content for various African contexts, and begin planning for expansion beyond technical skills to other professions (e.g., health tech, agriculture tech).

Our vision is for Roadmate to become the go-to platform for applied, personalized, and work-ready learning across Africa and beyond.