Quizzikal

Homepage
Creating challenge modal
Profile page
Quiz page
Register page
Question submission page

Inspiration

For many of us, competition is our most powerful motivator. We chase the addictive high of defeating our friends and peers. Inspired by online trivia apps that kept us occupied throughout our high school years, we created a project that would aid in our studying while also allowing us to compete with one another.

What it does

Quizzical is a web application where users can put their academic prowess to the test by challenging one another to quizzes from 6 categories: biology, chemistry, physics, math, English, and history. Users can register and log in with our authentication system, allowing them to send a challenge by typing in the opponent’s username. The quizzes are timed per question and keep track of incorrect answers. Questions that were answered incorrectly are stored, allowing the user to review these questions in the future.

How we built it

The frontend was built with Vue.js and Vuetify, while the backend used Node.js, Express.js, and a PostgreSQL database. We chose Vue.js because it is an excellent framework for responsive websites which suit the needs of our project, while Vuetify allowed us to make the website modern-looking. SQL was chosen for our database because we wanted a powerful and scalable database that is also an industry-standard favoured by developers for many years. Default questions were scraped from quizlet using python and Beautiful Soup.

Challenges we ran into

We had a few issues making SQL queries and making requests to the backend. Oftentimes it was unclear what was exactly going on as errors were not shown, making it difficult to debug things.

Accomplishments that we're proud of

We are proud that we were able to create a scalable, dynamic web application. The backend was rather complex both the logic and number of endpoints and took a lot of work and time to finish.

What we learned

This project taught us how to use technologies that we were previously unfamiliar with. A few of these things include frontend design using Vuetify and database management and querying with SQL. We became much more efficient at building and utilizing REST APIs, providing user authentication, and creating modern-looking websites with web frameworks. Participating in this hackathon has helped prepare us for future work and studies by fostering fundamental software development skills.

What's next for Quizzical

In the future, we would like to increase the number of features offered. This includes a voting system for suggested questions, friend lists, email authentication, and desktop notifications.