Room To Grow

An AI study partner that solves both learning and remembering. Chat with an AI tutor to understand any topic, then instantly generate a practice quiz or flashcards from your conversation.

Comment

💡 About The Project

"Room To Grow" is an AI-powered study partner built for the Education track. It's designed to be more than just a chatbot; it's a complete learning loop where students can chat with an AI tutor to understand any topic, and then instantly generate custom practice quizzes and flashcards based on that exact conversation.

Registered users can save their chat histories and study sets, creating a personalized library of their own learning.

What Inspired Me

My inspiration came from a project I'm already passionate about: a mobile app for my university capstone class that helps manage tutor check-ins. When I saw the Education track, my mind immediately went to that idea.

At first, I considered just building a web version of that app. However, I realized this hackathon was the perfect opportunity to pivot and explore something new. Instead of just managing tutors, why not be the tutor? I decided to build an AI-powered tutor that could not only answer questions 24/7 but also actively help students study by generating custom practice tests and flashcards.

🛠️ How It's Built

I built "Room To Grow" as a modern, full-stack MERN-style application with a decoupled architecture.

  • Frontend: React, TypeScript, Tailwind CSS, and Framer Motion for a clean, animated, and responsive UI.
  • Backend: Node.js and Express.js to create a robust REST API.
  • Authentication: GitHub OAuth (using Passport.js) for secure and simple user sign-in.
  • Database: MongoDB Atlas for storing user data, saved chat histories, and generated study sets.
  • AI Services:
    • Gemini & OpenRouter: Used as the "brain" for the AI tutor and to generate the quizzes and flashcards from chat content.
    • ElevenLabs: Integrated for the text-to-speech (TTS) feature, allowing the AI tutor to speak its responses.
  • Deployment:
    • Vercel: For hosting the frontend.
    • Render: For hosting the backend server.

🧠 What I Learned

This project was a massive learning experience from start to finish.

  • Working with LLMs: I learned how to integrate the Gemini API for generative tasks. I then switched to OpenRouter, which taught me how to use a single API interface to access multiple models (like Claude, Mistral, and more) with one key.
  • Full-Stack Deployment: This was my first time deploying a full-stack, decoupled application from scratch. I learned the entire pipeline, using Vercel for the client and Render for the server, and configuring them to communicate.
  • Authentication Flow: I implemented a full OAuth 2.0 flow with Passport.js and GitHub, including managing user sessions and protecting API routes.
  • Modern Database Management: I got hands-on experience with MongoDB Atlas, from setting up clusters and security rules to creating Mongoose schemas for my user and chat data.
  • Chaining AI Services: I learned how to "chain" different AI services together—taking a text response from OpenRouter and feeding it directly into the ElevenLabs API to generate speech.

Challenges I Faced

No project is complete without a few hurdles, and this one was no different.

  1. AI Hallucinations (and Deprecated Code): When I first started, I was trying to move fast and relied heavily on AI code generation. But the AI kept giving me code using a deprecated Gemini library and functions that didn't exist. I learned that I had to slow down and read the official documentation. Once I did that, everything started making sense.
  2. Deployment Hell (CORS & Environment Variables): The biggest challenge was deployment. Getting the Vercel frontend to talk to the Render backend was a struggle. I spent hours debugging 404 errors and net::ERR_CONNECTION_REFUSED. This forced me to learn about production environment variables, vercel.json rewrites, and how to properly configure CORS on my Express server.
  3. Prompt Engineering: It's one thing to make a chatbot. It's another to make it consistently return a valid, parseable JSON for a practice test. I had to design complex "meta-prompts" to force the AI to return data in the exact structure I needed to render the quizzes.
  4. Managing Auth State: Handling the OAuth redirects and syncing the user's login state between the frontend and backend, especially across different domains (Vercel and Render), was a complex task.

Built With

Share this project:

Updates