Skip to content

README.md

Latest commit

 

History

History
113 lines (74 loc) · 3.36 KB

README.md

File metadata and controls

113 lines (74 loc) · 3.36 KB
Raw

CityFix 🏙️

Public Infrastructure Issue Reporting System

Research & Development

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

CityFix Home

🔗 Live Links

🔐 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