VDS Frontend - Wildfire Detection System

A React-based web application for monitoring and visualizing wildfire data with interactive maps and real-time updates.

🔥 Features

• Interactive Map Visualization: Real-time wildfire location mapping using Mapbox GL
• Dual User Interface: Separate interfaces for public users and official personnel
• Real-time Data Updates: Live wildfire status monitoring and notifications
• Responsive Design: Mobile-first design with Tailwind CSS
• Social Media Integration: Community updates and social sharing capabilities
• Location-based Services: GPS integration for proximity-based alerts

🛠 Tech Stack

• Frontend Framework: React 18 with TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• Maps: Mapbox GL JS
• State Management: Zustand
• Routing: React Router DOM
• HTTP Client: Axios
• Code Quality: ESLint + Prettier with Airbnb configuration

📦 Installation

1. Clone the repository:

git clone <repository-url>
cd junction

2. Install dependencies:

npm install

3. Set up environment variables:

cp .env.example .env

Configure your Mapbox API token and other required environment variables.

4. Start the development server:

npm run dev

The application will be available at http://localhost:3000

🚀 Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run lint - Run ESLint
• npm run lint:fix - Fix ESLint errors
• npm run format - Format code with Prettier
• npm run preview - Preview production build

🗺 Routes

• / - Splash screen with automatic redirect
• /dashboard - Main public dashboard with wildfire map
• /official - Official personnel login/main page
• /official/dashboard - Official dashboard with enhanced features

📱 Key Components

• MapBox: Interactive map component with marker clustering
• MarkerDetails: Detailed wildfire information display
• BottomDrawer: Slide-up panel for additional information
• LoadingOverlay: Loading states and progress indicators
• Toast: Notification system for alerts and updates

🔧 Configuration

The project uses several configuration files:

• vite.config.ts - Vite build configuration
• tailwind.config.ts - Tailwind CSS customization
• eslint.config.js - ESLint rules and plugins
• tsconfig.json - TypeScript compiler options

🌍 Environment Variables

Create a .env file in the root directory:

VITE_MAPBOX_TOKEN=your_mapbox_token_here
VITE_API_BASE_URL=your_api_base_url

📄 License

This project is private and proprietary.

🤝 Contributing

Please follow the established code style and run linting before submitting changes:

npm run lint:fix
npm run format