Care4Street

Fixing our streets, one human touch at a time

Comment 1

Inspiration

Bangalore, India's Silicon Valley, is a city of dreams. But beneath the glittering tech parks and startup offices lies a harsh reality. Every monsoon, our streets become obstacle courses. Potholes swallow vehicles. Broken wires dangle dangerously overhead. Garbage piles grow on street corners. Citizens report these issues to BBMP, but their voices often get lost in bureaucratic labyrinths.

The inspiration came from a simple truth: citizens shouldn't have to beg for their city to work. In O' Henry's short story the new blue dress gift to a young girl by her teacher cascaded to improving the whole city, that was her mirror this is our effort to the Govt

Care4Street was born from this frustration and hope. We wanted to build more than just a reporting app. We wanted to create a bridge between citizens and the city - a transparent, data-driven platform that empowers both. A place where every pothole photo tells a story, every upvote prioritizes what matters, and every status update builds trust.

Because our street belongs to all of us.

What It Does

Care4Street is a full-stack civic technology platform that revolutionizes how citizens report and track infrastructure issues in Bangalore.

For Citizens:

📍 Instant Reporting: Report potholes, broken wires, waste dumps, graffiti, fallen trees, and broken streetlights with GPS location and photos

🗺️ Interactive Map: See all reported issues color-coded on a real-time Mapbox map

👍 Community Upvoting: Upvote existing reports to prioritize the most critical issues

📷 Image Upload: Upload photos directly to AWS S3 with secure presigned URLs

🔄 Real-Time Updates: Track issue status from submission to resolution

For City Officials (BBMP):

🏛️Comprehensive Dashboard: View all reports with statistics, filters, and urgency scoring

⚡ Urgency Scoring: Auto-calculated priority based on upvotes, age, and issue type hazard multiplier (3x for broken wires, 2x for potholes and waste dumps)

📊 Status Management: Update reports through lifecycle - submitted → assigned → in_progress → resolved

📋CSV Export: Export all reports for analysis and reporting

📝 Audit Trail: Complete history of all status changes for transparency

Supported Issue Types:

Issue Type Color Urgency Description 🕳️ Potholes Red High Vehicle damage risk 🎨 Graffiti Yellow Low Vandalism 💡 Broken Streetlights Blue Medium Safety concern 🌳 Fallen Trees Green Medium Blocked roads ⚡ Broken Wires Orange Critical Electrical hazard 🗑️ Waste Dumps Purple High Health hazard

How We Built It

Frontend Built with Next.js 16.2.6 using the App Router, TypeScript, and Tailwind CSS. We used dynamic imports for optimized loading and React Context API for shared state management across components. The map is powered by Mapbox GL JS with custom color-coded markers and popups.

Backend Deployed on Vercel with serverless functions for API routes. All API endpoints are built with Next.js route handlers.

Database Amazon Aurora PostgreSQL with PostGIS extension for geospatial queries

Key database features:

GIST spatial indexes for lightning-fast "find nearby reports" queries (<50ms response)

Unique constraint on upvotes to prevent duplicate voting

Audit_log table for complete transparency

Urgency scoring function with hazard multipliers

Geography data type for accurate distance calculations

Storage AWS S3 with presigned URLs for secure, direct image uploads. Images are publicly readable for display in the app.

Maps Mapbox GL JS with custom styling for Bangalore city center (lat: 12.9716, lng: 77.5946).

Deployment Hosted on Vercel with automatic deployments from GitHub. Environment variables securely managed in Vercel dashboard.

Challenges We Ran Into

1. SSL Encryption for Database Connections Aurora PostgreSQL requires SSL/TLS connections for external traffic. We had to explicitly configure the connection pool with ssl: { rejectUnauthorized: false } in our database utility file - a setting that was missing initially, causing cryptic "no encryption" errors.

2. S3 Presigned URL Upload Implementing secure image uploads to S3 required generating presigned URLs via an API route, then performing a PUT request directly from the browser. We encountered CORS issues that were resolved by properly configuring the S3 bucket's CORS policy to allow localhost:3000 and the Vercel deployment URL.

3. Map Loading Deadlock The map component initially had a rendering deadlock - the loading spinner prevented the map container from rendering, while the map couldn't initialize without the container. We fixed this by always rendering the container div and overlaying the loading state on top.

4. TypeScript Build Errors The pg package lacked TypeScript declarations, requiring installation of @types/pg as a dev dependency for the Vercel build to succeed.

5. Turbopack Cache Corruption During development, Next.js Turbopack occasionally corrupted the cache, requiring complete cleanup (rm -rf .next node_modules/.cache) and restart to resolve.

Accomplishments We're Proud Of

🎯 Built a Complete Civic Solution We didn't just build a reporting app - we built a full lifecycle management platform. From citizen reporting to city official resolution, with transparency at every step.

🗺️ Production-Ready Architecture Our tech stack is genuinely production-ready:

Aurora PostgreSQL with PostGIS for scalable geospatial queries

AWS S3 with presigned URLs for secure image uploads

Vercel for seamless deployment and serverless functions

Next.js 16.2.6 with App Router for modern full-stack development

⚡ Urgency Scoring Algorithm We developed a smart urgency scoring system: $$Urgency=(upvotes×10+days_old×5)×hazard_multiplier$$

Where hazard_multiplier is 3x for broken wires, 2x for potholes and waste dumps. This ensures the most dangerous issues get priority attention.

📊 Professional Dashboard

The BBMP Dashboard isn't just a table - it's a complete management tool with:

7-column stats (total, submitted, assigned, in_progress, resolved, high_urgency, with_images)

Real-time filtering by status

Status management dropdowns

CSV export functionality

Image viewer with full-screen modal

🔒 Security Consciousness We maintained security throughout: Presigned URLs for S3 uploads (no direct public access) Database credentials secured with environment variables Audit log for accountability

🏗️ Complete Full-Stack Implementation Every layer of the application is thoughtfully implemented:

Frontend: Responsive, accessible, mobile-friendly UI with Tailwind CSS Backend: RESTful API routes with proper error handling Database: Optimized schema with spatial indexes and triggers Storage: Secure, scalable image storage Maps: Interactive, visually appealing map integration

🚀 Deployed and Working The app is live, connected to the database, and fully functional at https://care4street.vercel.app - judges can test it immediately without any login.

What We Learned

1. PostGIS is a Game-Changer for Location-Based Apps Using ST_DWithin and spatial indexes made proximity queries lightning fast. We learned that geospatial extensions aren't just fancy features - they're essential for any location-based application.

2. Serverless Architecture Requires Different Thinking Vercel's serverless functions meant rethinking how we handle database connections. Connection pooling, SSL configuration, and timeout handling all required careful consideration.

3. Security Groups Are the Most Common Pitfall The number one issue connecting to cloud databases is networking. Understanding VPC security groups, inbound rules, and public accessibility is critical for any cloud deployment.

4. Error Handling Is Everything Detailed error messages saved us countless hours. Adding console.log statements throughout API routes and database utilities made debugging much faster.

5. Context API is Perfect for Shared State Using React Context API to share refresh triggers between components (Map, Dashboard, ReportModal) created a clean, real-time experience without complex state management libraries.

6. Documentation Pays Off Writing down every environment variable, API endpoint, and deployment step helped us maintain momentum and avoid repeating mistakes.

7. Hackathons Are About Shipping Perfect isn't the goal - functional is. We focused on core features that work reliably rather than adding half-baked features. The result is a polished, working application.

8. Civic Tech Needs Empathy The most powerful features aren't the most technically complex - they're the ones that solve real problems for real people. Upvoting, urgency scoring, and audit logs came from understanding citizen frustration and official needs.

What's Next for Care4Street

Short-Term Enhancements 📱 Progressive Web App: Make the app installable on phones for offline reporting 🔔 Push Notifications: Notify citizens when their report status changes 🤖 AI-Powered Classification: Use AWS Rekognition to auto-classify issue types from photos 🔥 Heatmap View: Show issue density across Bangalore to identify hotspots 🌙 Dark Mode: Better user experience for night-time browsing

Medium-Term Goals 🗣️ Multiple Languages: Support Kannada, Hindi, and Tamil for wider accessibility 📍 Municipal Integration: Connect directly to BBMP's ticketing system 📈 Trend Analysis: Show historical data and improvement trends over time 📱 WhatsApp Integration: Allow reporting via WhatsApp for wider reach 🎯 Gamification: Reward active citizens with badges and recognition

Long-Term Vision 🏙️ Expand Beyond Bangalore: Replicate the platform for other Indian cities 🏛️ Government Adoption: Partner with municipal corporations for official use 💡 Smart City Integration: Feed data into smart city dashboards

🌍 Open Source: Release the platform for other cities globally

📊 Data Analytics: Provide insights to urban planners and researchers

Community Building 👥 Citizen Advisory Board: Form a group of active users to guide development 🗣️ Town Halls: Organize virtual meetings between citizens and BBMP officials 📰 Impact Reports: Publish quarterly reports on issue resolution rates

Built With

Share this project:

Updates