TrashMe!

Awarded ✨Best Use of Microsoft Cloud for Your Community ✨ in TechTogether Boston 2022 🎉

🔭 Devpost

🔭 Presentation with Demo

🔭 Deployed website using Microsoft Azure

Description

TrashMe is a website that helps college students understand the trash items they usually throw away, and learn how to properly dispose the components based on categories. TrashMe is built using React.js, Javascript, HTML, CSS, deployed using Microsoft Azure, and based on the wireframes developed in Figma.

Inspiration

Have you ever wondered whether you should throw your cupcake in a paper cup in the food bin or recycle bin? You see multiple colored trash bins but have no idea what each of them is used for throwing that trash and where the trash goes at the end. As international students and avid environmental lovers, we always struggled with this basic information about waste management when we first came to the US. Hence, we bring our app "TrashMe" which would be able to create awareness, guide users, make the process easier for them to manage their waste properly, and help the environment and us.

Web Evaluation

• Category: Environmental awareness, Sustainability, Waste Management, Life Style
• Web: Web appication (first experience), may develop mobile application further
• Story: User can scroll through the trash list thrown by college students and also categories of different trashes. They can search a particular trash. On clicking to that particular one, user would be able to see the category of the particular trash. User on clicking the category would get the information of where they should be throwing the trash or how they would be managing the waste they make.
• Market: Anyone who is an international student or a cllege student who isn't known about the composting or 3R techniques of waste management in the US would be able to use it to get the inforation and manage their trash in a right way. They can even see the most thrown wastes by students and be aware to decrease the waste they might make as a student.
• Habit: User can search throughout the day as many times as they would like to get the information. As people would be making waste in every aspect, they would be able to get the information for the right way to manage their waste in those moments.
• Scope: We will start with list of the trashes, most thrown trash, their categories, search bar to search them for making it user-friendly, and method of their management.

Product Spec

1. What users can do in this app.

Required Must-have Stories

• User can tap into the items page that is embedded in the main home page.
• User can see the search bar where they can search for the particular trash.
• User can tap in a particular item in items page and see their categories too.
• User on clicking in a category would see the image on where it should be thrown and the information on whether it should be recycled or thrown to be compost etc.

Planned future features

• Launch a mobile application.
• User can create their own account.
• User can see the most searched trash on their account as a record.
• User can see a different category section for the wastes.
• User can read news articles about sustainability and waste management.

How we built it

We used the following technologies:

• React.js, Javascript, HTML, CSS, Azure, Figma

1. We hard-coded our own datasets required for the project by researching different governmental papers and databases.
2. We took an online course on developing web applications using React as we had never used it before.
3. We did extensive research for designing the front end and deploying the application in Azure.

Frontend Design We used Miro Board to make our rough sketch first and used Figma to visualize the design of the website. Finally, we decorated our structured website incorporating React while using CSS.

Challenges we faced

1. Implementing Lottiefiles as a button on the Launch Page => found an alternative to that later; using gif instead
2. Merge conflicts in GitHub => solved them successfully
3. Linking one webpage to another page => succeeded in that with the mentor's help
4. Showing more than one category for a single waste item => dived deep to understand the logic and implemented it.
5. How to show information details in a consistent and organized way for all of the different trash items on the main page.

What we learned and are proud of

1. Creating a working website with HTML, CSS, and React
2. Implementing a search bar
3. Deploying web application using Azure
4. Coding in a collaborative manner using Git
5. Trial and error in figuring out the first stages of the web app.

Wireframes:

MiroBoard

Figma