CityFix 🏙️

Public Infrastructure Issue Reporting System

CityFix is a modern, responsive web platform that enables citizens to report and track public infrastructure issues such as potholes, broken streetlights, and road damage. It promotes transparency, accountability, and faster resolution through role-based workflows and geographic visualization.

---

📸 Screenshot

---

🔗 Live Links

• 🌐 Live Site: https://devcat-b12a11.vercel.app
• ⚙️ Backend API: https://city-fix-server.onrender.com

---

🔐 Admin Access (Demo)

For testing and evaluation purposes

• Email: admin@cityfix.com
• Password: Admin123!

---

✨ Key Features

• 🗺️ Interactive Issue Map
  Visualize infrastructure issues on a real-time Leaflet map with status-coded markers.

• 📝 Infrastructure Issue Reporting
  Report city issues with descriptions, images, and location details using OpenStreetMap markers.

• 👥 Role-Based Dashboards
  Separate dashboards for Citizens, Staff, and Admins with specialized workflows.

• 💬 Community Discussion
  Engage with other citizens and city staff directly on issues through the new comment system.

• 📑 Personalized Bookmarking
  Save and track specific issues of interest for quick access in your citizen dashboard.

• 🧑‍🔧 Staff Assignment System
  Admins can assign issues to specific staff members for rapid response and accountability.

• 💎 Premium Membership
  Access and manage multi-district reporting limits and priority handling.

• 🚀 Priority Boosting
  Promote critical issues to the top of city-wide listings for immediate visibility.

• 🔐 Secure JWT Authentication
  Custom authentication flow using JWT, bcrypt hashing, and direct Google OAuth 2.0 integration.

• 📱 Premium Modern UI
  State-of-the-art glassmorphic design and smooth transitions powered by Framer Motion.

---

🛠️ Tech Stack

Frontend

• React (Vite) — Production-grade UI framework
• Tailwind CSS + DaisyUI — Modern utility-first styling
• Framer Motion — Premium animations and micro-interactions
• React-Leaflet — Declarative geographic visualizations

State & Logic

• TanStack Query — High-performance server state management
• React Context — Global state for Bookmarks/Auth

Backend & Services

• JWT (JSON Web Tokens) — Stateless, secure authentication
• Node.js / Express — Scalable API infrastructure
• Stripe — Automated payment processing & invoicing

---

📦 Major Dependencies

• react / react-router-dom
• @tanstack/react-query
• @react-oauth/google — Independent Google OAuth
• leaflet / react-leaflet — Interactive Mapping
• framer-motion — Premium Animations
• axios — Request interceptors for JWT flow

---

🚀 Getting Started

Follow these steps to run the project locally:

# Clone the repository
git clone https://github.com/your-username/city-fix-client.git

# Navigate to the project directory
cd city-fix-client

# Install dependencies
npm install

# Start the development server
npm run dev