CitySync 🏙️ A civic issue reporting and resolution platform that connects citizens with local government authorities. Built for a hackathon using React, TypeScript, Supabase, and Groq AI.

What it does CitySync lets citizens report civic problems (potholes, water leaks, power outages, etc.) and track them through to resolution. Authorities get a dedicated dashboard to manage, prioritize, and update complaint statuses. An AI layer auto-classifies complaints, detects duplicates, and filters spam.

Features Citizen Portal Submit Complaints — pick a category, sub-problem, attach an image, and pin a location on the map (location is mandatory) AI Mode — describe the issue in plain text or upload a photo; Groq AI auto-classifies the category, sub-problem, department, and priority My Complaints — track all submitted reports with live status updates and a progress bar Feedback — once a complaint is marked resolved, citizens can rate the service (1–5 stars) and leave a comment Impact Feed — a localized news feed of resolved civic issues within 15 km, filtered to the last 30 days City Map — interactive map showing complaint hotspots by category and sub-problem, with a heatmap overlay based on report frequency Authority Dashboard View all complaints routed to their department Update complaint status (Pending → In Progress → Resolved) Filter by status and priority View citizen feedback (star rating + comment) on resolved complaints Map view of all complaints Stats panel (total, pending, in-progress, resolved, critical) AI & Validation Engine Groq LLaMA 3.3 70B for complaint classification and spam detection Category cross-validation — warns if the description doesn't match the selected category Duplicate detection — clusters nearby reports of the same type and boosts their priority score instead of creating duplicates Image perceptual hashing — detects reused/stock photos Trust scoring — tracks false reports and can ban repeat offenders Other Light / Dark mode English / Hindi language toggle OTP authentication (phone for citizens, email for authorities) WhatsApp bot integration (redirect with pre-filled complaint)

Tech Stack Layer Technology Frontend React 19, TypeScript, Vite Backend / DB Supabase (PostgreSQL + Auth + Storage) AI Groq API (LLaMA 3.3 70B) Maps Leaflet, React-Leaflet, CARTO tiles Icons Lucide React Deployment Vercel

Getting Started Prerequisites Node.js 18+ A Supabase project A Groq API key Installation

git clone https://github.com/your-username/citysync.git
cd citysync/hackathon
npm install

Environment Variables Create a .env file in the hackathon/ directory:

VITE_GROQ_API_KEY=your_groq_api_key_here

The Supabase URL and anon key are currently hardcoded in src/supabaseClient.ts. For your own deployment, move them to .env:

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your_anon_key_here

Run locally

npm run dev

Build

npm run build

---

Database Schema The app uses the following Supabase tables: Table Purpose profiles Citizen accounts (linked to Supabase Auth) authorities Authority accounts with department assignment reports All submitted complaints feedback Citizen ratings and comments on resolved complaints image_hashes Perceptual hashes for duplicate image detection feedback table setup Run this in your Supabase SQL editor:

create table feedback (
  id uuid primary key default gen_random_uuid(),
  report_id uuid references reports(id) on delete cascade,
  department text not null,
  rating int not null check (rating between 1 and 5),
  comment text,
  created_at timestamptz default now()
);

alter table feedback enable row level security;

create policy "Allow insert" on feedback for insert with check (true);
create policy "Allow read" on feedback for select using (true);

---

Project Structure

hackathon/
├── src/
│   ├── App.tsx                 # Root component, routing between auth/citizen/authority
│   ├── Auth.tsx                # Login & signup (citizen + authority)
│   ├── Dashboard.tsx           # Citizen dashboard (submit, my complaints, impact, map)
│   ├── AuthorityDashboard.tsx  # Authority complaint management
│   ├── MyComplaints.tsx        # Citizen complaint list + feedback form
│   ├── ImpactFeed.tsx          # Resolved issues news feed
│   ├── CityMap.tsx             # Interactive city-wide complaint map
│   ├── MapView.tsx             # Shared map component (Leaflet)
│   ├── LocationPicker.tsx      # Map-based location picker modal
│   ├── aiClassifier.ts         # Groq AI classification logic
│   ├── validationEngine.ts     # Duplicate detection, spam, trust scoring
│   ├── categoryValidator.ts    # Category cross-validation via Groq
│   ├── statusConfig.ts         # Status labels, colors, progress
│   ├── departments.ts          # Department name constants
│   ├── supabaseClient.ts       # Supabase client init
│   ├── ThemeContext.tsx         # Dark/light mode + i18n context
│   └── index.css               # Global styles and design tokens
└── vercel.json                 # Vercel deployment config

---

Deployment The app is deployed on Vercel. To deploy your own instance:

npm install -g vercel   # or use npx vercel
npx vercel              # follow prompts
npx vercel --prod       # promote to production

Add your environment variables in the Vercel dashboard under Settings → Environment Variables.

License MIT