Snowball Fight Club!

Main page showing sidebar with list of local snowball fights, along with snowball fight markers on the map for each list item.
We made sure to have fun where we could.
Splashscreen without location permissions.
Brainstorming the app with Figjam.

Team Mates

KVP, Bianca Buha, Sam Baldwin, Ryan Lee (Mentor)

Inspiration

Our challenge and brief was to create an app to help create social interactions and engagement for groups of people - with a Christmas theme. We decided to make something really fun for this task and settled on Snowball Fight Club, an app that would utilise geolocation to help users find and create snowball fights! And with that, I have broken the first rule...

We wanted to do something we thought would be genuinely fun to create, but also push us in the use of tools we perhaps had limited experience with.

What it does

Once the website has the user's permission to access their location information and confirms not to talk about snowball fight club (We had to add this) they are shown a local map of their area.

A Christmas tree marker indicates their location and marked on the map are snowball fight markers. Each marker has its own description, time and date. The local snowball fights are also displayed in a sidebar menu that the user can click on to zoom into that location on their map.

How we built it

We spent a great deal of time at the start of the day discussing the tech stack and tools that we could use to best achieve Snowball Fight Club whilst getting a little out of our comfort zone.

We in the end settled on a core tech-stack utilising React in TypeScript. We made use of the React-Leaflet library to help us implement the geolocation functionality in our app. Styling for the web app was assisted by the use of MaterialUI.

We also made use of other tools that were new to us that our mentor Ryan recommended. These included using Replit as our IDE due to its online and real-time functionality so we could all work on the same project at the same time with much more ease during the hackathon. Smaller tools like Super Plate were also used to create the app's initial boilerplate shell.

Challenges we ran into

If we were honest with ourselves and in the best kind of way, the whole project was a challenge for us. As School of Code graduates most of our experience was with JavaScript, so using TypeScript certainly took some getting used to and troubleshooting. Pushing ourselves to create a whole web app during the hackathon using TypeScript, however, was an amazing way to learn by doing.

Time was another challenge for us. There were features we would have liked to have added and tests we would have liked to have written, however, due to the time constraints we decided a functioning MVP was more important.

Accomplishments that we're proud of

We could not be happier with what we created during the hackathon, implementing geolocation functionality was something we had no experience with but all wanted to try our hands at and succeeded at.

Having the opportunity to both have fun collaborating and learning while we did so is another highlight throughout the day and something we look forward to taking into future hackathons.

What we learned

Working with TypeScript was definitely one of the main experiences we learned from, our mentor Ryan did an excellent job showing and explaining the language features and benefits, and we learned a lot from him in the process. Spending a day working together in the TravelPerk offices also really helped us to improve our skills in collaborating with others in person, as much of our experience collaborating on projects had been online and remote.

Another skill we took away from Ryan was to always check for online libraries and hooks on repositories such as NPM. This helped us to save time, and also learn to use tools we otherwise might not have thought to utilise and learn.

What's next for Snowball Fight Club

User-created snowball fights and a functioning backend! These were initially two parts of the app functionality we wanted to include, however, due to time constraints we decided these would be best left as stretch goals.

We had also initially discussed the form factor of the application as something that would lend itself well to be a mobile application created using React-Native due to the dependence on geolocation. Implementing the app using React Native is definitely something we would like to explore in the future.