RecycleTime

Sign in page
Create an account page
Camera page
Classification popup
Fast Facts page
Recycling stats page
Users database
Recycling Log database
Dashboard Line Chart
Leaderboard

Inspiration

Every day, thousands of people throw recyclable items in the trash because they don't know if they are recyclable. Recycling can often feel confusing, inefficient, or time-consuming. As such, we wanted to address this problem head-on. We decided to devise a way to quickly assess an item by simply taking a picture of it. By providing an easy and accessible way to identify recyclables, we believe people will be more likely to take the extra step and recycle more items.

What it does

RecycleTime allows users to create an account. They can then use their phone camera to snap a photo of any item they are looking to recycle. A yolov5 object classification model identifies the material of the item and informs the user of the recycling rules that are relevant, along with suggesting a course of action. Each item, along with its classification is stored in the database, where it's associated with that specific user. Users can look at the amount of each type of waste they have collected and see how they compare to other users via a dashboard.

How we built it

We used React.js to build the frontend, FastAPI and Python to create the backend, Supabase for the database, and a yolov5 object classification model to classify the items. We created endpoints in our backend to get data and post to our database tables as well.

Challenges we ran into

Our biggest challenges mostly related to connecting the different parts of our app. Specifically, integrating the frontend and backend was more complicated than we anticipated. There were many interwoven parts to tackle, and we needed to make sure all of our functionality was linked together, without causing any errors. We ran into the vast majority of our errors while connecting our frontend to our backend, and spent a lot of our energy debugging.

We also had difficulties in getting our project set up. With the large numbers of packages, we had many errors in installing all the necessary packages for all of our team member's devices. We solved this by creating a dependencies folder to standardize our processes.

Accomplishments that we're proud of

We were proud of our seamless collaboration and perseverance throughout the hackathon. We were also able to integrate a wide range of tools and technologies to create our full-stack project. Furthermore, we were able to learn technologies like React and FastAPI on the fly, showcasing our adaptability.

What we learned

React.js concepts such as components, props, states, and hooks. Implementing an API using FastAPI to connect a frontend to a database. We also learned to use Supabase as our database technology along with Postman to test our endpoints.

What's next for RecycleTime

Looking toward the future, we hope to be able to deploy this website, especially for mobile. We also hope to improve the classification system to be more precise and accurate. Additionally, we hope to expand the program to account for different recycling practices across different states and areas.