Devpost Listing
"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.
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 responsibility 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.
We started off designing our web app through Figma and photoshop to get a rough idea of what we wanted our application to function and look like. We then converted our designs to functional code through React and using MUI components. Then we focused most of our time creating the game logic and environment with Three.js (create the 3D models of the beach and garbage bag). We used MongoDB Altas as a database in the cloud to store the data for our app. We used Express.js to handle all the routing and to decide which API to use. We then connected the frontend and the backend with Axios, which made calls to the API when the server was running.
- 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
- Understanding that we wanted to not only create a simple game but with the focus of educating users at the end of the day
- Using Three.js to create the basis of our game (environment setup, creating garbage bags, the overall game logic as well)
- 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
- 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
This is our most ambitious and technically sophisticated hack so far! We used the knowledge that we have gained through our work experience and past projects to complete the final product 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.
We learned the importance of working together as a team since there were many new technologies that we were using such as the MERN stack, so it was great having that support built-in. We also realized the importance of project management using GANTT charts and also messaging consistently through Discord to keep our communication strong. Going into this hackathon we knew the technology stack that we wanted to use, so knowing how to implement them beforehand definitely saved a lot of us time since we were able to plan our priorities and scope our project better.
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. 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. 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!
