Learnsphere

Inspiration

As students, we struggled to find affordable, personalized learning resources to achieve goals like mastering Python. Inspired by HackVerse 2025’s call for innovation, we built LearnSphere to make education accessible, using free tools to deliver tailored learning paths for all.

What it does

LearnSphere creates AI-driven learning paths from free resources (e.g., YouTube, freeCodeCamp) based on users’ goals, skills, and preferences. It offers gamified badges, a D3.js/Recharts Skill Tree, AI-generated quizzes, progress tracking, and a community forum for collaboration.

How we built it

We used React 18 and Vite for a fast, responsive UI, styled with TailwindCSS and animated via Framer Motion. React Router v6 manages navigation, Redux Toolkit handles state, and React Hook Form simplifies inputs. D3.js and Recharts power the Skill Tree and progress visuals. The backend runs on Node.js, Express, and MongoDB Atlas (free tier), with scikit-learn for recommendations and Hugging Face’s DistilBERT for quizzes. Free APIs (YouTube, Google Books) provide resources. We tested with Jest and React Testing Library and deployed on Vercel (free).

Challenges we ran into

Balancing AI and UI as a duo was tough. Curating free resources and optimizing YouTube/Google Books API quotas (free tier) took time. Ensuring accessibility and testing across devices with Jest stretched our skills, but we learned to prioritize efficiently.

Accomplishments that we're proud of

We’re thrilled to deliver an inclusive app on a student budget. The D3.js/Recharts Skill Tree and gamified badges make learning fun, while the forum fosters community. Building with free tools feels like a win for accessibility.

What we learned

We mastered integrating scikit-learn and DistilBERT locally, optimizing free APIs, and ensuring responsive design with React 18. Collaboration taught us to split tasks (frontend vs. backend) and debug under constraints, boosting our development skills.

Built With

React 18: Enhanced rendering

Vite: Fast build tool

Redux Toolkit: Simplified state management

TailwindCSS: Utility-first CSS

React Router v6: Declarative routing

D3.js/Recharts: Data visualization

React Hook Form: Efficient forms

Framer Motion: Smooth animations

Jest/React Testing Library: Testing

Node.js/Express: Backend

MongoDB Atlas: Free-tier database

scikit-learn/DistilBERT: AI recommendations/quizzes

YouTube/Google Books APIs: Free-tier resources

Vercel: Free hosting

Built by Sameer Kumar and Siddharth Maurya, students coding for impact.

Built With

• react
• redux
• router
• tailwindcss
• vite