Waste-Management Web App

Inspiration

When going to the supermarket, we usually buy the products that are the most appealing to us without looking at how are they are made. We wanted to create a Web-App to show to the user that even thought the product is appealing for him, it may not be for the environment.

What it does

The Waste Management Web-App helps the user to understand how his weekly purchases have an affect on the environment. So the user enters the name of the product, the materiel and the size of the product. Each material has a number of points ( high points = big effect), and each Size has a number that multiplies with the points of the material. Every time the user adds new information, they are automatically added to a new row of a table and then showed to the user. At the bottom, there is the total of points that the user has accumulated until now, if the text below the total is green then the user's purchases this week are environmentally friendly, if it is red, then his purchases should be better the following week.

How we built it

We developed our Waste-Management Web App using HTML, CSS, and JavaScript to create an intuitive user interface with inputs, tables, and text displays. Leveraging Bootstrap and a CSS file, we ensured a visually appealing design. For data storage, we utilized SQLite and SQLAlchemy, acting as secure repositories for user information, preserving choices and preferences across sessions. Additionally, fastAPI was integrated to optimize performance, guaranteeing a smooth and efficient user experience.

Challenges we ran into

Integrating all the files, especially around fastAPI integration, posed a significant challenge during development. Ensuring seamless interaction between HTML, CSS, JavaScript, and the fastAPI backend required meticulous coordination. Debugging data transfer issues and maintaining a smooth user experience while incorporating fastAPI functionality demanded careful attention.

What we learned

We gained valuable experience in utilizing SQLite and SQLAlchemy to store data from HTML, an area we were previously unfamiliar with. Additionally, we learned how to seamlessly integrate all files using fastAPI, further expanding our knowledge and skills in web development.