This documentation describes the frontend architecture of the IgnisMap React application, including component hierarchy, state management patterns, routing structure, and Progressive Web Application (PWA) features.

IgnisMap is built as a single-page React application with a progressive user flow and lazy-loaded components 1 . The main application manages the user journey through three distinct phases: organization setup, zone configuration, and operational dashboard 2 .

graph TD
    App["App.tsx<br/>Main Application Root"] --> Router["React Router<br/>Route Management"]
    App --> ContextLayer["Context Providers Layer"]
    App --> StateManagement["Application State<br/>organizationConfig<br/>monitoringZones<br/>currentStep"]
    
    Router --> WelcomeRoute["/ Route<br/>Conditional Rendering"]
    Router --> BiodiversityRoute["/biodiversity Route<br/>BiodiversityAnalysis"]
    Router --> CatchAllRoute["/* Route<br/>Navigate to /"]
    
    WelcomeRoute --> WelcomeScreen["WelcomeScreen<br/>React.lazy()"]
    WelcomeRoute --> ZoneConfiguration["ZoneConfiguration<br/>React.lazy()"]
    WelcomeRoute --> EmergencyDashboard["EmergencyDashboard<br/>React.lazy()"]
    
    ContextLayer --> MicrosoftAIProvider["MicrosoftAIProvider<br/>AI Services Context"]
    ContextLayer --> EmergencyProvider["EmergencyProvider<br/>Emergency Data Context"]
    ContextLayer --> WeatherProvider["WeatherProvider<br/>Weather Data Context"]
    ContextLayer --> AlertProvider["AlertProvider<br/>Alert Management Context"]
    
    App --> LoadingSpinner["LoadingSpinner<br/>Suspense Fallback"]
    App --> AppInsights["appInsights<br/>Azure Application Insights"]

The application uses React Context to provide global state management across components 3 . Four main context providers wrap the entire application:

• MicrosoftAIProvider: Azure AI services integration
• EmergencyProvider: Emergency operations data
• WeatherProvider: Weather data and forecasting
• AlertProvider: Alert management and notifications

The application implements code splitting through React's lazy loading mechanism to optimize initial page load performance 1 . Heavy components are loaded on-demand:

const WelcomeScreen = React.lazy(() => import('./pages/WelcomeScreen'))
const ZoneConfiguration = React.lazy(() => import('./pages/ZoneConfiguration'))
const EmergencyDashboard = React.lazy(() => import('./pages/EmergencyDashboard'))
const BiodiversityAnalysis = React.lazy(() => import('./pages/BiodiversityAnalysis'))

The loading component provides visual feedback during transitions 4 .

The application uses a responsive layout system with a unified navigation header that adapts to different screen sizes 5 . The Layout component provides consistent navigation:

• Dashboard (/) - Home icon
• Mapa (/map) - MapIcon
• Alertas (/alerts) - AlertTriangle
• Clima (/weather) - Cloud
• Biodiversidad (/biodiversity) - Leaf
• Configuración (/settings) - Settings

The navigation system implements active state highlighting based on the current route 6 and full mobile support with hamburger menu 7 .

The application implements a hybrid state management approach combining local component state with React Context for global state. The main state variables include:

The application defines several key TypeScript interfaces:

interface OrganizationConfig {
  name: string
  type: 'firefighters' | 'medical' | 'police' | 'civil_protection' | 'other'
  contactInfo: {
    phone: string
    radio: string
    email: string
  }
  capabilities: string[]
}

The application is configured as a PWA with the following features 8 :

• Name: IgnisMap - Predicción de Incendios
• Display mode: standalone
• Theme: #dc2626 (ember red)
• Icons: 192x192 and 512x512 PNG
• Caching: Weather APIs and Azure Maps

The build system uses Vite with specific optimizations 9 :

• react-vendor: React core
• ui-vendor: UI components (Lucide React)
• map-vendor: Leaflet and map components
• azure-vendor: Azure services
• chart-vendor: Recharts
• geo-vendor: Geospatial libraries

The application uses Tailwind CSS with a custom theme. The Ember color palette includes:

• Navy: #41436A
• Burgundy: #974063
• Coral: #F54768
• Peach: #FF9677

Custom component classes are defined for consistent styling across the application.

• React 18.2.0: Main framework
• React Router DOM: Routing
• Azure SDK: Azure services integration
• Leaflet: Interactive maps
• Lucide React: Iconography
• Recharts: Data visualization
• Tailwind CSS: Styling framework

Notes

This frontend architecture is designed to be scalable, maintainable, and performance-optimized. The implementation of lazy loading, PWA features, and code splitting ensures fast load times, while the context architecture provides clean and predictable state management.

Wiki pages you might want to explore:

• IgnisMap Overview (seojedaperez/IgnisMap)
• Frontend Architecture (seojedaperez/IgnisMap)