Garbagotchi

Take care of your virtual pet by sorting waste into the correct bins!

Comment

Inspiration

As a top ten Cool School, UCI is making strides in reducing carbon emissions through highly efficient waste management. One of our members is a new student organization staffer who has watched countless prospective students approach the three different color disposal bins with no idea on how to properly use them. People also tend to be bored by sustainability presentations and do not retain the information. Inspired by the original Tamagotchi, we created Garbagotchi, a gamified app to engage and educate people of all ages! We used our experience living in dorms and our member's knowledge as a UCI Basic Needs Center Volunteer to create a memorable and nostalgic learning experience.

What it does

Our solution is an educational game suitable for all ages that aims to teach people in which waste bins to dispose of their garbage. The app presents the user with a series of ten images of common waste items, introduced by a cute tamagotchi companion to endear the user. The player gains points for each item they dispose of in the correct bin.

How we built it

Our front end is written in Next.js and tailwind and guides the user through a pleasant UX. The front makes API calls to our back-end program written in Flask. The back end uses the Supabase API to fetch image data from our database. In Supabase, we store images taken by ourselves in a public bucket and relate them into the database.

Challenges we ran into

  1. We had trouble with data formatting and deciding our potential data sources to line up with our project purpose. We decided to generate our own data for our first full release and cleaned all data to support Cross-Origin Requests and size limits on data transfers.
  2. We faced challenges building intuition in Tailwind and eventually developed working styling skills that allowed us to style quickly and correctly in the later parts of our project.
  3. We ran into numerous runtime errors in our implementation of the asynchronous front-end main gameplay page and were able to resolve the errors elegantly and synchronously with our calls to the back-end API.

Accomplishments that we're proud of

  1. Applying knowledge about the environmental impact of waste to create a people-friendly educational tool.
  2. Finishing our project and persevering to our first planned functional iteration.
  3. Managing the database and API calls to create a seamless back-end service.
  4. Developing skill and intuition in Next.js and Tailwind to create a precise and functional front-end presentation.

What we learned

This project marks our first time using Next.js and Tailwind for implementing and styling the front end and our second time using Flask and Supabase for implementing the back end and database. We learned how to dynamically apply Flask via modular code to make a more general-purpose functional back end. We began to implement a user account system with statistics related to our game. We used state functions in Next.js to create an asynchronously updating page and styled the app from scratch with Tailwind to create a responsive and beautiful UI.

What's next for Garbagotchi

We hope to implement several new features over the next few functional iterations.

  1. Front-end UX improvements: dragging and dropping into bins, movement of the tamagotchi.
  2. Front-end feature implementation: search by county for local recycling plants (already implemented in back end!).
  3. Full account system implementation: save previous scores and improve the relationship with your tamagotchi.

Built With

Share this project:

Updates