Clean-It-Up

A website for improving Cleanliness.

📝 Description

Clean It Up is a web-based application that will allow users to report/request any sanitation-related task. This task will be completed by one of the Sanitation workers. Finally, after completion of the job and verification by the admin job will be marked closed.

💡 Motivation

With the rising importance of Cleanliness and Sanitation after the launch of the Swachh Bharat Mission in India, existing methodologies cannot deal with this problem efficiently. Tackling this problem is of utmost importance because with such a large population, if cleanliness and sanitation are not appropriately done, an outbreak of many diseases such as dengue, plague, etc. can take a severe hit on our population. Clean It Up will solve inefficient and lousy cleaning/garbage collection performed by authorities with no one to monitor them and manage them properly.

📑 Main Features

• Different Panels for User, Worker and Admin
• Login for User, Worker and Admin.
• Register for new Users and Workers.
• Upload the Image of cleanliness job along with description.
• Rate the work done by worker
• Jobs will be displayed along with descriptiona and image to worker for acceptance.
• Worker can choose option to leave accepted job.
• View and Edit profile funtionality.
• Admin can montor job uploaded as well as completed.
• Only verified Workers by admin will be able to accept jobs.

☑️ Prerequisites

• Node.js (version 12+)
• npm (version 6+)
• MongoDB (version 4+)

🚀 Technologies and Packages Used

1. Frontend

1. React
2. React Bootstrap
3. React Router DOM
4. Axios

2. Backend

1. Node
2. Express
3. MongoDB
4. Mongoose
5. JWT
6. Bcryptjs

⬇️ Local Setup

Clone the Clean It Up repository, and then follow the below mentioned steps for setting up backend and frontend seprately.

$ git clone https://github.com/sushantbasak/Clean-It-Up
# navigate to the project's directory
$ cd Clean-It-Up
# install the dependencies for client
$ cd frontend/ && npm install
# install server dependencies
$ cd server && npm install
# start frontend
$ npm start
# start backend
$ npm start

🚧 Local Environment Variables

For running this project locally 🚚, you need to setup and define the environment variables for both the client as well as the server.

Create .env files in both client and server folder with the following variables:

• Client:

  • NODE_ENV=development
  • REACT_APP_DEV_API_URL=http://localhost:8000/api/

• Server:

  • NODE_ENV=development
  • PORT=8001
  • DB_URL=mongodb://127.0.0.1:27017/clean-it-up
  • SERVER_URL=http://localhost:8001
  • JWT_SECRET=hello-world
  • EXPIRESIN=365d
  • SALTROUND=8

Default Ports:

• React (or Client) - 3000
• MongoDB (or Database) - 27017

Home Page

Home page is the landing page to the users and have User, Worker and Admin Panel with Login and Register functionality.

Register

New Users and Workers can register by filling the registration form displayed after clicking on Register functionality in User or Worker Panel.

Login Page

User, Worker and Admin can login by entering correct username and password on their respective login page.

User Dashboard

User Dashboard have various functionalities like creating a new job post, showing previously created job post by the user and rating the work done by worker.

Worker Dashboard

Worker Dashboard have functionalities like viewing jobs, accepting job and leaving already accepted job.

Admin Dashboard

Admin dashboard have option to verify worker, delete fake jobs and review the jobs completed

Profile

User, Worker and Admin can view and edit their profile by clicking on profile option present on the Navbar.