SkribbleGuess

Landing Page
Players joining the lobby
Playing the game, drawing and guessing
Winning the game!

Inspiration

Our inspiration stemmed from how valuable we believe education is, and how recently it has been negatively impacted over the past 2 years due to COVID-19. We wanted to help kids learn more effectively since they typically have trouble focusing through a screen at home compared to in person.

What it does

It is a multiplayer drawing application that teaches kids new words in a fun and interactive way. It also allows students to compete with each other for points, therefore encouraging the students to continuously learn more.

How we built it

We built this application using ReactJS, Javascript, HTML, CSS and SocketIO-Client for the front-end, NodeJS, websockets / SocketIO for the back-end. We hosted the back-end using the Google-Cloud Services and deploying our application on a .tech domain. Furthermore, the front-end of the application was hosted using Netlify services.

Challenges we ran into

So of course, given the complexity of this hack, we had to overcome many different obstacles as a team. For instance, we had some issues with the web socket implementation, as only one user should be able to draw at a time. However, all the users were able to draw at once due to the fact that all users had the same components. We were able to address this by building a backend queuing system that kept track of each player's turns, providing each user their own unique component.

Also, we have to take the screen size into consideration to make the drawing either shrink or expand to fit into the frame of all student’s screens. We were able to fix this by finding the ratio of the current screen size versus the other screen sizes and using this value to scale the drawing onto each screen. This fixed the issue and therefore made screen size not a concern.

Accomplishments that we're proud of

We were able to learn more about ReactJS than we already knew, and build upon our already existing skills for the other technologies we already have. Also, we were able to use pre-existing libraries such as SocketIO to help fulfill our needs to make this an interactive multiplayer game for children.

What we learned

We learned to use multiple tools when creating our application, also we learned how to manage our time for a hackathon, delegating tasks more effectively to ensure we make the most out of our timeframe. Most importantly, we learned how to work as a team effectively, and helped each other out throughout the entire process.

What's next for SkribbleGuess

Some things we really wanted to add but couldn't because of time restrictions, was creating a general website that hosted a bunch of educational tools for children to learn. We would also like to add support to make this app (and future ones) work on multiple devices, such as mobile phones, tablets, etc. to further allow all students to benefit from our game(s) without having the technical requirements. We wanted to include a language translation feature for kids who do not speak English, as well as making our game in multiple languages for students to build their multilingual skills.