Resketch

Title Page
WOAH YOU WON FIRST
Learning UN Sustainable Development Goal Facts!
WOAH LOOK AT THAT DRAWING

Inspiration

In recent years, education and gaming have slowly started to intertwine. From late nights spent grinding Prodigy Math Game to Friday afternoon Kahoots, many of the best memories that we've made at school wouldn't have been possible without games. However, the interaction that most of these games offered was limited to just multiple choice. Resketch aims to give students the ability to creatively express themselves while strengthening concepts that they're learning - an overall win for teachers and students.

What it does

Resketch is a way for students to educate themselves on the global environment while having fun with their friends! Students are given 15 seconds to draw a prompt based on the theme of a UN Sustainable Development Goal. Once their time is up, their drawing is converted to a png and sent to the Google Cloud Vision AI to analyze their drawing. If the AI states that the drawings resemble the prompt then the students will be rewarded a point. Each prompt will have factual information regarding the global environment in the descriptor, giving students the opportunity to learn!
At the end of a series of these rounds, the student with the most points won will be declared the winner.

How we built it

Our application was made using reactJs for the front end and used websocket as well as Google Cloud Vision API for the backend. All users' scores as well as the user leaderboard is tracked internally. After every round, we will query every player’s drawing with the Google Cloud Vision API which responds with an array housing its prediction of what all player’s drawing represents as well as each player’s username. If a player’s drawing matches the prompt their score is increased.

Challenges we ran into

The hardest challenges that we faced was connecting our front end to our back end. During the creation process we realized that there were some incompatibilities between websocket and our original next app. As a result we had to rewrite all of our front-end code to react in order to connect it to our back-end.

Accomplishments that we're proud of

The greatest accomplishment we made during the Hackathon was finally being able to correct the incompatibilities between WebSocket and NextJS. By the morning of the second day, we were able to convert the NextJS code to react, creating a working web application.

What we learned

From this experience, we learned the importance of researching the compatibilities between the resources beforehand. We hope to host design meetings at the start to ensure that everything we need is in order before we begin. This way, our project will be kept organized and ordered, allowing us to efficiently maintain and evolve our code throughout the course of the Hackathon.