First Responder PWA

A Progressive Web App for emergency responders providing AI-powered operational checklists, real-time team coordination, and situational awareness tools. Built with React, TypeScript, and Azure OpenAI.

🚨 Live Demo

Try the app in action: https://aka.ms/first-responder

✨ Features

• AI-Powered Guidance: Get intelligent, context-aware operational checklists using Azure OpenAI (GPT-5)
• Interactive Checklists: Clickable checklist items that can be used to request specific help
• Emergency Maps: Azure Maps integration with scenario-specific markers and incident locations
• Team Coordination: Real-time team roster with status tracking and location updates
• Operations Log: Live incident feed with timestamped events and severity indicators
• Multi-Organization Support: Customizable branding and protocols for different organizations
• Role-Based Protocols: Specialized guidance for Paramedics, EMTs, Firefighters, Emergency Coordinators, and Search & Rescue teams
• Responsive Design: Mobile-first PWA that works on all devices
• Offline Capable: Progressive Web App features for reliable operation in challenging conditions

📱 Screenshots

The app features multiple views optimized for emergency response scenarios:

🤖 AI-Powered Checklist View Interactive operational checklists with AI-generated guidance. Features context bar showing current role and scenario, with clickable checklist items for detailed assistance.	🗺️ Emergency Map View Azure Maps integration displaying incident locations with scenario-specific markers. Real-time geospatial context for emergency coordination and resource deployment.
👥 Team Roster Management Real-time team coordination dashboard with status tracking, location updates, and role assignments. Visual indicators for team member availability and deployment status.	📋 Operations Log Feed Live incident feed with timestamped events, severity indicators, and comprehensive operational picture. Color-coded entries for different event types and priorities.
⚙️ Settings & Configuration Organization setup interface for role selection and emergency scenario configuration. Supports multiple organizations with custom branding and protocols.

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Azure OpenAI Service subscription
• Azure Maps account

Installation

1. Clone the repository

   git clone https://github.com/aloth/first-responder-pwa.git
   cd first-responder-pwa

2. Install dependencies

   npm install

3. Set up environment variables

   cp .env.example .env

   Edit .env with your Azure credentials:

   VITE_AZURE_OPENAI_ENDPOINT=your_endpoint_here
   VITE_AZURE_OPENAI_API_KEY=your_api_key_here
   VITE_AZURE_OPENAI_DEPLOYMENT_NAME=your_deployment_name_here
   VITE_AZURE_MAPS_KEY=your_maps_key_here

4. Start the development server

   npm run dev

5. Open your browser Navigate to http://localhost:5173

Building for Production

npm run build

The built files will be in the dist/ directory.

🌐 Deployment

Azure Static Web Apps (Recommended)

1. Run the deployment script

   ./deploy_pwa_to_azure.bat

2. Follow the Azure CLI prompts to configure your static web app

Manual Deployment

1. Build the project: npm run build
2. Deploy the dist/ folder to your preferred hosting service

🏥 Emergency Scenarios

The app supports various emergency scenarios with contextual AI guidance:

• Train Collision: Munich Central Station incident
• Power Outage: Madison Square Garden blackout
• Wildfire: Napa County forest fires (default)
• Traffic Accident: Highway 101 multi-vehicle incident
• Chemical Spill: Industrial facility evacuation
• Building Collapse: Gas explosion aftermath
• Active Shooter: University campus situation

👥 Supported Roles

• Paramedic: Advanced life support protocols
• Emergency Medical Technician: Basic life support procedures
• Fire Fighter: Fire suppression and rescue operations
• Emergency Coordinator: Incident command and resource management
• Search and Rescue: Personnel location and extraction

🏢 Multi-Organization Support

The app supports customization for different emergency organizations:

• Custom branding (colors, logos)
• Organization-specific protocols
• Role-specific guidance
• Configurable through nonprofit-config.json

🔧 Configuration

Adding New Organizations

Edit src/nonprofit-config.json to add new organizations:

{
  "organizations": {
    "your-org": {
      "shortName": "Your Org",
      "longName": "Your Organization Name",
      "design": {
        "foregroundColor": "#FFFFFF",
        "backgroundColor": "#your-color",
        "accentColor": "#your-accent",
        "iconUrl": "/path/to/your/icon.svg"
      },
      "roles": ["Custom Role 1", "Custom Role 2"],
      "promptAdditions": {
        "global": "Organization-specific context",
        "roleSpecific": {
          "Custom Role 1": "Role-specific guidance"
        }
      }
    }
  }
}

Environment Variables

Variable	Description	Required
VITE_AZURE_OPENAI_ENDPOINT	Azure OpenAI service endpoint	Yes
VITE_AZURE_OPENAI_API_KEY	Azure OpenAI API key	Yes
VITE_AZURE_OPENAI_DEPLOYMENT_NAME	GPT model deployment name	Yes
VITE_AZURE_MAPS_KEY	Azure Maps subscription key	Yes

🤝 Contributing

We welcome contributions from the community! To get involved, please follow these steps:

1. Fork the repository.
2. Create your feature branch (git checkout -b feature/AmazingFeature).
3. Commit your changes (git commit -m 'Add some AmazingFeature').
4. Push to the branch (git push origin feature/AmazingFeature).
5. Open a Pull Request.

For major changes, please open an issue first to discuss what you would like to change.

📜 License

This project is licensed under the GNU General Public License v3.0. See the LICENSE file for full details.

🙏 Acknowledgments

• Azure OpenAI Service for providing intelligent AI capabilities
• Azure Maps for geospatial services
• Emergency responders worldwide who inspired this project

---

Made with ❤️ for first responders