LearnLoop AI

Learn smarter with AI — understand, practice, plan, and improve in one learning companion.

Comment

Inspiration

Students often learn technical topics from multiple places — one for explanations, another for practice questions, and another for planning what to study next. I wanted to create a simple learning companion that brings these steps together.

This inspired me to build LearnLoop AI around a simple learning cycle:

Understand → Practice → Review → Improve

What it does

LearnLoop AI is an AI-powered learning companion for students.

Users can enter a topic and:

  • Get a beginner-friendly explanation
  • Generate a 5-question practice quiz
  • Create a 7-day study plan
  • Track quiz scores and recent learning activity

The goal is to make learning more structured and actionable.

How we built it

LearnLoop AI was built using React and Vite for the frontend and Node.js with Express.js for the backend.

We integrated Google Gemini using the @google/genai package to generate explanations, quizzes, and study plans.

Quiz history and progress are stored using localStorage, keeping the prototype lightweight.

The Gemini API key is kept on the backend using environment variables. The frontend is deployed on Vercel and the backend on Render.

Challenges we ran into

One challenge was handling temporary AI service failures. During development, the Gemini API became temporarily unavailable, so we added error handling and demo fallback content to keep the application usable.

Another challenge was connecting the frontend to the deployed backend. We changed the application from a local API URL to an environment-based API URL so it could work correctly after deployment.

Accomplishments that we're proud of

We are proud of turning the idea into a working full-stack prototype with multiple connected learning features.

The project successfully combines AI explanations, quizzes, study planning, and progress tracking in one interface.

We also deployed both the frontend and backend so judges can access and test the project through a live demo.

What we learned

Through this project, we learned how to:

  • Integrate an AI API into a full-stack application
  • Build and connect a React frontend with an Express backend
  • Design structured prompts for AI-generated responses
  • Handle API errors and fallback scenarios
  • Use environment variables for API credentials
  • Store and calculate user progress with localStorage
  • Deploy a full-stack project using Vercel and Render

What's next for LearnLoop AI

The next step is to make LearnLoop AI more personalized.

Future improvements could include:

  • Personalized learning recommendations
  • More detailed progress analytics
  • Difficulty levels for quizzes
  • Adaptive quizzes based on previous performance
  • User accounts and cloud-based progress synchronization
  • Support for more subjects and learning formats.

Built With

Share this project:

Updates

Submission history