🏙️ CityCare

Smart Civic Complaint Management System

Empowering citizens to build better cities, one complaint at a time

Features • Demo • Installation • Documentation • Contributing

� Table of Contents

🌟 Overview
✨ Key Features
🛠️ Tech Stack
📸 Screenshots
🚀 Installation
🔐 Environment Setup
📁 Project Structure
📄 License
📞 Contact
🙏 Acknowledgments

🌟 Overview

CityCare is a cutting-edge civic complaint management platform that revolutionizes how citizens interact with municipal authorities. Built with modern web technologies, it provides a seamless, transparent, and efficient way to report, track, and resolve civic issues.

🎯 The Problem We Solve

❌ Traditional Systems

📞 Phone-based reporting (inconvenient)
📝 Paper-based tracking (inefficient)
🔒 No transparency in status updates
⏱️ Delayed response times
📊 Poor accountability metrics
🗺️ No location-based insights
📸 Difficult to provide evidence

✅ CityCare Solution

📱 Web-based reporting (24/7 access)
☁️ Cloud-based digital tracking
👁️ Real-time status transparency
⚡ Instant complaint registration
📈 Complete analytics dashboard
🗺️ Interactive heat maps
📸 Multi-photo upload with camera

🎨 Why CityCare?

Smart • Fast • Transparent • Accessible • Accountable

✨ Key Features

� For Citizens

📝 Smart Reporting

🎤 Voice-to-text descriptions
📸 Camera & upload support
📍 GPS location tagging
🚨 Urgent issue marking
🖼️ Multiple photo uploads (5 max)
📱 Mobile-responsive design

📊 Real-time Tracking

👤 Personal dashboard
🗺️ Interactive sitemap
🔥 Heat zone visualization
📜 Complaint history
🔍 Advanced search filters

👤 Account Management

👤 Secure authentication
👤 Profile management
👤 Password updates
👤 Account deletion
👤 Statistics overview

👨‍💼 For Administrators

🎯 Complaint Management

📋 Comprehensive dashboard
✏️ Status updates
📸 Resolution photos
📝 Admin notes
🔄 Bulk operations

👥 Team Collaboration

🎯 Issue assignment
� Personal workload view
🔔 Priority filtering
👨‍💼 Admin management
� Role-based access

📊 Analytics & Insights

⏱️ Real-time statistics
🗺️ Geographic distribution
📉 Resolution metrics
🎯 Priority analysis

🛠️ Tech Stack

Frontend Arsenal 🎨

Technology	Version	Purpose
	19.1.1	UI Framework
	7.9.3	Navigation
	5.51.0	Authentication
	5.0.0	Heat Maps
	1.5.5	Location Picker
	7.65.0	Form Management
	7.1.7	Build Tool

Backend Powerhouse ⚡

Technology	Version	Purpose
	18+	Runtime
	4.18.2	Web Framework
	8.0.0	Database
	Latest	ODM
	4.13.23	Auth Backend
	2.0.0	Media Storage
	1.4.5	File Upload

Additional Tools 🔧

🎤 React Speech Recognition  →  Voice-to-text input
📍 Leaflet.heat             →  Heatmap visualization
🎨 CSS3 Custom Properties   →  Dynamic theming
🔍 ESLint                   →  Code quality
🔄 Nodemon                  →  Hot reload
🌐 CORS                     →  Cross-origin security

📸 Screenshots

🎨 Beautiful User Interface

A glimpse into CityCare's modern, intuitive design

🏠 Landing Page _{Clean, modern landing page with engaging call-to-action}	📊 User Dashboard _{Comprehensive overview of all complaints with live statistics}
📝 Create Complaint _{Intuitive form with photo upload, camera, location picker & voice input}	🗺️ Issue Sitemap & Heat Zones _{Interactive map with heat zones for high-density complaint areas (8+)}
📱 Complaint Details _{Detailed view with real-time status tracking and updates}	🔍 Search & Filter _{Advanced search with multiple filters and sorting options}

👨‍💼 Admin Interface

� Admin Dashboard

_{Powerful dashboard with real-time statistics and complaint management}

👥 Assign Issues

_{Delegate complaints to specific admin team members}

🔧 Manage Admins

_{Add, remove, and manage admin users with role-based access control}

📱 Mobile Responsive Design

_{Fully responsive design optimized for tablets and mobile devices}

🚀 Installation

📋 Prerequisites

Before you begin, ensure you have the following:

Requirement	Version	Download Link
	18+	Download
	Latest	Download
	Account	Sign Up
	Account	Sign Up
	Account	Sign Up
	API Key	Get Key

📦 Quick Start Guide

Step 1️⃣: Clone the Repository

git clone https://github.com/Rayat-Bahra-Professioal-University/DSA_RBPU_Hackathon2025-team-mkkg.git
cd DSA_RBPU_Hackathon2025-team-mkkg

Step 2️⃣: Backend Setup

# Navigate to backend directory
cd backend

# Install dependencies
npm install

# Create environment file
cp .env.example .env

# Edit .env with your credentials (see Environment Setup section)

Step 3️⃣: Frontend Setup

# Navigate to frontend directory (from project root)
cd ../frontend

# Install dependencies
npm install

# Create environment file
cp .env.example .env.local

# Edit .env.local with your credentials (see Environment Setup section)

Step 4️⃣: Start the Application

Open two terminal windows:

Terminal 1 - Backend Server:

cd backend
npm run dev
# Server runs on http://localhost:5000

Terminal 2 - Frontend Development Server:

cd frontend
npm run dev
# Application opens on http://localhost:5173

🎉 That's it! Your application should now be running at http://localhost:5173

# See Environment Setup section below ```

Step 3: Frontend Setup

# Navigate to frontend directory (from project root)
cd ../frontend

# Install dependencies
npm install

# Create .env.local file from example
cp .env.example .env.local

# Edit .env.local file with your credentials
# See Environment Setup section below

🔐 Environment Setup

Backend Environment Variables

Create a .env file in the backend directory with the following variables:

# Server Configuration
PORT=5000

# MongoDB Connection
MONGO_URI=mongodb+srv://username:password@cluster.mongodb.net/citycare?retryWrites=true&w=majority

# Cloudinary (File Upload)
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

# Clerk Authentication
CLERK_SECRET_KEY=sk_test_xxxxxxxxxxxxxxxxxx
CLERK_PUBLISHABLE_KEY=pk_test_xxxxxxxxxxxxxxxxxx

Where to get these:

MongoDB URI
- Sign up at MongoDB Atlas
- Create a cluster
- Click "Connect" → "Connect your application"
- Copy the connection string and replace <username> and <password>
Cloudinary Credentials
- Sign up at Cloudinary
- Go to Dashboard
- Copy Cloud Name, API Key, and API Secret
Clerk Keys
- Sign up at Clerk
- Create a new application
- Go to API Keys
- Copy both Secret Key and Publishable Key

Frontend Environment Variables

Create a .env.local file in the frontend directory:

# Clerk Authentication
VITE_CLERK_PUBLISHABLE_KEY=pk_test_xxxxxxxxxxxxxxxxxx

# Google Maps API
VITE_GOOGLE_MAPS_API_KEY=AIzaSyxxxxxxxxxxxxxxxxxxxxxxxxxx

# Backend API URL
VITE_API_URL=http://localhost:5000/api

Where to get these:

Clerk Publishable Key
- Same key from your Clerk dashboard (use the Publishable Key)
Google Maps API Key
- Go to Google Cloud Console
- Create a new project
- Enable "Maps JavaScript API" and "Geocoding API"
- Create credentials → API Key
- Copy the API key

💻 Usage

Running the Application

1. Start Backend Server

# From backend directory
cd backend
npm run dev

# Server will start on http://localhost:5000

2. Start Frontend Development Server

# From frontend directory (in a new terminal)
cd frontend
npm run dev

# Application will open on http://localhost:5173

First Time Setup

Access the Application
- Open your browser and go to http://localhost:5173
Create Your Account
- Click "Sign Up"
- Register with email or use OAuth (Google, etc.)
For Admin Access
- Register a user account first
- Contact the system administrator to upgrade your role to admin
- Or manually update the role in MongoDB:
```
db.users.updateOne(
  { email: "your@email.com" },
  { $set: { role: "admin" } }
);
```

User Workflow

Login → Dashboard appears
Create Issue → Fill form, add photos, mark location
Track Status → View on dashboard or sitemap
Get Updates → Monitor status changes
Verify Resolution → See resolution photos when closed

Admin Workflow

Login → Admin Dashboard appears
View Complaints → See all issues with filters
Assign Issues → Delegate to team members
Update Status → Change to In Progress/Closed
Upload Resolution → Add photos and notes
Manage Admins → Add/remove admin users

📁 Project Structure

DSA_RBPU_Hackathon2025-team-mkkg/
│
├── backend/                    # Backend API Server
│   ├── src/
│   │   ├── config/
│   │   │   └── db.js          # MongoDB connection
│   │   ├── controllers/
│   │   │   ├── adminController.js         # Admin operations
│   │   │   └── complaintController.js     # Complaint operations
│   │   ├── middleware/
│   │   │   ├── auth.js        # User authentication
│   │   │   └── adminAuth.js   # Admin authentication
│   │   ├── models/
│   │   │   └── Complaint.js   # Mongoose schema
│   │   └── routes/
│   │       ├── admin.js       # Admin routes
│   │       ├── complaints.js  # Complaint routes
│   │       ├── uploads.js     # File upload routes
│   │       └── index.js       # Route aggregator
│   ├── .env                   # Environment variables (gitignored)
│   ├── .env.example           # Environment template
│   ├── package.json           # Dependencies
│   └── server.js              # Entry point
│
├── frontend/                   # React Frontend
│   ├── src/
│   │   ├── components/
│   │   │   ├── layouts/       # Layout components
│   │   │   ├── navbar/        # Navigation bar
│   │   │   └── sidebar/       # Side navigation
│   │   ├── pages/
│   │   │   ├── dashboard/              # User dashboard
│   │   │   ├── admin-dashboard/        # Admin dashboard
│   │   │   ├── create-issue/           # Issue creation form
│   │   │   ├── issue-details/          # Single issue view
│   │   │   ├── view-complaints/        # Issue sitemap
│   │   │   ├── search-complaints/      # Search functionality
│   │   │   ├── profile/                # User profile
│   │   │   ├── delete-account/         # Account deletion
│   │   │   └── home/                   # Landing page
│   │   ├── services/
│   │   │   └── api.js         # API client
│   │   ├── App.jsx            # Main app component
│   │   ├── main.jsx           # Entry point
│   │   └── index.css          # Global styles
│   ├── .env.local             # Environment variables (gitignored)
│   ├── .env.example           # Environment template
│   ├── package.json           # Dependencies
│   └── vite.config.js         # Vite configuration
│
├── README.md                  # This file

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

📞 Contact

👥 Team MKKG

Rayat Bahra Professional University

DSA RBPU Hackathon 2025

💬 Get in Touch

Have questions or suggestions? We'd love to hear from you!

� Email: Contact Us (Update with actual email)

🐛 Found a Bug? Report it here

� Have an Idea? Start a discussion

🙏 Acknowledgments

Special Thanks To

🏛️ Institution

Rayat Bahra Professional University

For organizing the hackathon and providing the platform to innovate

🛠️ Technology Partners

Clerk • MongoDB • Cloudinary

For their robust platforms that power CityCare

🌐 Open Source

React • Node.js • Express

For the amazing frameworks and libraries

Additional Thanks:

🗺️ Google Maps API • 📚 Stack Overflow Community • 💡 GitHub Community

👨‍🏫 Our Mentors • 👨‍💻 All Contributors • 🌟 Everyone who starred this project

💖 Thank You!

Thank you for checking out CityCare!

We believe in the power of technology to make our cities better and more responsive to citizen needs.

Every contribution, feedback, and star helps us move closer to that goal.

Made with ❤️ by Team MKKG

Rayat Bahra Professional University • DSA RBPU Hackathon 2025

Name		Name	Last commit message	Last commit date
.github		.github
backend		backend
frontend		frontend
screenshots		screenshots
.gitignore		.gitignore
README.md		README.md
image.png		image.png

Latest commit

History

Folders and files

Repository files navigation