KeyQuest

• 

  Regular Logo

• 

  Icon Logo

Inspiration

As studies have shown, typing important subjects down compared to reading them helps people retain the information much more easily, and also increases their memory. We were inspired to create this application because we wanted a balanced tool that could be educational and useful while providing levels of entertainment in regard to mystery. Other studying techniques employed have a difficult time keeping students interested, which is key to learning. We decided to create a mystery-based game that would teach users whatever topic they select. This would allow them to stay focused on the topic they want to learn and also have some fun by having to solve a clue-based mystery about any topic they want.

What it does

KeyQuest is an innovative application designed to teach users specific topics selected by them. It uses AI to generate topic-related prompts with a mysterious twist on them. The user has to collect clues, which they do by solving the education-based clues. Once they solve the mystery, they can either continue with the same topic or look to pursue a different one. The user has to read the information and type over it, which improves their typing and memorization of the topic shown. User can track their current words per minute (WPM) to track their typing improvements while having fun! Overall, our project implements a combination of gamification and learning with a mysterious twist.

How we built it

For our landing page, we created a website from scratch using HTML, CSS (Tailwind CSS), JS as well as bootstrap. We then provide important information that users need before using the app and tell users what they are getting into. They are then directed to a login page through the landing page built using a NextJS Supabase stack. NextJS is used for the user interface with its server components, whilst Supabase is the database (backend) controlling OAuth and user creation. We built an authentication service that allows a user to sign up, with them receiving an email regarding their login. Once logged in, users can prompt via a textbox whatever topics they want to learn, and the AI will output clues and riddles related to the topic selected. This is performed through the implementation of the ChatGPT API as well as Authentication on the NextJS Supabase stack. We created a "KeyQuest" typing interface through manipulation of JS and use of CSS in order to create a text layer that was behind the input textbox, which was a challenge due to inherit web principles.

Challenges we ran into

KeyQuest underwent a few iterations where we had to fix a few changes each time. One particular challenge that we went through was our elements were shifting to the side, and we had to restart the code. Another challenge was making the typing interface as it was time-consuming and took a few attempts to make. Supabase and ChatGPT API was difficult to implement as it was the first one we used the tools. Further development would allow for a more expansive project.

Accomplishments that we're proud of

We are proud to say that KeyQuest has a running website and application with a

• login page
• typing interface
• integrated AI model These components culminate into a workable prototype application that can be streamlined to further markets with more work. Additionally, we're proud that we were able to withstand numerous hackathon distractions around us and stay focused even when it was really hard. It was a great team effort and we had a lot of fun doing it.

What we learned

Many things and improvements have been made by learning from our mistakes. We tested out the code multiple times with other people and they pointed out general mistakes that we couldn't see. We also greatly improved our ability to use HTML, CSS, Next JS, and Supabase to create a full-stack application, which we found difficult considering the logistics and time constraints of the hackathon. We left our comfort zone with Supabase and ChatGPT APIs, allowing us to strengthen our coding skills to a higher level.

What's next for KeyQuest

We plan to expand KeyQuest's system through more than mysteries, most likely incorporating more elements such as videos, challenges, and a reward-based system. We plan to have the user be able to upload PDFs of books or other things that they can type through, as well as make KeyQuest more engaging through features such as learning recommendations, user information tracking, and a better user interface. Incorporating different entertainment pieces is vital to retaining users and promoting educational topics chosen by them.

Built With

• ai
• javascript
• next.js
• react
• supabase