Enterprise-Grade Civic Issue Management Platform
A state-of-the-art administrative command center designed to optimize municipal operations, enhance civic engagement, and accelerate issue resolution through real-time geospatial analytics.
The CityFix Admin Dashboard is a high-performance, real-time web application serving as the central nervous system for municipal authorities. Built with a modern Next.js architecture, it provides city officials with a "single pane of glass" to monitor, dispatch, and resolve citizen-reported infrastructure issues.
Featuring an Obsidian & Emerald Smart City aesthetic, the dashboard merges cutting-edge glassmorphic design and high-contrast UI with powerful administrative capabilities.
- WebSocket Integration: Instantaneous updates of new reports via Socket.io without manual page refreshes.
-
Kanban-Style Workflow: Effortlessly transition reported issues through custom statuses (Pending
$\rightarrow$ In Progress$\rightarrow$ Resolved). - Incident Prioritization: Automated severity tagging based on user-submitted data.
- Interactive Mapping: Built on Leaflet and OpenStreetMap, providing a bird's-eye view of all civic issues via clustered map visualization.
- Heatmaps & Clustering: Identify recurring problem areas and infrastructure hotspots.
- Location Context: Granular geolocation data attached to every report.
- Performance Metrics: Monitor mean-time-to-resolution (MTTR) and departmental efficiency via Recharts.
- Trend Analysis: Visualize issue categories (e.g., Pothole vs. Lighting) over dynamic time periods.
- Report Generation: Export data layers for internal municipal reporting and compliance.
- Role-Based Access Control (RBAC): Secure routing mechanisms ensuring that only authenticated municipal administrators have system access.
- Server-Side Rendering (SSR): Leveraging Next.js App Router for optimal load times and iron-clad SEO/security.
| Category | Technology |
|---|---|
| Framework | Next.js 15 (App Router) |
| UI Library | React 19 |
| Styling | Tailwind CSS v4, Lucide Icons, clsx, tailwind-merge |
| Mapping | React-Leaflet, Leaflet |
| Real-Time | Socket.io-Client |
| Data Fetching | Axios |
| Data Visualization | Recharts |
| Language | TypeScript |
| Database/ORM | Mongoose (MongoDB) |
| Auth/Storage | Firebase v12 |
- Node.js (v20+ recommended)
- npm or yarn
- Access to the CityFix Backend repository and MongoDB instance.
-
Clone the repository:
git clone https://github.com/ayanadamtew/cityfix-admin.git
-
Navigate to the directory:
cd cityfix-admin -
Install dependencies:
npm install
-
Environment Configuration: Create a
.env.localfile in the root directory and add the required environment variables:NEXT_PUBLIC_API_URL=http://localhost:5000 NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
-
Start the Development Server:
npm run dev
The application will be available at
http://localhost:3000.
src/
├── app/ # Next.js App Router definitions (Pages & Layouts)
│ ├── (auth)/ # Authentication flows (Login/Register)
│ ├── (dashboard)/ # Protected administrative interfaces
│ └── globals.css # Core design tokens and Tailwind configuration
├── components/ # Reusable UI elements
│ ├── ui/ # Granular components (Cards, Buttons, Inputs)
│ └── layout/ # Structural components (Sidebar, Header)
├── lib/ # Utility functions and configurations
│ ├── firebase.ts # Firebase client initialization
│ ├── auth.ts # Authentication helpers
│ └── utils.ts # Generic helpers (e.g., clsx styling)
├── services/ # API interaction layer (Axios wrappers)
├── store/ # State management and context providers
└── types/ # Strict TypeScript interface definitions
The CityFix Admin Dashboard operates on a unique design philosophy: "Obsidian & Emerald".
- Backgrounds: Deep, unsaturated dark grays (
#0a0a0ato#121212) to reduce eye strain during prolonged monitoring sessions. - Accents: Neon and emerald greens to highlight actionable items and positive status indicators.
- Containers: Extensive use of glassmorphism (frosted glass, sub-pixel borders, and soft shadows) to establish a modern, hierarchical depth of field.
This repository is maintained by the CityFix core team. For major changes, please open an issue first to discuss what you would like to change. Ensure all styling aligns with the existing Obsidian & Emerald design system.
This project is licensed under the MIT License - see the LICENSE file for details.
Empowering smarter, safer, and more connected cities.