CivicIssue Dashboard

A next-generation civic engagement platform empowering municipal staff to efficiently track, visualize, and manage community-reported issues.

🌍 Live Platform: civicissue-dashboard.onrender.com

---

📖 Overview

CivicIssue bridges the gap between citizens and municipal authorities. Built with a robust full-stack architecture, it provides a secure, role-based environment where community members can report local infrastructure or maintenance issues, while authorized city staff gain access to an advanced administration dashboard.

Staff can leverage dynamic data visualization, interactive geographical mapping, and department-level analytic breakdowns to efficiently prioritize and dispatch municipal services.

---

🎬 Live Demo

_{Full platform walkthrough — issue reporting, staff dashboard, map view, and analytics.}

---

✨ Elite Features

• 🔐 Robust Authentication System

  • Multi-provider support: Secure Email/Password & Google OAuth 2.0 integration via Supabase.
  • Strict Role-Based Access Control (RBAC) securely separating community users from staff administrators.
  • Hardened registration flow that validates distinct Staff IDs to prevent unauthorized privilege escalation.
  • Comprehensive, iron-clad forgot password and account recovery system utilizing secure tokenized bridge pages.

• 🗺️ Geospatial Tracking

  • Integrated Leaflet.js map rendering for pinpointing exact coordinates of reported civic incidents.
  • Interactive issue markers optimized for rapid municipal dispatch.

• 📈 Departmental Data Analytics

  • Dedicated analytics suite transforming raw community reports into dynamic, visual charts.
  • High-level metric aggregation to identify infrastructure bottlenecks in real-time.

• 👥 Community Forum

  • Civic discussion board with threaded posts, category filters, trending/recent/popular sort tabs, and live like/comment engagement.

• ⚡ Optimized Full-Stack Architecture

  • High-performance Node.js & Express.js backend.
  • Server-side rendering utilizing EJS for high-speed initial page loads and secure context isolated templates.
  • Real-time persistent data storage backed by Supabase PostgreSQL.
  • Highly responsive, modern UI crafted with TailwindCSS and Bootstrap, featuring a robust multi-page modular carousel system.

---

🛠️ Technology Stack

Architecture Layer	Core Technologies	Purpose
Backend Engine	Node.js, Express.js	Application logic, RESTful API routing, and middleware integration.
Frontend UI	EJS, TailwindCSS, Bootstrap, FontAwesome	Dynamic HTML rendering with reusable layout components and premium responsive styling.
Database & Auth	Supabase, PostgreSQL	Secure BaaS for OAuth logic, hashing, and persistent SQL relational data.
Session Control	express-session	Highly secure, HTTP-only session management and persistence memory.
Geospatial API	Leaflet.js	Open-source interactive geospatial rendering.

---

🏗️ Project Architecture

civic-issue-tracker/
├── 📄 app.js                  # Entry point, core HTTP middleware, & Express server
├── 📄 supabaseClient.js       # Centralized Supabase initialization module
├── 📁 routes/                 # Segregated controller logic
│   ├── userRoutes.js          # Community user designated routes
│   └── staffRoutes.js         # Protected administrative staff routing
├── 📁 views/                  # EJS Template Layer
│   ├── signup/                # Unified authentication portals (Login, UI, Form)
│   └── dashboard/             # Role-gated application interfaces (Map, Analytics)
├── 📁 public/                 # Static assets distribution
│   ├── images/                # Optimized graphical branding
│   └── js/                    # Client-side interactive scripts
├── 📁 assets/                 # Repository media (screenshots, demos)
├── 📄 .env.example            # Environment configuration template
└── 📄 package.json            # Application dependency mappings & scripts

---

🚀 Getting Started

Prerequisites

• Node.js (v18.x or newer strongly recommended)
• A Supabase cloud instance assigned for Authentication and PostgreSQL database operations.

1. Clone & Install

git clone https://github.com/SAPTARSHI-coder/civicissue-dashboard.git
cd civicissue-dashboard
npm install

2. Environment Configuration

Duplicate the provided .env.example template:

cp .env.example .env

Populate your secure deployment credentials inside .env:

SUPABASE_URL=https://your-project-id.supabase.co
SUPABASE_ANON_KEY=eyJhbG... (Your project's anon/public key)
PORT=3000
SESSION_SECRET=a_highly_secure_randomly_generated_string

3. Run Locally

npm start

Access the application at http://localhost:3000.

---

🔒 Security Posture

Vector	Mitigation
CSRF / XSS	Strict server-rendered EJS paired with parameterized database queries
Session Hijacking	HTTP-only cookies prevent malicious JavaScript access
Privilege Escalation	OAuth callback validates authorized staff emails against staff_list before assigning admin role
Credential Exposure	.env excluded via .gitignore; history scrubbed of all leaked secrets

---

📜 License

This project is open-source and available under the MIT License.

---

Engineered for municipal-scale civic operations.
Saptarshi Sadhu — Technical Portfolio