-
-
Gemini ai recommendation for Course
-
User Login
-
Admin Cart
-
Payment Flow Demo
-
Admin Panel To Access Courses
-
a course is added to cart
-
course Mart
-
Thumbnail
Inspiration
The inspiration for LearnSphere came from observing how confusing it can be for learners to choose the right course online. Many platforms offer hundreds of options, but users still struggle to decide what actually fits their goals. I wanted to explore how a simple AI-powered assistant could help guide users during the course selection process while keeping the platform itself easy to understand.
What it does
LearnSphere is a prototype course-selling platform where users can browse sample courses, add them to a cart, and receive AI-based course recommendations. The courses and payments are simulated for demonstration purposes, but the overall flow reflects how a real course marketplace would work.
How we built it
The platform was built using React and TypeScript with a component-based structure. The frontend handles course browsing, cart functionality, and user interaction. Google Gemini was integrated to analyze user input and recommend relevant courses based on available course data. The goal was to keep the system lightweight while still showing meaningful AI integration.
Challenges we ran into
One of the main challenges was making the AI recommendations feel relevant without having access to real user data or learning history. Since the platform uses demo courses, the prompts had to be carefully designed so the AI responses stayed useful and consistent.
Another challenge was deciding how much functionality to simulate. Features like payments, authentication, and course access needed to look realistic, but implementing them fully would have been outside the scope of the hackathon. Balancing realism with simplicity took some trial and error.
Managing application state across different views such as cart, profile, and course details was also challenging, especially while keeping the app responsive and easy to navigate.
Additionally, integrating an external AI API introduced concerns around error handling and response timing, which required extra attention to prevent breaking the user experience.
Finally, polishing the UI while working under time constraints was difficult. Small design details often take more time than expected, especially when aiming for a clean and professional look.
Accomplishments that we're proud of
We are proud of building a complete end-to-end flow for a course-selling platform within a hackathon timeline. The AI recommendation feature works smoothly with the UI and adds real value to the browsing experience, even though the platform is only a prototype.
What we learned
This project helped us understand how AI APIs like Google Gemini can be integrated into frontend applications. We also learned how to design user flows that feel real without needing full backend systems like payments or content delivery.
What's next for LearnSphere – Course Selling Platform (Prototype)
In the future, LearnSphere could be expanded with real course content, secure payment integration, and user progress tracking. The AI advisor could also be improved with personalization based on user behavior and learning history.
Log in or sign up for Devpost to join the conversation.