SkillRoute-AI

Landing Page
Dashboard

Bridging the Opportunity Gap: The Story of SkillRoute AI

💡 Inspiration The digital divide isn't just about internet access anymore; it's about access to guidance.

While living in and observing the tech ecosystem, I noticed a glaring disparity. Students in Tier-1 cities have easy access to hackathons, meetups, and internships. However, students in Tier-2 and Tier-3 cities often possess equal talent but lack the roadmap to apply it. They have the internet, but they don't know what to learn or where to find opportunities that exist right in their backyard—like local NGOs, small businesses, or freelance gigs.

I wanted to build something that didn't just dump content on students but actually held their hand through the process. SkillRoute AI was born out of the desire to democratize career mentorship, making high-quality, personalized guidance accessible to anyone, regardless of their pin code.

⚙️ How I Built It I approached this project with a "User-First" mindset, leveraging the MERN stack for a robust architecture and Google’s Gemini API for intelligence.

The AI Brain: The core challenge was transforming generic AI responses into structured, actionable data. I utilized the Google Gemini Pro model to power the "Roadmap Builder." I spent significant time refining system prompts to ensure the AI generated week-by-week plans that were realistic and adaptive to a student's pace.

The Engine: I built the backend using Node.js and Express, creating a RESTful API to handle user authentication (JWT) and data storage in MongoDB. This ensured that a user's progress and generated roadmaps were saved and retrievable across sessions.

The Experience: Coming from a design background, I wanted the UI to feel premium yet accessible. I used React and TailwindCSS for a responsive layout. To make the interaction feel "alive," I integrated Framer Motion for smooth transitions, particularly when the AI is "thinking" or generating a roadmap.

🏔️ Challenges I Faced Building SkillRoute AI wasn't without its hurdles:

Taming the AI: One of the biggest technical challenges was Structured Output. GenAI tends to be conversational, but my frontend needed strict JSON formats to render the "Roadmaps" visually. I had to implement robust error handling and parsing logic to ensure the application didn't crash if the AI returned a malformed response.

State Management: Managing the state for a complex application—where user data, AI chat history, and roadmap progress all interact—was tricky. I utilized React Context API to create a global store, preventing "prop drilling" and keeping the codebase clean.

Local Opportunity Logic: Designing the logic to filter opportunities based on "hyper-local" criteria required careful database schema design in MongoDB to ensure efficient querying.

🧠 What I Learned This project was a massive leap in my journey from designer to full-stack developer.

Prompt Engineering is Engineering: I learned that writing good prompts is just as critical as writing good code. The quality of the user experience depends entirely on how well I instruct the model.

Full-Stack Integration: I gained a deeper understanding of how to securely connect a React frontend to a Node backend, specifically handling environment variables and API keys for production.

The Power of Empathy in Code: Most importantly, I learned that the best features come from understanding the user's pain points. Features like the Offline Mode fallback were added because I realized that internet connectivity in Tier-2/3 cities can be spotty, and support should be reliable.

SkillRoute AI is more than just a project; it’s a proof of concept that technology can level the playing field for ambitious students everywhere.