CivicPulse is a web application designed to allow users to report and track community issues such as road damage, drainage problems, and more. The application includes a public-facing frontend for reporting and viewing issues and an admin panel for managing reports and users.
You can view the video of the application here.
You can view the live demo of the application here.
Note: I have disabled my GCP account to avoid getting charged, so heatmap and places api would not be working.
Note: In some cases, clicking on the heatmap may cause the whole window to go blank. If this happens, simply reload the page. This issue typically occurs the first time you click on the heatmap.
- ReactJS: A JavaScript library for building user interfaces.
- Vite: A build tool that provides a faster and leaner development experience for modern web projects.
- MUI: A React component library that implements Google's Material Design.
- Firebase: For authentication and Firestore database.
- Axios: For making HTTP requests.
- @react-google-maps/api: For integrating Google Maps and Heatmap functionality.
- Chart.js: A JavaScript library for creating charts.
- react-chartjs-2: React wrapper for Chart.js.
- react-toastify: For creating toast notifications.
- react-router-dom: For handling routing in React applications.
- sweetalert2: A library for creating beautiful, responsive, customizable popup boxes.
- Node.js: A JavaScript runtime built on Chrome's V8 JavaScript engine.
- Express.js: A minimal and flexible Node.js web application framework.
- Firebase Admin SDK: For server-side Firebase operations.
- Multer: Middleware for handling
multipart/form-data
, primarily used for uploading files. - @google/generative-ai: Google's library for generative AI.
- Axios: For making HTTP requests.
-
Clone the repository:
git clone https://github.com/rushilpatel21/CivicPulse.git cd client
-
Install dependencies:
npm install
-
Create a
.env
file in thefrontend
directory and add the following environment variables:VITE_GOOGLE_API_KEY= VITE_GOOGLE_AUTH_DOMAIN= VITE_GOOGLE_PROJECT_ID= VITE_GOOGLE_STORAGE_BUCKET= VITE_GOOGLE_MESSAGING_SENDER_ID= VITE_GOOGLE_APP_ID= VITE_GOOGLE_MEASUREMENT_ID= VITE_GOOGLE_DATABASE_URL= VITE_GOOGLE_PAID_API= VITE_BACKEND_SERVER_PORT= VITE_BACKEND_SERVER_PORT_DEV= VITE_GOOGLE_RUSHIL_ID=
-
Start the development server:
npm run dev
-
Navigate to the
backend
directory:cd server
-
Install dependencies:
npm install
-
Create a
.env
file in thebackend
directory and add the following environment variables:PORT=8000 GEMINI_API_KEY="" GOOGLE_API_KEY="" GOOGLE_AUTH_DOMAIN="" GOOGLE_PROJECT_ID="" GOOGLE_STORAGE_BUCKET="" GOOGLE_MESSAGING_SENDER_ID="" GOOGLE_APP_ID="" GOOGLE_MEASUREMENT_ID="" GOOGLE_DATABASE_URL="" FIREBASE_TYPE="" FIREBASE_PROJECT_ID="" FIREBASE_PRIVATE_KEY_ID="" FIREBASE_PRIVATE_KEY=" FIREBASE_CLIENT_EMAIL="" FIREBASE_CLIENT_ID="" FIREBASE_AUTH_URI="" FIREBASE_TOKEN_URI="" FIREBASE_AUTH_PROVIDER_X509_CERT_URL="" FIREBASE_CLIENT_X509_CERT_URL="" FIREBASE_UNIVERSE_DOMAIN=""
-
Start the backend server:
npm start
The CivicPulse web application interacts with a variety of backend endpoints to manage issues, user roles, and reports. Below is a detailed description of the API endpoints used in the application, along with the corresponding functions in the frontend code.
- Endpoint:
/gemini
- Method:
POST
- Description: Sends form data to the Gemini API.
- Function:
Gemini
- Usage:
const formData = new FormData(); // Append form data here const response = await Gemini(formData);
- Endpoint:
/issues
- Method:
GET
- Description: Retrieves a list of all issues.
- Function:
getIssues
- Usage:
const issues = await getIssues();
- Endpoint:
/issues/:id
- Method:
GET
- Description: Retrieves details of a specific issue by its ID.
- Function:
getIssuesById
- Usage:
const issue = await getIssuesById(issueId);
- Endpoint:
/issues/:id
- Method:
DELETE
- Description: Deletes a specific issue by its ID.
- Function:
deleteIssueById
- Usage:
const response = await deleteIssueById(issueId);
- Endpoint:
/issues/issues/:id
- Method:
DELETE
- Description: Deletes a specific issue by its issue ID.
- Function:
deleteIssueByIssueId
- Usage:
const response = await deleteIssueByIssueId(issueId);
- Endpoint:
/issues/:id
- Method:
PUT
- Description: Updates the progress of a specific issue.
- Function:
updateIssueProgress
- Usage:
const response = await updateIssueProgress(issueId, progress);
- Endpoint:
/issues/department/:department
- Method:
GET
- Description: Retrieves issues filtered by department.
- Function:
getIssuesByDepartment
- Usage:
const issues = await getIssuesByDepartment(department);
- Endpoint:
/issues/clearance
- Method:
GET
- Description: Retrieves issues filtered by clearance (progress) status.
- Function:
getIssuesByClearance
- Usage:
const issues = await getIssuesByClearance();
- Endpoint:
/issues/month
- Method:
GET
- Description: Retrieves issues filtered by month (Last 6 months data).
- Function:
getIssuesByMonth
- Usage:
const issues = await getIssuesByMonth();
- Endpoint:
/issues/departmentType
- Method:
GET
- Description: Retrieves issues filtered by department type.
- Function:
getIssuesByDepartmentType
- Usage:
const issues = await getIssuesByDepartmentType();
- Endpoint:
/issues/heatmap/getData
- Method:
GET
- Description: Retrieves data for the heatmap visualization.
- Function:
getHeatmapData
- Usage:
const heatmapData = await getHeatmapData();
- Endpoint:
/admin/users
- Method:
GET
- Description: Retrieves a list of all users.
- Function:
getAllUsers
- Usage:
const users = await getAllUsers();
- Endpoint:
/admin/user/:id
- Method:
DELETE
- Description: Deletes a user's information.
- Function:
deleteUserInfo
- Usage:
const response = await deleteUserInfo(userId);
- Endpoint:
/admin/disable/:id
- Method:
POST
- Description: Disables a user's account.
- Function:
disableUserInfo
- Usage:
const response = await disableUserInfo(userId);
- Endpoint:
/admin/enable/:id
- Method:
POST
- Description: Enables a user's account.
- Function:
enableUserInfo
- Usage:
const response = await enableUserInfo(userId);
- Endpoint:
/admin/role/:id
- Method:
GET
- Description: Checks if a user has an admin role.
- Function:
isAdmin
- Usage:
const isAdminUser = await isAdmin(userId);
- Endpoint:
/admin/role/:id
- Method:
PUT
- Description: Changes a user's role.
- Function:
changeRoleById
- Usage:
const response = await changeRoleById(userId, role);
- Endpoint:
/bugs
- Method:
POST
- Description: Submits a bug report.
- Function:
bugReportApi
- Usage:
const bugReport = { description: "Bug description", stepsToReproduce: "Steps to reproduce", expectedOutcome: "Expected outcome", actualOutcome: "Actual outcome" }; const response = await bugReportApi(bugReport);
NOTE: There are 2 services that require you to have a billing account in Google Cloud Platform, which are Heatmap visualization layer and the Place Autocomplete Map API. It is named VITE_GOOGLE_PAID_API in Frontend .env file.
VITE_GOOGLE_API_KEY
: Your Google API key.VITE_GOOGLE_AUTH_DOMAIN
: Your Firebase Auth domain.VITE_GOOGLE_PROJECT_ID
: Your Firebase project ID.VITE_GOOGLE_STORAGE_BUCKET
: Your Firebase storage bucket.VITE_GOOGLE_MESSAGING_SENDER_ID
: Your Firebase messaging sender ID.VITE_GOOGLE_APP_ID
: Your Firebase app ID.VITE_GOOGLE_MEASUREMENT_ID
: Your Firebase measurement ID.VITE_GOOGLE_DATABASE_URL
: Your Firebase database URL.VITE_GOOGLE_PAID_API
: Your Google Paid API key.VITE_BACKEND_SERVER_PORT
: Port for the backend server in production.VITE_BACKEND_SERVER_PORT_DEV
: Port for the backend server in development.VITE_GOOGLE_RUSHIL_ID
: Your Google ID.
PORT
: Port for the backend server (default: 8000).GEMINI_API_KEY
: Your Gemini API key.GOOGLE_API_KEY
: Your Firebase API key.GOOGLE_AUTH_DOMAIN
: Your Firebase Auth domain.GOOGLE_PROJECT_ID
: Your Firebase project ID.GOOGLE_STORAGE_BUCKET
: Your Firebase storage bucket.GOOGLE_MESSAGING_SENDER_ID
: Your Firebase messaging sender ID.GOOGLE_APP_ID
: Your Firebase app ID.GOOGLE_MEASUREMENT_ID
: Your Firebase measurement ID.GOOGLE_DATABASE_URL
: Your Firebase database URL.FIREBASE_TYPE
: Your Firebase type.FIREBASE_PROJECT_ID
: Your Firebase project ID.FIREBASE_PRIVATE_KEY_ID
: Your Firebase private key ID.FIREBASE_PRIVATE_KEY
: Your Firebase private key.FIREBASE_CLIENT_EMAIL
: Your Firebase client email.FIREBASE_CLIENT_ID
: Your Firebase client ID.FIREBASE_AUTH_URI
: Your Firebase Auth URI.FIREBASE_TOKEN_URI
: Your Firebase token URI.FIREBASE_AUTH_PROVIDER_X509_CERT_URL
: Your Firebase Auth provider x509 cert URL.FIREBASE_CLIENT_X509_CERT_URL
: Your Firebase client x509 cert URL.FIREBASE_UNIVERSE_DOMAIN
: Your Firebase universe domain.
- Home Page: Displays a welcome message along with About Us and FAQs.
- User Profile Page: Allows users to view and update their personal information.
- Issue Details Page: Shows detailed information about a selected issue, including images, description, status, and comments.
- Issue Form Page: Displays a form where user can report new issues.
- Heat Map Page: Shows a map with data points of the places where issues are reported.
- Dashboard Page: Displays Bar graph on number of reports per month (last 6 months), shows status on Number of resolved issues, in progress and unresolved issues. Also shows a doughnut graph regarding the type of department per issue.
- Admin User Management Page: Provides administrative features such as managing user accounts (delete or disable) and changing their roles.
- Admin Issue Management Page: Provides administrative features such as monitoring the Issues, deleting it or changing the progress status of the Issues.
- Report Bug Page: Available to Users to report any unusual behaviour in the website, so we can improve the website by fixing the said bug.
- API Endpoints:
/api/issues
: Handles creating, retrieving, updating, and deleting issues./api/users
: Manages user accounts and authentication./api/admin
: Provides admin-specific operations such as retrieving all issues and managing user roles.
- User List: Displays a table with columns for Name, Email, Sign-Up Date, Last Logged-In Date, Role, and Number of Issues Reported.
- Actions: Each row has buttons for deleting and disabling user accounts.
- Issue List: Displays a list of all reported issues with filters for category, status, and date.
- Update Status: Allows admins to change the status of an issue (e.g., pending, in-progress, resolved).
- Detailed View: Provides a detailed view of each issue, including images and tags.
- Reports per Month: A bar graph displaying the number of reports per month for the past 6 months.
- Reports by Type: A doughnut graph displaying the distribution of report types (Road, Electricity, etc.).
- Case Status: Three small sections (green, yellow, red) displaying the number of unresolved cases (red), cases under progress (yellow), and resolved cases (green).