PotatoBowl | Devpost

Example from our Bowlpage.js code
Example from our server.js code
Example of our Bowlpage with user-interaction
Preview of our Homepage
Preview of our page that shows a user's sets.
Add Question Page
Log-in page

Inspiration

The creators of PotatoBowl all participated in Academic Team/Quizbowl competitions at Dutch Fork High School. As a part of Dutch Fork's Quizbowl team, we used various applications for familiarizing ourselves with material, particularly Quizlet (https://quizlet.com/) and Protobowl (https://protobowl.com/). Quizlet is limited in its capacity for students because it cannot gradually read out questions, like Protobowl can, and unlike Quizlet, Protobowl is limited in that users cannot make and study highly specific questions, instead being relegated to massive packets with broad categories. In reaction to this, the creators of PotatoBowl were inspired to create an application that combines the best of both programs.

What it does

PotatoBowl allows you to have multiple users in the same room receiving questions, one word at a time. Users can compete to answer questions faster. It also allows you to create your own sets, thus users can target specific knowledge sets to improve retention in key areas.

How I built it

The frontend was built using a combination of React and Material-UI components. This was completed with a node.js and express backend, with a connection to a Google SQL database. We also used socket.io to connect players in real time and ngrok to run our server on one host while connecting different machines to the server so multiple players could play in the same room.

Challenges I ran into

We began with a lot of problems with Git and source control - our React package.json files were not lined up and we had a lot of trouble getting up and running. It also took significant effort to get our SQL queries correctly formatted so we could select random questions from our database based off of a certain packet/category. As a team we struggled to find an algorithm that checked if an answer was correct given a set of acceptable answers, or close enough to be considered correct. Our team member Nathanael developed a consistent answer checking algorithm that utilized a reasonable levenshtein distance limit so that answers that had small spelling errors would be accepted while answers with significant errors would not be accepted.

Accomplishments that I'm proud of

We successfully completed a functioning program with a team of 5, with one of us working remotely, and we developed an application that we, and we think many others, would truly find helpful. Seeing our product work cleanly with SQL, Express, and Socket.io is also a major source of pride for us.

What I learned

Seeing as we all had varying levels of experience, all of us learned new things to different extents. Nathanael, Jack, and Emmey learned React and Express from scratch. We also learned or became familiar with Websockets, spellcheck algorithms, Google SQL integration, and material-ui(grid, forms, etc).

What's next for PotatoBowl

Improve the UI, increase integration among the accounts system, deploy to the cloud for more people to use, and upload more auto-generated content. For this competition we were not able to create a system for editing Question Packets (currently users can only add questions to a set), so we also hope to add that functionality soon.

Built With

Submitted to

New Year New Hack

Created by

I am very pleased with my contributions, completing most of the Homepage with Owen's help and helping others out on various other parts of the project while learning a lot of new languages on the way. This was my first time using React, so I initially had a lot of catching up to do.

Jack Oberman
I was the lead backend developer, working with Express, Socket.io and Google Cloud SQL. It was my first time using gcloud SQL and I had a lot of fun! I also built the frontend for the login page and a majority of the frontend for the bowl page.

arjun11verma Verma
I was primarily a front end developer. I worked briefly with Arjun to set up the database, and then worked with Jack to create a UI that was simple but presentable in the time that we had. I learned a lot, but mainly about CSS and using material-ui components

owenpetersen Petersen
I got to work on a variety of different components for this project, which is great because I haven't done much web development before. I learned a lot about servers, clients, creating pages, but also got to create some fun algorithms such as interpreting answers from a string.

Nathanael Oliver
queensferry572