A comprehensive civic reporting mobile web application that enables citizens to report community issues like accidents, medical emergencies, and civil problems while allowing authorities to manage and resolve these reports efficiently.
- Citizen Reporting: Upload photos and report incidents with precise location marking
- Interactive Maps: Real-time incident visualization using Leaflet and OpenStreetMap
- Authority Dashboard: Comprehensive admin panel for managing and resolving reports
- Gamification: Points and rewards system to encourage community participation
- Authentication: Role-based access for citizens and authorities
- Real-time Updates: Live location tracking and incident status updates
- Mobile-First Design: Responsive design optimized for mobile devices
- Hero Section: Main incident reporting interface with community statistics
- Report Categories: Quick access to different incident types (Accidents, Medical, Civil)
- Recent Reports: Display of latest community reports
- Navigation: Bottom navigation for mobile, sidebar for desktop
- Report Management: View, verify, and resolve citizen reports
- Analytics: Community statistics and incident trends
- Status Updates: Mark reports as verified, in-progress, or resolved
- Photo Evidence: View uploaded incident photos with details
- File input-based photo upload (renamed from "Capture Photo" to "Upload Photo")
- Mobile-optimized interface with preview functionality
- Automatic photo compression and validation
- Leaflet-based mapping with OpenStreetMap tiles
- Real-time location tracking with high accuracy
- Incident pin placement with category-specific markers
- Click-to-report functionality for direct incident creation
- Multi-step reporting process with form validation
- Incident categorization and priority selection
- Location confirmation and photo attachment
- Report submission with automatic ID generation
- Role-based login (Citizen/Authority)
- Persistent session management with localStorage
- Demo accounts for testing purposes
- Secure credential validation
- Points tracking and achievement badges
- Community leaderboards and progress indicators
- Reward redemption marketplace
- Gamification elements to encourage participation
- Node.js (version 18 or higher)
- npm or bun package manager
- Modern web browser with geolocation support
-
Clone the repository ```bash git clone cd project-shunya ```
-
Install dependencies ```bash npm install
bun install ```
-
Start the development server ```bash npm run dev
bun run dev ```
-
Open your browser Navigate to
http://localhost:3000to view the application
```bash
npm run build
bun run build
npm start
bun start ```
- Framework: Next.js 15.2.4 with App Router
- Styling: Tailwind CSS v4 with custom design tokens
- UI Components: shadcn/ui component library
- Typography: Inter and Poppins fonts
- Maps: Leaflet with OpenStreetMap tiles
- Icons: Lucide React icons
- State Management: React hooks with localStorage persistence
- Authentication: Custom role-based system
- Deployment: Vercel-optimized
-
Sign Up/Login: Create an account or use demo credentials
- Demo Citizen:
citizen@demo.com/demo123
- Demo Citizen:
-
Report an Incident:
- Click "REPORT INCIDENT" on homepage
- Upload a photo of the incident
- Select location on the interactive map
- Fill in incident details and submit
-
Track Reports: View your submitted reports and earn points
-
View Community Map: See all incidents in your area with filtering options
-
Access Authority Portal: Login with authority credentials
- Demo Authority:
authority@demo.com/admin123
- Demo Authority:
-
Manage Reports:
- View all citizen reports with photos and details
- Verify reports and mark as resolved
- Add response comments and updates
- Delete inappropriate reports
-
Monitor Analytics: Track community statistics and response times
- Interactive Navigation: Zoom, pan, and explore the community map
- Real-time Location: Automatic user location detection and tracking
- Incident Pins: Color-coded markers for different incident types
- Click-to-Report: Click anywhere on map to create new incident reports
- Photo Integration: View incident photos directly from map pins
- Local Storage: All data persists in browser localStorage
- Cross-tab Sync: Real-time updates across multiple browser tabs
- Session Management: Automatic login state restoration
- Incident History: Complete record of all submitted reports
- Email:
citizen@demo.com - Password:
demo123 - Role: Citizen with reporting privileges
- Email:
authority@demo.com - Password:
admin123 - Role: Authority with management privileges
``` project-shunya/ ├── app/ │ ├── page.tsx # Main homepage │ ├── authority/ # Authority dashboard │ ├── layout.tsx # Root layout │ └── globals.css # Global styles ├── components/ │ ├── ui/ # shadcn/ui components │ ├── camera-capture.tsx │ ├── incident-map.tsx │ ├── auth-modal.tsx │ └── ... └── public/ # Static assets ```
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint
The application is optimized for Vercel deployment with automatic builds and previews. Simply connect your repository to Vercel for seamless deployment.
- Responsive Design: Optimized for all screen sizes
- Touch-Friendly: Large buttons and intuitive gestures
- Offline Capability: Works with cached data when offline
- Performance: Optimized loading and smooth animations
Project Shunya - Empowering communities through technology-driven civic engagement.