Real-Time Emergency Incident Reporting Platform
Empowering communities through instant incident reporting, intelligent routing, and coordinated emergency response systems.
Live Demo β’ Report Bug β’ Request Feature
- Overview
- Features
- Tech Stack
- Project Structure
- Getting Started
- Deployment
- API Documentation
- Screenshots
- Contributing
- License
- Contact
CivicAlert is a comprehensive emergency incident reporting and management platform designed to bridge the gap between citizens and emergency services. It enables real-time incident reporting, verification, tracking, and resolution through an intuitive web interface with advanced mapping capabilities.
- Instant Reporting: Report emergencies in seconds with photo, location, and voice notes
- Real-Time Updates: Live incident tracking on interactive maps
- Admin Verification: Multi-level verification system ensures accuracy before dispatch
- Community Engagement: Foster civic participation through transparent incident resolution
- Smart Notifications: Intelligent alert system notifies relevant responders and nearby citizens
The platform provides a comprehensive incident reporting interface that makes emergency reporting quick, accurate, and accessible to everyone.
-
Multi-Format Media Upload
- πΈ Photo upload with drag-and-drop interface or click-to-browse
- π€ Voice note recording for hands-free reporting (up to 60 seconds)
- πΉ Video upload support for detailed incident documentation
- πΌοΈ Image preview before submission with edit/delete options
- π¦ Multiple file upload support (up to 5 files per report)
- β‘ Automatic image compression and optimization
-
Advanced Location Services
- πΊοΈ Real-time GPS location tracking with high accuracy
- π Address autocomplete powered by OpenStreetMap
- π Manual location picker with interactive map interface
- π Address verification and formatting
- π Reverse geocoding for automatic address detection
- π± Mobile device location permission handling
-
Smart Categorization
- π₯ Fire Emergency: Building fires, forest fires, vehicle fires
- π Medical Emergency: Accidents, health emergencies, injuries
- π¨ Crime: Theft, assault, suspicious activity
- ποΈ Infrastructure Issue: Potholes, broken streetlights, damaged roads
- π Natural Disaster: Floods, earthquakes, storms
- π Road Accident: Vehicle collisions, traffic hazards
β οΈ Other: General safety concerns and civic issues
-
Severity Assessment
- π΄ Critical: Immediate life-threatening situations requiring instant response
- π High: Urgent matters needing rapid attention
- π‘ Medium: Important issues requiring timely resolution
- π’ Low: Non-urgent matters for routine handling
-
Detailed Incident Documentation
- βοΈ Rich text description with character count (up to 1000 characters)
- π·οΈ Optional custom tags and keywords
- π€ Anonymous reporting option for sensitive situations
- π Automatic timestamp and date logging
- π’ Unique incident ID generation for tracking
Advanced mapping capabilities provide real-time visualization and geographic analysis of incidents.
-
Dynamic Incident Visualization
- πΊοΈ OpenStreetMap integration with Leaflet.js
- π Color-coded markers based on severity levels
- π― Click markers to view incident summaries
- π Auto-refresh every 30 seconds for live updates
- π Distance calculation between user and incidents
- π¨ Custom marker icons for different incident types
-
Map Interaction Features
- π Zoom controls (zoom in/out/reset)
- π±οΈ Pan and drag to explore areas
- π Center map on user location
- π― Search location by address or coordinates
- π Measure distance tool
- π Toggle between map styles (street/satellite)
-
Filtering and Search
- π Filter by incident type, severity, status
- π Date range filtering
- π Radius-based search (1km, 5km, 10km, 20km)
- π·οΈ Tag-based filtering
- πΎ Save custom filter presets
-
Geographic Clustering
- π Automatic clustering for dense areas
- π’ Cluster count badges
- β‘ Smooth zoom animations
- π Heat map view option
A powerful control center for managing incidents, users, and system operations.
-
Incident Management
- π View all incidents in list or grid view
- π Advanced search and filtering system
- π Sort by date, severity, status, location
- βοΈ Edit incident details inline
- ποΈ Archive or delete inappropriate reports
- π Bulk operations (verify multiple, update status)
- π Incident workflow automation
-
Verification System
- β
Multi-level verification workflow:
- Step 1: Initial review for validity
- Step 2: Cross-reference with other reports
- Step 3: Contact verification (optional)
- Step 4: Final approval
- π€ AI-powered duplicate detection
- πΈ Image authenticity verification
- π Link related incidents
- π Credibility scoring system
β οΈ Flag suspicious reports- π₯ Assign to specific admin teams
- β
Multi-level verification workflow:
-
Status Tracking
- π Reported: New incident submitted by user
- π Verified: Confirmed legitimate by admin
- βοΈ In Progress: Emergency response in action
- β Resolved: Issue successfully addressed
- β Rejected: Invalid or duplicate report
- π¦ Archived: Historical record
-
Analytics Dashboard
- π Real-time statistics and metrics
- π Incident trends and patterns
- π Geographic heat maps
- β±οΈ Average response time tracking
- π₯ User engagement metrics
- π Resolution rate over time
- π Daily/weekly/monthly reports
- π€ Export data to CSV/PDF
-
Admin Tools
- π§ System configuration settings
- π₯ User management and roles
- π« Ban/suspend problematic users
- π’ Send mass notifications
- ποΈ Category management
- π¨ Customize severity levels
- π Incident templates
Real-time communication between citizens, admins, and emergency responders.
-
Incident-Specific Conversations
- π¬ Thread-based messaging per incident
- π€ User-to-admin direct messaging
- π₯ Multi-party conversations for complex incidents
- π Attach files and images to messages
- π Share incident links within conversations
- π Pin important messages
-
Real-Time Features
- β‘ Instant message delivery with WebSocket
- β Read receipts and typing indicators
- π Push notifications for new messages
- πΎ Automatic message history
- π Search within conversations
- π€ Message delivery status
-
Admin Communication Panel
- π¬ Unified inbox for all conversations
- π’ Unread message counters
- π― Priority message flagging
- π Conversation filtering by incident
- π·οΈ Tag conversations for organization
- π Response time analytics
- π€ Quick response templates
-
User Messaging Dashboard
- π± Mobile-responsive message interface
- π Auto-refresh for new messages
- π Message timestamp and history
- π Desktop and mobile notifications
- βοΈ Email notifications (optional)
- π Request callback feature
Intelligent notification system that keeps everyone informed in real-time.
-
User Notifications
- π Real-time push notifications
- π§ Email alerts (configurable)
- π± SMS notifications (optional)
- π Location-based proximity alerts
- π Notification preferences dashboard
- π Do not disturb mode
- β° Schedule quiet hours
-
Alert Types
- π¨ Emergency Alert: Critical incidents nearby
- β Status Update: Incident status changes
- π¬ New Message: Admin response received
- β Verification: Report verified
- π Achievement: Milestone reached
- π’ Public Announcement: Community-wide alerts
β οΈ Warning: Weather or safety advisories
-
Public Emergency Alerts
- π‘ Broadcast to users within radius
- π― Severity-based alert prioritization
- πΊοΈ Map-based alert visualization
- β° Automatic expiration
- π’ Custom alert messages
- π Audio alert option
- π Call-to-action buttons
-
Notification Management
- β Mark as read/unread
- ποΈ Delete or archive
- π Search notification history
- π Notification statistics
- βοΈ Granular notification settings
- π¨ Priority color coding
- π± Mobile app integration ready
Comprehensive user profiles and account management system.
-
Authentication & Security
- π Firebase Authentication integration
- π§ Email/password authentication
- π Social login (Google, Facebook, Twitter)
- π± Phone number verification
- π Two-factor authentication (2FA)
- π Password reset and recovery
- π‘οΈ Account security monitoring
- π« Brute force protection
-
Role-Based Access Control
- π€ Citizen: Report and view incidents
- π‘οΈ Admin: Verify and manage incidents
- π Super Admin: Full system access
- π§ Moderator: Content moderation
- π Analyst: Read-only access to analytics
- π¨ Emergency Responder: Priority access
- π’ Department Head: Team management
-
Profile Management
- π€ Personal information (name, email, phone)
- πΈ Profile photo upload and cropping
- π Default location settings
- π Saved addresses (home, work)
- π Notification preferences
- π Language and region settings
- π¨ Theme preferences (light/dark)
- π Privacy settings
-
Activity Tracking
- π Incident submission history
- β Resolved incidents count
- π¬ Message activity
- π Achievements and badges
- β Community reputation score
- π Engagement metrics
- π Account creation date
- π Last activity timestamp
-
User Statistics Dashboard
- π Personal impact metrics
- π― Reports by category breakdown
- π Resolution success rate
- β±οΈ Average response time received
- π Achievement progress
- π₯ Community ranking
- π Activity calendar
- π Contribution graphs
Comprehensive data visualization and reporting tools.
-
Personal Impact Dashboard
- π Total incidents reported (lifetime)
- β Verified reports percentage
- π― Resolved incidents count
- β‘ Active incidents tracking
- β±οΈ Average response time
- π₯ Community impact (people helped)
- π Reports this month/week
- π Achievement milestones
-
Category Analysis
- π Reports by category pie chart
- π Trend analysis over time
- π₯ Most reported issue types
- π Category distribution by location
- π Category resolution rates
- β±οΈ Average resolution time per category
-
Severity Breakdown
- π΄ Critical incidents count
- π High priority reports
- π‘ Medium severity issues
- π’ Low priority matters
- π Severity distribution graph
- π Severity trends
-
Monthly Trends
- π 6-month reporting trend chart
- π Month-over-month comparison
- π Growth rate analysis
- π― Peak reporting days/times
- π Seasonal patterns
-
Achievement System
- π Quick Reporter: 10+ verified reports
- π‘οΈ Community Guardian: 15+ resolved incidents
- β Top Contributor: Monthly leader
- π Early Adopter: First 100 users
- π Platinum Member: 50+ verified reports
- π₯ Rapid Responder: Quick reporting streak
- π Civic Hero: 100+ total reports
Enterprise-grade security measures to protect user data and system integrity.
-
Data Protection
- π End-to-end encryption for sensitive data
- π‘οΈ SSL/TLS for all communications
- π Secure password hashing (bcrypt)
- πΎ Encrypted database storage
- π API key authentication
- π« SQL injection prevention
- π‘οΈ XSS attack protection
- π CSRF token validation
-
Access Control
- π JWT-based authentication
- π€ Session management
- β° Automatic session timeout
- π Role-based permissions
- π Audit logging
- π« IP blacklisting
- β‘ Rate limiting
-
Privacy Compliance
- π GDPR compliant data handling
- π User data anonymization options
- π Comprehensive privacy policy
- π Clear terms of service
- ποΈ Right to data deletion
- π€ Data export functionality
- π Transparent data usage
- π€ Anonymous reporting option
-
System Security
- π§ Regular security audits
- π Automatic security updates
- π‘οΈ DDoS protection
- π Vulnerability scanning
- π Security monitoring
- π¨ Incident response plan
- πΎ Regular backups
- π Disaster recovery
Thoughtful design elements that enhance usability and accessibility.
-
Responsive Design
- π± Mobile-first approach
- π» Desktop optimized layouts
- π² Tablet-friendly interface
- π Adaptive UI components
- β‘ Fast page load times
- π¨ Consistent design system
- πΌοΈ Progressive image loading
-
Performance Optimization
- β‘ Lazy loading for images
- π¦ Code splitting
- π Caching strategies
- π CDN integration
- π Lighthouse score optimization
- π¨ Minimal bundle size
- βοΈ Server-side rendering
-
Accessibility
- βΏ WCAG 2.1 AA compliant
- β¨οΈ Keyboard navigation support
- π Screen reader compatibility
- π¨ High contrast mode
- π Adjustable text sizes
- π― Focus indicators
- π£οΈ Voice command support (planned)
-
Internationalization
- π Multi-language support (planned)
- πΊοΈ Locale-based formatting
- π Regional date/time formats
- π± Currency localization
- π Timezone handling
- Framework: Next.js 16.1.1 (React 19.2.3)
- Language: TypeScript 5.x
- Styling: Tailwind CSS 4
- UI Components: Custom components with Lucide React icons
- Maps: Leaflet + React-Leaflet
- Authentication: Firebase Auth
- HTTP Client: Fetch API
- Deployment: Vercel
- Framework: NestJS (Node.js)
- Language: TypeScript
- Database: MongoDB with Mongoose ODM
- Real-Time: Socket.IO for WebSocket connections
- Authentication: JWT + Firebase Admin SDK
- File Upload: Multer for multipart/form-data
- Deployment: Render
- Version Control: Git
- Code Editor: VS Code recommended
- Package Manager: npm
- Linting: ESLint
- API Testing: Postman/Thunder Client
CivicAlert/
βββ frontend/ # Next.js Frontend Application
β βββ app/ # App Router (Next.js 13+)
β β βββ components/ # Reusable React components
β β β βββ Navbar.tsx
β β β βββ Footer.tsx
β β β βββ Hero.tsx
β β β βββ IncidentCard.tsx
β β β βββ IncidentMap.tsx
β β β βββ MapPreview.tsx
β β β βββ LocationPicker.tsx
β β β βββ AlertNotifications.tsx
β β β βββ ProfileMenu.tsx
β β β βββ ...
β β βββ admin/ # Admin-only pages
β β β βββ page.tsx # Admin dashboard
β β β βββ profile/
β β β βββ communication/
β β β βββ public-alerts/
β β βββ dashboard/ # User dashboard
β β β βββ page.tsx
β β β βββ messages/
β β β βββ alerts/
β β βββ report/ # Incident reporting
β β β βββ page.tsx
β β βββ incidents/ # Public incidents view
β β β βββ page.tsx
β β βββ incident/ # Incident details
β β β βββ [id]/
β β βββ statistics/ # User statistics
β β β βββ page.tsx
β β βββ login/ # Authentication
β β β βββ page.tsx
β β βββ signup/
β β β βββ page.tsx
β β βββ profile/ # User profile
β β β βββ page.tsx
β β βββ privacy/ # Privacy policy
β β β βββ page.tsx
β β βββ terms/ # Terms of service
β β β βββ page.tsx
β β βββ layout.tsx # Root layout
β β βββ page.tsx # Landing page
β β βββ globals.css # Global styles
β βββ lib/ # Utility libraries
β β βββ AuthContext.tsx # Authentication context
β β βββ authService.ts # Auth helper functions
β β βββ firebase.ts # Firebase configuration
β β βββ config.ts # API configuration
β βββ public/ # Static assets
β βββ next.config.ts # Next.js configuration
β βββ tailwind.config.js # Tailwind CSS configuration
β βββ tsconfig.json # TypeScript configuration
β βββ package.json # Frontend dependencies
β
βββ backend/ # NestJS Backend Application
β βββ src/
β β βββ incidents/ # Incident management module
β β β βββ incidents.controller.ts
β β β βββ incidents.service.ts
β β β βββ incidents.module.ts
β β β βββ schemas/
β β β βββ incident.schema.ts
β β βββ alerts/ # Alert system module
β β β βββ alerts.controller.ts
β β β βββ alerts.service.ts
β β β βββ alerts.module.ts
β β β βββ schemas/
β β βββ communication/ # Messaging module
β β β βββ communication.controller.ts
β β β βββ communication.service.ts
β β β βββ communication.module.ts
β β β βββ schemas/
β β βββ profile/ # User profile module
β β β βββ profile.controller.ts
β β β βββ profile.service.ts
β β β βββ profile.module.ts
β β β βββ schemas/
β β βββ auth/ # Authentication module
β β βββ app.module.ts # Root module
β β βββ main.ts # Application entry point
β βββ scripts/ # Database setup scripts
β β βββ setup-database.js
β βββ nest-cli.json # NestJS CLI configuration
β βββ tsconfig.json # TypeScript configuration
β βββ package.json # Backend dependencies
β
βββ README.md # Project documentation
βββ .gitignore # Git ignore rules
Before you begin, ensure you have the following installed:
- Node.js >= 18.x
- npm >= 9.x
- MongoDB >= 6.x (local or Atlas)
- Git
- Firebase Account (for authentication)
-
Clone the repository
git clone https://github.com/yourusername/civicalert.git cd civicalert/CivicAlert -
Install Frontend Dependencies
cd frontend npm install -
Install Backend Dependencies
cd ../backend npm install
Create a .env.local file in the frontend/ directory:
# API Configuration
NEXT_PUBLIC_API_URL=http://localhost:3001
# Firebase Configuration
NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_measurement_idCreate a .env file in the backend/ directory:
# Server Configuration
PORT=3001
NODE_ENV=development
# MongoDB Configuration
MONGODB_URI=mongodb://localhost:27017/civicalert
# OR for MongoDB Atlas:
# MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/civicalert?retryWrites=true&w=majority
# Firebase Admin SDK
FIREBASE_PROJECT_ID=your_project_id
FIREBASE_CLIENT_EMAIL=your_service_account@your_project.iam.gserviceaccount.com
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nYour_Private_Key\n-----END PRIVATE KEY-----\n"
# CORS Configuration
CORS_ORIGIN=http://localhost:3000
# JWT Configuration (Optional)
JWT_SECRET=your_jwt_secret_key
JWT_EXPIRES_IN=7d
# File Upload Configuration
MAX_FILE_SIZE=10485760 # 10MB in bytes
UPLOAD_PATH=./uploadsIf using local MongoDB:
# macOS/Linux
mongod
# Windows
"C:\Program Files\MongoDB\Server\6.0\bin\mongod.exe"Or use MongoDB Atlas (cloud database).
cd backend
npm run start:devBackend will be available at: http://localhost:3001
cd frontend
npm run devFrontend will be available at: http://localhost:3000
Initialize database collections and indexes:
cd backend
node scripts/setup-database.js-
Push to GitHub
git add . git commit -m "Deploy to production" git push origin main
-
Connect to Vercel
- Go to vercel.com
- Import your GitHub repository
- Select the
frontenddirectory as root - Configure environment variables (same as
.env.local)
-
Deploy
- Click "Deploy"
- Vercel will automatically build and deploy
- Your site will be live at:
https://your-project.vercel.app
-
Create Render Account
- Sign up at render.com
-
Create New Web Service
- Connect your GitHub repository
- Select the
backenddirectory - Set build command:
npm install && npm run build - Set start command:
npm run start:prod
-
Configure Environment Variables
- Add all backend environment variables
- Update
MONGODB_URIto your production database - Update
CORS_ORIGINto your Vercel URL
-
Deploy
- Render will build and deploy automatically
- Your API will be live at:
https://your-backend.onrender.com
-
Update Frontend API URL
- In Vercel, update
NEXT_PUBLIC_API_URLto your Render backend URL - Redeploy frontend
- In Vercel, update
Local: http://localhost:3001
Production: https://civicalert-fm6x.onrender.com
| Method | Endpoint | Description | Auth Required |
|---|---|---|---|
| GET | /incidents |
Get all incidents | No |
| GET | /incidents/:id |
Get incident by ID | No |
| POST | /incidents |
Create new incident | Yes |
| PATCH | /incidents/:id |
Update incident | Yes (Admin) |
| DELETE | /incidents/:id |
Delete incident | Yes (Admin) |
| POST | /incidents/:id/check-duplicates |
Check for duplicate incidents | Yes (Admin) |
| Method | Endpoint | Description | Auth Required |
|---|---|---|---|
| GET | /alerts/user/:userId |
Get user alerts | Yes |
| GET | /alerts/user/:userId/unread-count |
Get unread count | Yes |
| PATCH | /alerts/:id/read |
Mark alert as read | Yes |
| POST | /alerts/public |
Create public alert | Yes (Admin) |
| Method | Endpoint | Description | Auth Required |
|---|---|---|---|
| GET | /profile/user/:userId |
Get user profile | Yes |
| GET | /profile/admin/:userId |
Get admin profile | Yes (Admin) |
| PATCH | /profile/user/:userId |
Update user profile | Yes |
| PATCH | /profile/admin/:userId |
Update admin profile | Yes (Admin) |
| Method | Endpoint | Description | Auth Required |
|---|---|---|---|
| GET | /communication/messages/:incidentId |
Get incident messages | Yes |
| POST | /communication/messages |
Send message | Yes |
| PATCH | /communication/messages/:id/read |
Mark message as read | Yes |
Create Incident
curl -X POST http://localhost:3001/incidents \
-H "Content-Type: application/json" \
-H "Authorization: Bearer YOUR_TOKEN" \
-d '{
"type": "Fire",
"description": "Building fire at Main Street",
"severity": "CRITICAL",
"location": {
"latitude": 40.7128,
"longitude": -74.0060,
"address": "123 Main St, New York, NY"
}
}'Contributions are welcome! Please follow these steps:
- Fork the Project
- Create your Feature Branch
git checkout -b feature/AmazingFeature
- Commit your Changes
git commit -m 'Add some AmazingFeature' - Push to the Branch
git push origin feature/AmazingFeature
- Open a Pull Request
- Follow TypeScript best practices
- Use meaningful variable and function names
- Write clean, readable code with comments
- Test your changes thoroughly
- Update documentation as needed
If you find a bug, please open an issue with:
- Clear bug description
- Steps to reproduce
- Expected vs actual behavior
- Screenshots if applicable
- Environment details (OS, browser, versions)
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js - React Framework
- NestJS - Backend Framework
- MongoDB - Database
- Firebase - Authentication
- Leaflet - Interactive Maps
- Tailwind CSS - Styling
- Vercel - Frontend Hosting
- Render - Backend Hosting
- Lucide Icons - Icon Library
- Mobile app (React Native)
- SMS notifications
- Email alerts
- Multi-language support
- Dark mode
- Advanced analytics dashboard
- Integration with emergency services APIs
- Social media sharing
- Incident heat maps
- AI-powered incident categorization
- Voice-to-text incident reporting
- Offline support with PWA
Made with β€οΈ for safer communities
β Star this repo if you find it useful!