CivicPulse

Inspiration

Cities and local communities often rely on scattered reporting channels for problems like potholes, broken streetlights, trash overflow, unsafe sidewalks, water leaks, and fallen trees. These issues affect safety, accessibility, and quality of life, but residents usually do not get clear visibility into whether a report was received, prioritized, or resolved.

CivicPulse was inspired by the idea of making civic issue reporting more transparent, location-aware, and actionable for both residents and administrators.

What it does

CivicPulse is a smart city issue reporting platform where users can submit local community problems with a title, description, category, urgency level, optional image, and map location.

Public users can view reported issues through a public issue list and interactive map. Admins can review reports, update issue statuses, add public updates or private notes, track status history, and view analytics for issue trends.

The platform supports:

• Civic issue reporting with map-based location selection
• Public issue tracking
• Admin moderation and status workflow
• Priority-based high-urgency alerts
• Realtime issue visibility
• Analytics for categories, urgency levels, and resolution progress

How we built it

CivicPulse was built as a full-stack cloud application using Next.js, TypeScript, Supabase, PostgreSQL, Leaflet, OpenStreetMap, and Vercel.

The frontend uses Next.js and Tailwind CSS for a responsive user experience. Supabase provides authentication, PostgreSQL database storage, image storage, realtime updates, and Row Level Security. Leaflet and OpenStreetMap power the geospatial map experience without relying on paid map APIs.

The backend logic includes validated issue creation, role-based admin checks, image upload handling, status history tracking, notification logging, and analytics calculations.

Challenges we ran into

One challenge was making map components work safely with Next.js server-side rendering because Leaflet depends on browser APIs. This was handled using client-only map components and SSR-safe loading patterns.

Another challenge was designing secure access rules so public users can see only public issues, regular users can manage their own reports, and admins can moderate all reports. Supabase Row Level Security and server-side role checks were used to protect these flows.

Image uploads also required careful validation so the platform accepts only supported image types and keeps file size under control.

Accomplishments that we're proud of

We are proud that CivicPulse is more than a basic CRUD app. It combines geospatial reporting, authentication, database security, image storage, admin workflows, realtime updates, analytics, and notification handling into one practical civic-tech platform.

The project demonstrates how a real community issue reporting workflow could be built using free-tier cloud services while still keeping scalability, usability, and security in mind.

What we learned

We learned how important it is to design civic technology around both residents and administrators. A good reporting system needs more than a form; it needs visibility, prioritization, status tracking, and operational workflows.

We also learned how to combine frontend UX, database design, geospatial maps, role-based security, and deployment into a complete full-stack product.

What's next for CivicPulse

Next, CivicPulse could be expanded with smarter issue prioritization, duplicate report detection, neighborhood-level analytics, automated routing to departments, stronger moderation tools, and integrations with municipal systems.

Future improvements could also include email/SMS notifications, mobile-first reporting, advanced geospatial clustering, and AI-assisted issue classification.

Built With

• discord
• github-actions
• leaflet.js
• next.js
• openstreetmap
• recharts
• row-level-security
• supabase-auth
• supabase-postgresql
• supabase-realtime
• supabase-storage
• tailwind-css
• typescript
• vercel
• vitest
• zod