AdaptiveLearning
Inspiration
The inspiration for AdaptiveLearning stemmed from a desire to revolutionize traditional education by making it truly personalized and dynamic.
Conventional learning paths often fail to cater to:
- Individual needs
- Learning styles
- Career aspirations
This mismatch can lead to disengagement and inefficiency.
Our vision:
Build a platform powered by Artificial Intelligence that crafts bespoke learning roadmaps, adapting in real-time to a user's progress, preferences, and goals. We aim to empower learners to take full control of their educational journey and acquire relevant skills efficiently and effectively.
What It Does
AdaptiveLearning is an AI-driven platform that delivers highly personalized learning experiences. Key features include:
** AI-Powered Roadmap Generation**
Users input their career goals, current skills, time commitment, and learning style. The platform (powered by Google Gemini API) generates a personalized, week-by-week learning roadmap.Dynamic Progress Tracking
Users can mark tasks as complete. The system tracks:- Overall progress
- Current streak
- Longest learning streak
** Course & Material Library**
A rich, searchable library of courses and materials categorized by:- Topic
- File type
- Difficulty level
User Authentication & Profiles
Secure login with email/password or OAuth (Google/GitHub) to access personalized roadmaps and progress across sessions.Admin Management
Admins can manage the content library (add/edit/delete courses and materials) via a secure admin interface.
How We Built It
Tech Stack
Frontend:
React(component-based architecture)Tailwind CSSfor utility-first stylingFramer Motionfor smooth transitionsLucide Reactfor consistent icons
Backend & Database:
Supabase(PostgreSQL, authentication, real-time)- Row Level Security (RLS) for secure data access
AI Integration:
- Google Gemini API powers roadmap generation
- Chunk-based generation strategy handles large outputs
State Management:
- React Context API:
AuthContextfor authenticationUserContextfor user-specific data like roadmaps and progress
Routing:
React Router DOMfor SPA navigation
User Feedback:
React Hot Toastfor real-time alerts and messages
Challenges We Ran Into
AI Response Handling:
- Gemini's JSON responses can be large and inconsistent
- Built a custom JSON validation and fallback system
Supabase Integration Complexity:
- Seamless auth + database sync with React lifecycle and contexts
Dynamic UI for AI Output:
- Complex state management for nested, user-interactive roadmap data
Weekly Generation Limit:
- Post-deployment schema changes and UI logic to support rate-limited roadmap generations
Performance Optimization:
- Memoization strategies (
useMemo,useCallback) - Lazy loading and efficient component updates
- Memoization strategies (
Accomplishments We're Proud Of
Seamless AI Integration
Gemini API successfully delivers customized, structured learning journeys.Clean & Intuitive UX
A modern UI with animations that keeps users engaged.Scalable Backend Infrastructure
Supabase provides robust authentication and real-time features.Flexible Admin Panel
Empowering content managers to keep the platform updated and relevant.
What We Learned
AI API Best Practices:
- Prompt engineering
- Chunked API responses
- Retry and fallback logic
Advanced React Patterns:
- Custom contexts
- Memoization and optimization
- Modular component design
Supabase Expertise:
- Schema design
- RLS policy enforcement
- Integrating real-time data fetching
Importance of Modularity:
- Clean separation between logic, UI, and services improved maintainability
Deployment & Post-Deployment Planning:
- Adding new features (like roadmap limits) post-launch highlighted the need for early architectural foresight
What's Next
Smarter AI Personalization
Dynamically adapt roadmaps to performance and suggest remedial contentInteractive Modules
Integrate quizzes, coding challenges, and simulationsCommunity Features
Enable forums, study groups, and mentorshipMobile App
Build a cross-platform mobile experience (React Native or similar)External Platform Integrations
Sync with platforms like Coursera, Udemy for centralized learningAdvanced User Analytics
Provide deep insights into study habits, strengths, and weaknessesMonetization
Introduce premium content, certifications, and subscriptions
Additional Context
AdaptiveLearning aims to democratize personalized education by harnessing the power of cutting-edge AI and modern web technologies. Our goal is to empower learners around the world with a learning platform that adapts to them, not the other way around.
Built With
- css
- framer
- gemini
- gemini-api
- javascript
- motion
- netlify
- node.js
- npm
- react
- supbase
- tailwind
- typescript
- vite
Log in or sign up for Devpost to join the conversation.