Rolemap

an AI-powered career platform that turns vague job goals into a clear, gamified, and actionable step-by-step learning roadmap.

Comment

Inspiration

We’ve all seen the struggle—or lived it ourselves. Meet Jon: an unemployed CS major who has been looking for a job for the last 67 days. After hundreds of applications, he is met with a wall of rejections. What's stopping him from landing that internship? A lack of a clear, actionable roadmap.

"I want to be a software engineer" is a great goal, but it's too vague. We built Rolemap to eliminate the guesswork and turn those vague ambitions into a clear, step-by-step game plan so users can focus on actually getting hired.

What it does

Rolemap is an AI-powered career planning platform that analyzes your current skills, compares them to real hiring expectations, and identifies exactly what you’re missing.

  • Intelligent Knowledge Graph: Our NLP engine extracts your current skills and context from your uploaded resume and GitHub commits, storing complex skill relationships inside a knowledge graph.
  • The Map: We match your target role and learning preferences with real-world job expectations to generate a visual, interactive map of skills and milestones. You can't learn Neural Networks without learning Python first, and our map respects those dependencies.
  • Actionable Task Generation: We don't rely on AI hallucinations. Our algorithm actively uses DuckDuckGo to fetch high-quality, real-world learning resources (articles, tutorials, coding exercises) tailored to your needs.
  • Spaced Repetition & Skill Decay: We implemented a health bar system that gradually decreases if topics aren’t revisited, gamifying the review process using spaced repetition to reinforce older concepts.
  • Gamification & Progress: As you complete daily tasks and capstone projects, you earn XP, build streaks, and unlock custom cosmetics. Completed skills are automatically added to your resume in an ATS-friendly format!

How we built it

  • Frontend: Built with Next.js 16 (App Router), React 19, and Tailwind CSS v4. We designed a completely bespoke pixel-art design system from scratch, featuring custom PixelButton and PixelCard components, and complex SVG layering for node depth.
  • Interactive Roadmap: Powered by React Flow (@xyflow/react), featuring auto-focusing, progressive unlocking, and customized sliding panels.
  • Backend & Data: FastAPI serves as our backend framework. We use PostgreSQL for standard data and Neo4j to store user data and map out complex skill relationships. AWS was used for industry-standard deployment.
  • AI Integration: We utilized the Gemini API for our intelligent task generation and NLP extraction.
  • Auth: Handled seamlessly via NextAuth v5, offering Google and GitHub OAuth with zero-round-trip JWT sessions.

Challenges we ran into

  • Frontend Clutter: We had to balance gamification with professionalism. Since our app generates personalized roadmaps, it needed to feel engaging while remaining credible. Gamified features initially introduced clutter. We solved this by creating a custom pixelated visual style with a clean, modern color scheme to keep the interface engaging but highly usable.
  • Backend Tracking: Estimating a user's true understanding of a skill over time was incredibly difficult. We tackled this by tracking interactions (task completion, performance, review frequency) and feeding that data into a modified SM-2 model to adjust skill strength dynamically.

What's next for Rolemap

We’re expanding Rolemap to make career growth even smarter and more engaging:

  1. Company Matching Tool: A feature where users can target specific companies where their unique skill sets will actually thrive.
  2. Competitive Learning System: Introducing challenges and shared goals that push you to improve alongside your peers.

Built With

Share this project:

Updates