This project is a real-time, interactive crisis reporting system where users can:
- View nearby crisis incidents (fires, medical emergencies, infrastructure issues, etc.) plotted on a map 🗺️
- See live markers based on urgency level (Critical, High, Medium, Low)
- Track their own location and recent reports
- Search and filter crisis reports
- Zoom and center the map easily with custom controls
Built using React.js, React-Leaflet, Lucide Icons, and TailwindCSS.
- 📍 Map view with custom dynamic markers (color-coded by urgency)
- 📡 User's current location shown on the map
- 🔍 Search and filter through crisis reports
- 🎛️ Zoom in, zoom out, locate me buttons
- 🗂️ Categorized icons (Fire, Medical, Police, Infrastructure, Natural Disaster, etc.)
- ⚡ Animated markers and loading optimization to prevent crashes
- 📱 Responsive design ready for mobile and desktop
- React.js — Frontend Framework
- React-Leaflet — For interactive map and markers
- Leaflet.js — Map engine
- TailwindCSS — For clean styling
- Lucide-React — Beautiful SVG icons
- Framer Motion — Animations for smooth UI interactions
- Vite (optional) — For fast development server
Clone this repo and install dependencies:
git clone https://github.com/PrashantKhatiwada/pulsePoint.git
cd pulsePoint
npm installStart the development server:
npm run devMake sure you have Node.js and npm installed.
src/
├── components/
│ ├── MapView.jsx # Map with markers and user location
│ ├── ReportsList.jsx # Sidebar list of crisis reports
│ └── ui/ # Reusable UI components (Button, Badge, Card, etc.)
├── api/ # (Optional) Fetch reports from backend
├── App.jsx # Main app
└── index.jsx # App entry point
- Map loads centered either at the user's geolocation or a default position (Caldwell, NJ).
- Crisis reports are dynamically fetched or submitted and shown as markers.
- Each marker shows detailed information in a popup.
- The user can locate themselves, zoom the map, and interact with the reports list.
| Map View | Report Popup |
|---|---|
(Replace placeholder links with your real screenshots!)
- Add report submission form (with location picker)
- Real-time WebSocket updates for live crisis monitoring
- Cluster markers when zoomed out
- Auto-fit map bounds to all visible markers
- Add user authentication and roles (admin, volunteer, public)
This project is licensed under the MIT License.
Feel free to use and modify it for your own projects!