Garbage Aim

StormHacks 2022: Website Link

During StormHacks 2022, our goal was to create an educational game that users can have fun with but also learn more about waste disposal.


Garbage Aim Long Image

Role

Frontend Development
Figma Design


Timeline

March 18-20, 2022
GitHub file: G-Aim


Tools

React (JavaScript, HTML, CSS)
GitHub
Visual Studio Code
Three.js
MongoDB
Express.js
Photoshop
Material UI
Figma

The Task


In Canada, we produced nearly 1.33 billion metric tonnes of waste. This roughly translates to 36.1 tonnes per person!

Once garbage ends up in our environment, it contaminates oceans, beaches and various other coastal regions. It's the responsiblity of everyone to help manage and reduce their waste overall. That is why we were inspired to create "Garbage Aim", also known as "G-Aim."

Throughout our lives, we've always wanted to improve our FPS skills, especially in games such as Valorant, Apex Legends, and CSGO. We have also wanted to be more environmentally conscious about our actions when throwing out waste. We recognized both of our issues and wanted to combine them into something extraordinary.

Our passion for video games has inspired us to put an interactive twist on our message; virtually pick up the garbage and through your score see how rampant ocean and beach pollution has gotten.

Execute


Inspire the Younger Generation
"G-aim" is a web app that has the goal of inspiring individuals to take a stand and learn more about waste disposal through an interactive game. We put your aim to the test while clicking on falling pieces of trash before it hits the beach floor! You also have 6 lives to lose, so use them wisely!

Pit your aim against other players and get the results you are looking for by also seeing your name appear on the leaderboard. It's a great way to test your progress and also educate yourselves on the importance of waste management.

Gaim photo 1
Homepage where there are also ways you can donate for this cause if you scroll down!


Gaim photo 2
Login page which will then be added to the leaderboard!


Gaim photo 3
Gameplay of G-Aim!


Gaim photo 4
Leaderboard that is updated through the backend!

Demo


You can check out the live demonstration through the video, or you can check out the application with the link above!

Struggle


Challenges were inevitable due to the fact that this was by far our most complex project that any of us created. But we did tackle these problems together to make it a lot easier. These challenges included:

  1. Converting our design that we created to functional code and creating an overall great UI/UX for the user was difficult to image and implement
  2. Understanding that we wanted to not only create a simple game but with the focus of educating users at the end of the day
  3. Using Three.js to create the basis of our game (environment setup, creating garbage bags, the overall game logic as well)
  4. We did not know anything about MongoDB and Express.js so getting through that hurdle was difficult at first, but a few of our team members were able to pull through and find a solution
  5. We wanted to create something that was well above our normal standards so it was known that we would run into these problems so we wanted to maximize our learning in the end

Future?


We have many goals that we would like to accomplish with Garbage Aim. These are included in the list:

  1. Create a more secure and safe Login page and would also like to incorporate more game modes in the future so that we can actually get our message of picking up waste across
  2. Not only do we want to add more customizability, but we also want to create a settings tab for the user to change their crosshair, enable/disable music, and also change their sensitivity
  3. Hopefully, in the future, we can also get sponsored by an organization with the same goal as us and help minimize the amount of waste on our beaches!

This is our most ambitious and technically sophisticated hack so far! We used the knowledge that we gained through our work experience and past projects to complete the final project you see here today. This was also the first hackathon for a few of our members, so since we were able to create this project with this outcome we are surely impressed and satisfied.





Thanks for taking the time to take a look at my work!


Like what you see?

Let's keep the conversation going!