Nashik Smart City Management Portal

A full-stack civic engagement platform built with Next.js + Supabase that enables citizens of Nashik to report grievances, submit anonymous crime reports, and explore tourism/spiritual destinations — all within a secure, role-based system.

---

Overview

The Nashik Smart City Management Portal is designed to digitally connect citizens with municipal services. It ensures:

• Transparent grievance tracking
• Secure anonymous crime reporting
• Tourism & spiritual destination discovery
• Role-based admin management
• Dark mode with modern UI

This project follows modern full-stack best practices with strong emphasis on security, performance, and scalability.

---

🛠️ Tech Stack

🔹 Frontend

• Next.js 16 (App Router)
• React 19
• TypeScript
• Tailwind CSS v4
• shadcn/ui + Radix UI
• Lucide React Icons

🔹 Backend & Database

• Supabase
• PostgreSQL
• Row Level Security (RLS)

🔹 Authentication

• Supabase Auth (Email/Password)
• Role-Based Access Control (User/Admin)

🔹 Forms & Validation

• React Hook Form
• Zod

🔹 Data Visualization

• Recharts
• React Day Picker

🔹 Theming

• next-themes
• OKLCH color system

---

Features

👤 Authentication System

• Secure Sign-Up / Sign-In
• Persistent sessions
• Role-based redirection
• Admin & User dashboards

---

Grievance Reporting

• Title, description, category
• Optional photo upload
• Location with coordinates
• Status tracking
• Admin review + notes

---

Crime Reporting (Anonymous)

• Submit incidents anonymously
• Media upload support
• Location tracking
• Investigation status updates
• Admin-only visibility via RLS

---

Tourism & Spiritual Explorer

• Categorized locations
• Visiting hours & entry fees
• Google Maps integration (No API key required)
• Event listings
• Directions & map view buttons

---

🛠️ Admin Dashboard

• View all grievances & crime reports
• Update status
• Add review notes
• View user profiles
• Tab-based management interface

---

Dark Mode

• System preference detection
• Persistent theme storage
• OKLCH-based accessible colors
• Fully theme-aware UI components

---

🗄️ Database Architecture

Tables

Table	Purpose
profiles	User role & metadata
grievances	Citizen complaints
crime_reports	Anonymous crime submissions
tourism_places	Public tourism data
events	Public event listings

---

Row Level Security (RLS)

• Users can access only their own data
• Admins can access all data
• Tourism & events are public read-only
• All security enforced at database level

---

Project Structure

app/
  ├── page.tsx
  ├── sign-in/
  ├── sign-up/
  ├── grievance-reporting/
  ├── crime-reporting/
  ├── tourism-spiritual/
  ├── tourism-explorer/
  ├── admin/dashboard/
  └── my-submissions/

components/
  ├── theme-provider.tsx
  ├── theme-toggle.tsx
  ├── user-menu.tsx
  └── ui/

lib/
  ├── supabase.ts
  ├── maps.ts
  └── utils.ts

---

Environment Variables

Create a .env.local file:

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
POSTGRES_URL=
POSTGRES_PASSWORD=
POSTGRES_USER=
POSTGRES_DATABASE=
POSTGRES_HOST=

---

Development

Install Dependencies

npm install

Run Development Server

npm run dev

Build Production

npm run build

Start Production

npm start

---

Security Highlights

• Database-level Row Level Security (RLS)
• Role-based access control
• Zod input validation
• Supabase session management
• HTTPS enforced via Vercel
• Strict TypeScript typing

---

Performance Optimizations

• Server Components (Next.js App Router)
• Tailwind CSS purge optimization
• Indexed database queries
• CDN delivery via Vercel
• Efficient Supabase queries

---

Deployment

• Hosting: Vercel
• Database: Supabase
• CI/CD: GitHub → Vercel auto-deploy
• Environment: Production & Preview builds

---

Data Flow Example

Grievance Submission Flow

Form → Zod Validation → Supabase Insert → RLS Check
→ Admin Dashboard → Status Update → User Notification

---

Scalability

• PostgreSQL supports large-scale data
• Indexed queries for fast filtering
• Cloud-managed infrastructure
• Ready for file storage expansion (Vercel Blob / Supabase Storage)

---

Future Improvements

• Push notifications
• Real-time updates
• SMS/email alerts
• Analytics dashboard for city authorities
• Mobile app integration
• AI-powered grievance categorization

---

License

This project is built for educational and municipal digital transformation purposes.

---

👨‍💻 Author

• Danny (Om Desale) - Initial development

• Contributors welcome!

• Built as a Smart City civic-tech initiative for Nashik, India.