Smart City Citizen Service Application

A full-stack web application designed for citizens to report city infrastructure issues (such as potholes, garbage overflows, and broken streetlights) and for city authorities to manage and resolve them efficiently.

Features

• Citizen Portal: Register, login, report issues with images and locations, track complaint status.
• Admin Dashboard: View all complaints, filter by status, update status, delete invalid reports.
• Responsive UI: Built with React and Tailwind CSS for a modern, mobile-friendly experience.

Tech Stack

• Frontend: React, Vite, React Router, Tailwind CSS, Axios, Lucide React
• Backend: Node.js, Express, Multer (file uploads), JSON Web Tokens (auth), bcryptjs
• Database: MySQL

Prerequisites

• Node.js (v16+)
• MySQL Server running locally

Quick Start Setup

Step 1: Database Setup

1. Make sure your local MySQL server is running.
2. The application will automatically create the smart_city_db database and tables upon startup if your MySQL root credentials match the defaults.
   • Default user: root
   • Default password: `` (empty)
   • If your MySQL uses different credentials, create a .env file in the server directory:

     DB_HOST=localhost
     DB_USER=your_mysql_username
     DB_PASSWORD=your_mysql_password
     DB_NAME=smart_city_db
     PORT=5000
     JWT_SECRET=super_secret_key_change_me_in_production

Step 2: Install Dependencies & Run

This project uses concurrently to run both the frontend and backend with a single command.

1. Navigate to the project root:

   cd smart-city

2. Install root dependencies:

   npm install

3. Start both client and server:

   npm run dev

   (This will start the Express API on port 5000, and the React app on port 5173)

4. Open your browser and navigate to http://localhost:5173.

---

Example Test Data Workflow

To fully test the application, follow this sequence:

1. Register an Admin Account

1. Go to http://localhost:5173/register
2. Fill in the details (e.g., Name: Admin Manager, Email: admin@city.gov).
3. Click the Admin role toggle at the bottom before submitting.
4. Provide a password like admin123 and Register.

2. Register a Citizen Account

1. Go to Register page again.
2. Fill in details (e.g., Name: John Doe, Email: john@example.com).
3. Ensure the Citizen role is selected.
4. Provide a password like citizen123 and Register.

3. Log in as a Citizen and Report an Issue

1. Log in with john@example.com.
2. Click Report Issue.
3. Select an issue type like Pothole.
4. Enter description: Large pothole causing traffic slowdowns.
5. Enter location: Main St. intersection heading North.
6. Upload a sample image and click Submit Report.
7. The complaint will now be visible under My Complaints with a Pending status.

4. Manage the Issue as an Admin

1. Logout and log back in with admin@city.gov.
2. The dashboard will show John's new complaint.
3. Click the row to open the details panel.
4. Review the image and description.
5. Click Mark as In Progress.
6. Switch back to the citizen account (optional) to see the updated badge!