Personal Career Roadmap & Study Plan Generator
Turning target career goals and skill gaps into structured, trackable, week-by-week learning paths powered by Gemini.
🚀 Overview & Problem Statement
Transitioning into a new tech role or bridging specific skill gaps often leads to tutorial hell or information overload. The hardest part isn't finding resources—it's knowing what order to learn things in and how to measure weekly progress.
I built SkillPath AI to solve this exact problem. By taking a target role, existing skills, missing skills, and a preferred duration, the app generates a tailored, week-by-week study plan delivered as interactive milestone cards.
✨ Key Features & Architecture
Structured Roadmap Generation: Uses Gemini to analyze skill gaps and produce a clean, sequential learning path with actionable tasks per week.
Interactive Progress Tracking: Every week features checkboxes for specific topics. Checking off tasks updates a dynamic progress bar in real time.
State Persistence: Progress is saved locally in the browser (localStorage), so learning momentum isn't lost on page refreshes.
One-Click Role Presets: Quick-start templates for roles like Frontend Developer, AI Engineer, and Data Scientist to test and generate paths instantly.
Voice Mentor Integration: Converts weekly summaries into audio playback using Gemini’s Text-to-Speech output, giving users an audio briefing of their learning goals.
Export & Print Ready: Clean CSS styling allowing users to print or save their custom roadmap as a clean PDF document.
🛠️ Tech Stack
Frontend: HTML5, Tailwind CSS, JavaScript (Vanilla ES6+)
AI API: Google Gemini API (gemini-2.5-flash for JSON roadmap generation & audio response handling)
Storage: Browser localStorage
🧠What I Built, Iterated On & Learned
Enforcing JSON Schema: To reliably build UI cards and interactive checklists, I instructed Gemini to output strictly structured JSON. This avoided parsing failures and allowed direct rendering of week titles, key topics, and action items.
Binary Audio Processing: Integrating the Voice Mentor meant handling raw audio streams from the API. I wrote a client-side conversion function to wrap raw binary PCM audio into standard WAV headers for seamless browser playback.
User Experience Iterations: Initially, the app just displayed plain text plans. Iterating to add stateful checkboxes, progress metrics, and one-click role presets turned it from a simple prompt generator into an actual functional study tool.
đź”® Future Enhancements
Exporting study schedules directly to Google Calendar or Notion.
AI-generated weekly quizzes to test comprehension before marking a week complete.
Top comments (0)