YASSIRAMRAOUI/incident-map-challenge

Live incident map for Morocco, built as a technical challenge. Angular web dashboard with clustered markers, heatmap view, live updates, and filtering. React Native mobile app with map, list, and detail screens. Explores performance at scale, reactive state, and clean handling of loading/empty/error states. # 🗺️ Live Incident Map — Technical Challenge Solution (Web + Mobile) A full-stack incident monitoring application built for operations teams in the control room and field workers in the field. Visualizes ~1,500 live incidents across Morocco in real time with interactive maps, reactive filtering, live streaming feeds, and proper state handling. ``` incident-map-challenge/ ├── web/ # Angular 22 Web Dashboard (MapLibre GL JS + Signals) ├── mobile/ # React Native + Expo SDK 54 Mobile App (React Navigation + Context) ├── incidents.json # Shared dataset (~1,500 incident objects) └── CHALLENGE-2.md # Original challenge specification ``` --- ## 📋 Prerequisites - **Node.js**: `v18.0.0` or higher & **npm** - **Expo Go App**: Installed on mobile device (for testing Mobile version on Android/iOS) - **Google Maps API Key**: Required for Android mobile map rendering --- ## 🚀 Quick Start Instructions ### 1. Web Dashboard (Angular) ```bash cd web npm install npm start # Open localhost ``` ### 2. Mobile App (React Native + Expo SDK 54) ```bash cd mobile npm install npx expo start ``` - Open **Expo Go** on your phone (or Camera app on iOS) and scan the terminal QR code. - If phone and PC are on separate networks: `npx expo start --tunnel` - Clear cache if needed: `npx expo start -c` --- ## 📦 How to Build Standalone Mobile APK (Android) To generate an installable `.apk` file for Android without needing Expo Go: ```bash cd mobile # Option 1: EAS Cloud Build (Easiest) npx eas-cli build -p android --profile preview # Option 2: Expo CLI Local Build npx expo run:android --variant release ``` --- ## 🔑 Google Maps API Key Setup (Mobile Android) Android map rendering requires a Google Maps API Key. 1. Go to **Google Cloud Console** → Create a project. 2. Under **APIs & Services > Library**, search **Maps SDK for Android** and click **Enable**. 3. Go to **APIs & Services > Credentials** → Click **+ Create Credentials > API Key**. 4. Create `mobi …