EduQuest

System Architecture Diagram

Inspiration

Accessibility in education is about understanding, not just reading. Every student learns differently, and at a different pace, but most study tools often treat comprehension like a one-size-fits-all solution. EduQuest reimagines studying through the lens of accessibility and personalization: upload any reading and our product transforms it into an interactive quiz calibrated to your comprehension level to make learning not only inclusive, but intuitive.

What it does

EduQuest is a first-person fighting game where the user’s knowledge is their weapon. We transform static study materials into a dynamic and accessible battle for mastery. Users can upload PDFs of their study notes and our system instantly parses them to generate personalized multiple-choice quiz battles based on the user’s comprehension level of the subject. This allows them to adjust the complexity of the questions, making sure no one is left behind. Answering correctly deals damage to the opponent, while answering incorrectly or too slowly results in your character taking damage. The goal is to defeat the enemy before they defeat you.

How we built it

This project was built using a cohesive flow where student notes became an engaging battle experience. The Google Gemini API provides powerful and textual understanding, allowing it to intelligently parse study material and extract relevant questions based on the selected comprehension level. Our database to store information about our users and their educational feats are on Supabase to fully leverage PostgreSQL with instant, real-time capabilities. It allowed for seamless integration with Auth0 and let us build a secure platform with saved quizzes and user login information efficiently.

We built our backend with Express.js, adopting a clean, modular architecture to ensure scalability and maintainability. By separating concerns into distinct layers, like model structures for data, controllers for request handling, services for business logic, and routes for API endpoints, we created a robust codebase that is easy for a team to understand and extend. This was a crucial factor in streamlining the AI integration and managing complex game states without creating technical debt.

Finally, the frontend was created using a combination of React, Tailwind CSS, and Vite. React’s component-based architecture is perfect for handling our complex game state while Tailwind CSS enables us to ship a polished, responsive user interface with incredible speed. Using Vite as our build tool sped up the development process significantly due to its hot reloads. Overall, it was important to us to have a modern, component-based frontend stack to improve performance and manage states efficiently.

Challenges we ran into

Our team divided the work based on our past experience, so some of us worked on backend, and some worked on frontend. In the beginning, the frontend and backend were completely separate, so we were all coding in the way we were comfortable with, sticking to our own coding principles. However, when it came time to reconcile the frontend and backend for integration, it wasn’t as seamless as we hoped. It took a little more time than we thought it would to understand each other’s code and there was a lot of trial and error involved. This could have been avoided by more planning done before the coding started, but we were all so excited about our idea that we dived right into it. Thankfully, everyone was very patient, understanding, and willing to explain their logic and go back and forth about it, so it worked out in the end.

In the backend, we struggled to maintain the separation of concerns. We were really motivated to have a clean backend so an outsider could easily understand the code, but everything kept getting tangled until we ended up with multiple files having over 200 lines of code. The teammates working on the backend drew diagrams, did research, and debated on the best course of action for over an hour before they finally settled on a file structure for the backend. We ended up introducing services, clients, and models to keep everything as organized as possible. Implementing the structure took even longer, but it was definitely worth it because the backend is much easier to navigate through and explain to someone else.

Accomplishments that we're proud of

This was the first hackathon that two of our teammates have ever attended as a hacker, which is a great accomplishment. Hackathons are often intimidating, especially for new hackers because everyone else seems so much more knowledgeable and their projects more impressive. Taking the step to attend your first hackathon takes courage and they had so much fun!

Another accomplishment is how much everyone learned, and how this knowledge will help us in school and when we start to work. In fact, two of our teammates are currently taking a university course on web programming, and they feel like they’ve gone through the entire semester’s curriculum this weekend! Learning something in a classroom is very different from applying that knowledge on your own project, and the application of those fundamental classroom learnings often consolidates it in your mind.

We also think we worked really well together and learned a lot from each other’s different experiences and expertise!

What we learned

Everyone in our team was able to do at least one technical task they hadn’t done before to push them out of their comfort zone and expand the list of technologies they can work with. For example, one teammate worked with Auth0 for the first time, and ended up taking full responsibility for the user authentication, even though she hadn’t done it before. Another teammate made her first AI API calls. This was a great environment to pick up something new because our team was very open to exchanging knowledge and taking the time to explain a complex concept by breaking it down.

What's next for EduQuest

Currently, our application helps users review for a subject that they already learned about. However, we don’t want to help people play catch up - we want to make sure they never fall behind in the first place. With this in mind, we would love to implement different modes of the game, starting with Quiz Mode and Teach Me Mode. The Quiz Mode would be the idea we currently have, and the Teach Me Mode would help users go through and understand the material first. Teach Me Mode would also leverage Google Gemini to create AI summaries and find a teaching style that suits the users based on their comprehension level. Over time, this can expand to users being able to save specific preferences to their account to find their perfect teaching style. For example, one user might learn best through sports metaphors, while another is able to make sense of material when it’s in the form of a rhyming rap. Implementing this feature would make our product even more accessible and proactive.

Further, we would love to improve the game portion of the application itself. For example, adding different characters for users to fight, the ability for either character to get power-ups depending on their performance in the game, and badges to represent their progress in learning and keep them motivated to continue, even when the content seems difficult and confusing.

So far, we’ve transformed passive studying into an active battle by building a platform that’s not only effective, but also engaging and accessible. However, this is just the foundation. With so many more ideas on how we can level up this platform, our journey to revolutionize learning has only just begun.

Because learning is a battle. We’re here to make sure you win it.