ReclarifAI

ReclarifAI is a match game for learning that changes the match wording each time you play, eliminating the crutch of using pattern-recognition to beat the game.

Comment

Inspiration

We were inspired by Quizlet Match, and saw a critical flaw which has never been addressed before. As students, we understand the need for an effective way to study while having fun, and while games like Quizlet Match are supposed to fill that role, they're ineffective. Existing applications such as Jungle AI try to address a similar issue by creating whole sets of flashcards, but fail to create something actually fun and engaging, focusing on the creation of flashcards instead of how effective they are for learning.

What it does

Utilizes AI to keep match games effective and fun for learning. Every round, the AI will adapt the text for each match to make it different each time, creating a focus on understanding the material instead of relying on pattern-recognition of text structures.

How we built it

Frontend: Created a react framework, with each important component in a separate file. We incorporated all these into an app.jsx file.

Backend: Used flask to handle web requests and the api calls to OpenAI model which converted definitions for the flash cards. Made it able to get data from the frontend through a local json file stored in the browser, send that data into the api, and then send data back to the frontend through another json file.

API: Imported gpt-4o-mini through the OpenAI library and sent prompts using our own api key (we made sure not to publicly show it).

GitHub Pages: After finishing the previous steps we hosted our website on GitHub Pages. We did this through using a deploy.yml file which runs the action deployment. Then through calling npx to update the gh-pages branch it updates our website automatically on the host.

Challenges we ran into

Hosting our product on GitHub pages since it kept erroring due to our sounds file and not wanting to publish it onto the browser. Integrating the backend with the frontend and being able to change the definitions accordingly. Random errors with api key or reading the sent json file. Changing the CSS code to make the app look as nice as possible. Everybody had different opinions on what was “good” or “bad”. Trying to import tailwind.css into our react project and then deciding an hour later that it wasn’t really necessary.

Accomplishments that we're proud of

Creating a sleek UI and an effective product. Being able to create a working frontend and backend. Successfully hosting our website on GitHub Pages. Making a cool logo.

What we learned

We gained valuable full-stack development experience, creating a fully functional application start-to-finish within 24 hours, becoming familiar with utilizing AI and strengthening our backend knowledge. We efficiently collaborated together and improved valuable skills in leadership and teamwork.

What's next for ReclarifAI

We plan to expand ReclarifAI with mobile applications for iOS and Android, making studying accessible anywhere. We'll also implement a remote database to replace our current local server, enabling users to save and access their decks across devices. Additionally, we plan to develop a sharing platform where users can publish their custom decks for others to practice.

Built With

Share this project:

Updates