RECYCLER

Recycler is a web application built to help achieve Sustainable Development Goals 12 & 13, enabling people to recycle their recycleable wastes. We act as a middleman between companies that make use of or recycle these wastes and individuals and businesses with wastes to recycle. Using our website, users can can sign up and locate recycling partners closest to their location through Google Maps. Our agents can then pick up these recyclable waste at different collection centres and deliver to the factory. This application is equally designed to help reduce pollution of the enviroments leading to erosion caused by blocked drainage pathways with plastics and other waste materials, inspired by the SDGs targets to strengthen resilience against climate-related hazards and natural disasters, and substantially reduce waste generation through prevention, reduction, recycling and reuse, by 2030. Together, we can make a difference in the environment!

Workflow

• A person signs up either as an individual or a recyling partner company(business)

• The user registers either by manually filling the forms or with their google accounts.

• The user proceeds to login to their dashboard where they are advised to update their profiles

• An individual user can create a recycle request in the smart bin specifying amount, weight and pictures of items to be recycled. Requests can either be delivered by agents sent from partner companioes to pick up or by self. They can also view their earnings and orders filtering by those completed, uncompleted and declined.

• A business user (registered recycling partners) can view recycle requests made to them where they can either accept or decline this request.

• Once a request is approved, the user is notified as well on thier dashboard. The agent comnes to the location on the request form or calls the seller(individual) in order to pick up and pay the designated price attached toi the request.

• After pickup and payments have been made, the seller and buyer can then mark this request as completed and this finalizes the request

• Once a request is declined, the user is also noptified so they can make another request or delete it.

• A request is considered pending when

  • It has been made by the seller and has not yet been approved by the recycling company
  • It has been approved by the recycling company but has not yet been marked completed by both parties involved.

Tools/Techologies used

• ReactJS: A user interface development library based on JavaScript. We used this library to put together our project.

• Firebase: Google Firebase is a collection of backend cloud computing services and application development platforms. We used this BaaS to store users data, using the firebase realtime database. Also, the Authentication feature which provides easy-to-use SDKs to authenticate users.

• Google Cloud: Google Cloud offers client libraries that make it simple to create and manage resources. We used this cloud platform to store our assets.

• Google Map: Google Maps is Google's web mapping platform and consumer application. We used Google Maps to help users find the location of plastic buyers.

• Bootstrap: Bootstrap is a free and open source front-end development framework used to create websites and web applications. This technology was used to style components and create a responsive website.

• Chakra UI: Chakra UI is a simple, modular, and approachable component library that provides the building blocks for your React applications. This technology was also used to style the components.

• Cascading Style Sheet (CSS): CSS is a language used to style web pages. The components were styled using this technology.

• Figma: Figma is an online user interface (UI) tool for designing, collaborating, and prototyping.

• Netlify for deployment.

Links

• Live link
• Figma file
• Video demo

How to run this application

• Clone the repo

git clone https://https://github.com/Recycler-App/Frontend.git

• cd into project folder

cd Frontend

• Use yarn or npm to install packages

npm install
yarn

• Start the application

npm start
yarn start

Note: An env file should be created to store your environment variables.

Want to contribute?

Pull requests are the best way to propose changes to the codebase. Would you like to add/remove anything to make Recycler better? Follow these steps:

• Fork the repository and make a branch off of main.

• Changes should be made and a pull request should be opened.

• Alternatively, you can open a issue and we will respond as soon as possible.

The Team

Team Recycler created this project for the Google Solution Challenge 2023. Connect with us on twitter: ANYANWU MAUREEN, CHISOM CHUKWUMA, UMEH CHINONYE LYDIA, and NNAWUIHE ANNABEL ADAEZE.