Community Recycling Tracker

Track, Log, and Inspire a Greener Tomorrow.

Comment

Inspiration

As members of a community, we care dearly about the environment that we live in. One of the ways we can contribute to preserving it is by recycling. So, we decided to create a tracker that allows one to painlessly enter their recycled items, one that encourages the action of recycling by visualizing their goal, one that embodies the phrase "ease-of-use". Something that can not only be used as a submission for the Hackathon, but something that can be used in our community to make a difference.

What it does

Our tracker allows you to enter materials that you have recycled in that day. There are three options: plastic, paper, and glass. From these, you must choose one, enter the amount you recycled, and submit the information. It will be recorded in your personal recycling log, and the progress bar at the top will be correspondingly filled up. Additionally, at the bottom right corner, there are general tips for people to remember while they are recycling materials.

How we built it

The project was built using a carefully structured file system and a selection of powerful tools. The React components, such as Dashboard, Header, and LogRecycling, provided the backbone of the app's functionality and interactivity. TailwindCSS ensured the app's layout was visually appealing and responsive across various devices. Vite managed the development environment efficiently and optimized the build process. The dynamic progress bars, integrated into the dashboard, represent users' recycling contributions and motivate continued engagement. Environment variables in a .env file securely handled configuration values like API endpoints for backend integration. Configuration files such as eslint.config.js, tailwind.config.js, and tsconfig.json maintained coding standards and ensured smooth development.

Inspiration

The Community Recycling Tracker was inspired by the growing need to promote environmental sustainability in an engaging and actionable way. This project aims to help users track their recycling contributions, visualize their progress, and learn practical tips to improve their recycling habits. By combining technology, interactivity, and sustainability, the application empowers individuals to make a positive environmental impact.

What it does

The Community Recycling Tracker is an interactive web application designed to help users monitor and improve their recycling habits. It allows users to log recycled items, track their progress through a dynamic progress bar, and receive actionable tips to enhance their recycling efforts. The dashboard provides an overview of the user's recycling contributions, breaking down items like bottles, paper, and plastic. Additionally, the app serves as an educational tool by offering practical recycling tips and fostering awareness about sustainable practices, all while promoting a cleaner and greener community.

How we built it

The project was built using a carefully structured file system and a selection of powerful tools. The React components, such as Dashboard, Header, and LogRecycling, provided the backbone of the app's functionality and interactivity. TailwindCSS ensured the app's layout was visually appealing and responsive across various devices. Vite managed the development environment efficiently and optimized the build process. The dynamic progress bars, integrated into the dashboard, represent users' recycling contributions and motivate continued engagement. Environment variables in a .env file securely handled configuration values like API endpoints for backend integration. Configuration files such as eslint.config.js, tailwind.config.js, and tsconfig.json maintained coding standards and ensured smooth development.

Challenges we ran into

However, the project was not without challenges. Learning and adapting to TypeScript initially posed difficulties, particularly in managing static typing and edge cases during component development. Configuring dependencies for React, Vite, TailwindCSS, and TypeScript required careful attention to compatibility and proper setup. Balancing performance optimization with ensuring responsiveness across all devices remained a significant focus. Additionally, designing a flexible progress-tracking system to dynamically calculate and display users' recycling contributions required innovative problem-solving.

Accomplishments that we're proud of

We are incredibly proud of the dynamic features and seamless functionality of the Community Recycling Tracker. The successful integration of a visually appealing progress bar system stands out as a major achievement, as it motivates users to keep track of their recycling efforts in real time. Much of our pride in this project lies in how smooth the front-end looks. Additionally, the inclusion of actionable recycling tips adds an educational component that enhances user engagement. The use of React, TypeScript, and TailwindCSS to create a responsive, user-friendly interface demonstrates our ability to apply modern web development tools effectively. Overcoming initial setup challenges and ensuring smooth interaction between all components was another accomplishment we’re proud of.

What we learned

Through this project, we gained hands-on experience with React and TypeScript, learning how to design and implement reusable components with static typing for better code maintainability. TailwindCSS taught us how to build responsive layouts quickly, while Vite introduced us to faster build times and an efficient development environment. We also enhanced our problem-solving skills by addressing challenges such as dynamic progress tracking and compatibility issues between dependencies. This project emphasized the importance of planning, testing, and iterating to ensure a polished and functional product. We also gained some interpersonal project management skills, including being on the same page as a teammate and organizing/distributing project duties.

What's next for Community Recycling Tracker

The next steps for the Community Recycling Tracker include enhancing its functionality and expanding its reach. Future updates may involve integrating a backend to store user data, enabling personalized recycling goals and long-term progress tracking. We aim to incorporate a leaderboard feature to foster a sense of community and friendly competition among users. Additionally, we plan to introduce location-based recycling guidelines, making the app even more practical by tailoring tips and information to users’ regions. Further accessibility improvements and expanding the educational content on sustainability will ensure the app remains inclusive and valuable to all.

Share this project:

Updates