SkillMate AI

• Inspiration

The inspiration for SkillMate AI came from recognising the overwhelming challenge many people face when trying to learn new skills or transition careers. With countless online resources, tutorials, and courses available, learners often feel lost and don't know where to start or how to create a structured learning path. We wanted to democratise personalised education by creating an AI-powered platform that acts like a personal career advisor, providing tailored roadmaps that adapt to individual goals, skill levels, and time constraints.

• What does it?

SkillMate AI is an intelligent career roadmap platform that generates personalised learning paths using advanced AI. Users input their background, goals, and preferences through an intuitive multi-step form, and the AI creates a comprehensive roadmap including:

• Personalised Weekly Learning Plans: Structured curriculum with specific topics, resources, and projects
• AI-Powered Insights: Real-time recommendations based on progress and market trends
• Project Portfolio Builder: Curated project ideas with varying difficulty levels to build a strong portfolio
• Community Integration: Connections to relevant learning communities and professional networks
• Progress Analytics: Visual dashboards tracking learning progress, streaks, and skill development
• Market Intelligence: Current job market data, salary projections, and industry trends
• Exportable Learning Cards: Shareable certificates of learning commitment

• How did we build it?

We built SkillMate AI using modern web technologies and AI integration:

• Frontend: React with TypeScript, Tailwind CSS for styling, Framer Motion for animations, and Lucide React for icons
• AI Integration: OpenRouter API with Llama 3.3 8B model for intelligent roadmap generation
• Data Visualisation: Recharts for analytics dashboards and progress tracking
• State Management: React hooks and local storage for progress persistence
• Deployment: Netlify for seamless hosting and deployment
• Development: Vite for fast development and building

The AI engine analyses user profiles, including skill level, career goals, time availability, and learning preferences, to generate highly personalised content. We implemented a sophisticated prompt engineering system that considers current market trends, industry demands, and individual learning styles.

• Challenges we ran into

• AI Model Integration: Initially faced API endpoint issues with the Llama model, requiring quick adaptation and fallback strategies
• Dynamic Content Generation: Ensuring AI-generated roadmaps felt personalised rather than generic required extensive prompt engineering
• Real-time Progress Tracking: Implementing a system that adapts recommendations based on user progress while maintaining data persistence
• Performance Optimisation: Balancing rich animations and interactive features while maintaining fast load times
• Responsive Design: Creating a seamless experience across all device sizes with complex data visualisations

• Accomplishments that we're proud of

• Intelligent Personalisation: Successfully created an AI system that generates truly personalised learning experiences
• Comprehensive Feature Set: Built a full-featured platform with analytics, community integration, and progress tracking
• Beautiful UI/UX: Designed an intuitive, production-ready interface that makes complex information accessible
• Real Market Data: Integrated current job market insights and salary projections for practical career guidance
• Scalable Architecture: Built with clean, modular code that can easily accommodate new features and AI models

• What we learned

• AI Prompt Engineering: Mastered the art of crafting prompts that generate consistent, high-quality personalised content
• User Experience Design: Learned how to present complex information in digestible, actionable formats
• Real-time Data Integration: Gained experience in combining AI-generated content with real-world market data
• Progressive Web App Principles: Implemented features like offline progress tracking and responsive design
• Community-Driven Learning: Understood the importance of connecting learners with relevant communities and peers.

• What's next for SkillMate AI

• Advanced AI Features: Integration with more sophisticated models for even betterpersonalisationn
• Mentor Matching: AI-powered system to connect learners with industry mentors
• Skill Verification: Blockchain-based certification system for completed learning milestones
• Mobile App: Native mobile application for on-the-go learning and progress tracking
• Enterprise Solutions: Corporate training modules for team skill development
• Learning Analytics: Advanced insights for educators and organizations
• Gamification: Achievement systems, leaderboards, and learning challenges
• Voice Integration: AI voice assistant for hands-free learning guidance

Built With

• css-frontend-framework:-react-18-styling:-tailwind-css-animation:-framer-motion-icons:-lucide-react-charts:-recharts-ai/ml:-openrouter-api
• css3
• eslint
• framer
• html
• html5
• javascript
• meta-llama-3.3-8b-instruct-build-tool:-vite-deployment:-netlify-development-tools:-eslint
• netlify
• openrouter
• react
• reacthooks
• recharts
• tailwind
• typescript
• typescript-compiler-apis:-openrouter-for-ai
• vite
• youtube-api-for-educational-content-state-management:-react-hooks