CycleIT - All-in-one recycling and sustainability platform

🌿 Did you know? Recycling 1 ton of paper saves 17 trees? CycleIT aims to encourage users to recycle used items and embrace a greener lifestyle by making the entire process engaging and rewarding!

Comment

Note: The online demo may be slow due to its usage of free tier give the server 1-2 minutes to load when you register as a new user.

Inspiration 🌱🌿

The inspiration behind creating this web app was a passionate desire to promote recycling and foster a greener lifestyle. Recognizing the need for an engaging approach, the incorporation of gamification features, such as awards, badges, and challenges, was a deliberate choice to make recycling enjoyable and motivating for users. The aim was not only to provide information on recycling centers but also to create an interactive platform that encourages users to actively participate in sustainable practices. The combination of features, from scanning recycled items using cutting-edge technology to fostering a sense of community through donation campaigns, reflects a commitment to making eco-friendly choices more accessible and enjoyable for individuals, ultimately contributing to a more sustainable and environmentally conscious society.

What it does ⚒️

  • Awards and Badges 🏅: Users can perform various activities like completing challenges or scanning recycled items to rack up points. Earned badges add an extra shine to their profile, motivating users to continue with their achievements.

  • Leaderboard 🏆: The app features a Leaderboard that shows the top 10 users with the highest points, motivating new users to recycle more and promoting a sustainable lifestyle.

  • Challenges 🌱: Bite-sized sustainability challenges allow users to earn points and boost their rank upon successful completion, providing a dynamic and engaging experience.

  • Maps 🗺️: An interactive map powered by Geoapify helps users easily locate nearby recycling centers, promoting easy access to recycling facilities.

  • Scanning Recycled Items 🔄: Users can earn points by scanning recycled items using Tensorflow.js and COCO-SSD, enhancing the fun factor and incorporating advanced technology into the recycling process.

  • Donation Campaigns 💚: Users can create and manage donation campaigns, fostering a sense of community around charitable initiatives. Secure payment gateways facilitate donations.

  • User Profile 📊: The central dashboard allows users to view recycling statistics, points, badges earned, challenges, donations, and managed campaigns.

How we built it 🚀

CycleIT is developed using the MERN stack as well as integrating with several libraries to provide mapping and analytical features.

  • React.Js: React.Js is utilized for building the frontend components of the application. React.Js is a popular Javascript framework preferred for building frontend apps due to its component based architecture.

  • CSS3 - Styling for the entire application is done using plain CSS3 utilizing appropriate media queries to ensure responsiveness across devices.

  • Express.Js: The backend server of the project is built using Express.js which is a minimal and lightweight framework for building servers with Node.Js. The express server consists of controller logic, backend routes along with middleware for authentication.

  • MongoDB: Mongo Atlas is used as the database to store application data. In addition, Mongoose is used which is a ORM for integrating MongoDB with Node.Js.

  • React-Leaflet: Users are provided with a dynamic map where one can view all the recycling centers in a particular city. For the map, react-leaflet is used which is a is a React wrapper for the Leaflet.js mapping library, enabling seamless integration of interactive and customizable maps into React applications.

  • Geoapify: Geoapify Places API allows developers to integrate location-based services into their applications. The Places API enables users to search for places and retrieve details about specific locations, providing geocoding, autocomplete, and place details functionalities. It is used to search for all recycling centers given a particular city.

  • React-Charts: It is a React wrapper for the Chart.js library, providing an easy way to integrate dynamic and interactive charts into React applications. The project utilizes this library to provide statistics to the user of their recycled items.

  • Tensorflow.js: In the project users can scan an item and the application will classify it into one of several recycling categories. Here, Tensorflow.js is used for object detection. Tensorflow provides several models to choose from and this project utilizes their COCO SSD model in order to detect objects from a video stream.

  • Cohere-AI: Cohere provides several LLM models which can be used in a chat like context. This functionality is used to categorize a given object into one of several recycling categories: Paper, Glass, Metal, Organic, E-waste and Plastic. The suitable prompt is provided along with the object name and the model returns its correct classification.

Challenges we ran into 🚵🏼‍♀️

  1. The maps feature Integrating the maps features was a considerable challenge and required trial and error with several libraries, platforms and SDKs. Eventually, we went with the Geoapify platform due to its ease of use.

  2. Object Detection Integrating object detection into the platform required some knowledge on computer vision and integrating it with a web app, something I was unfamiliar with. However, with the help of several articles and YT videos I was able to successfully incorporate it into the application

3, Payment Gateway The payment gateway too was a tedious task since I wanted it to allow dummy or sandbox payments so that the changes can be reflected on the web app which required considerable browsing through various documentations until I finally decided to go with Braintree powered by PayPal

  1. Database and Backend Design The backend of this application has a considerable level of difficulty and I had to use several new types of queries and concepts to enable certain features like adding a new badge when X points have been earned, getting user statistics as per grouping, etc.

  2. Responsiveness Majority of users today access websites through mobile devices, hence I wanted to make the website responsive across all devices which involved extensive use of media queries.

Accomplishments that we're proud of 💪🏼

  1. Successfully Integrating the payment gateway
  2. Adding a large number of features
  3. Making the website responsive across devices
  4. Integrating object detection
  5. Adding gamification features through the points, badges and leaderboard
  6. Allowing users to search for recycling centers via maps feature

What we learned 🤔

  1. Learned how to work with maps
  2. Learned how to integrate object detection in a web application
  3. Worked with several new react libraries
  4. Learned new database concepts and queries

What's next for CycleIT - All-in-one recycling and sustainability platform ♻️

I wish to further enhance this application by including upcycling features like an upcycling marketplace into the application as well so that is definitely on the roadmap.

Share this project:

Updates