US-Iran Military Situation Display Dashboard

A production-ready data visualization dashboard with 1920×1080 resolution, dark-themed military-grade UI.

Tech Stack

Build: Vite (React + TypeScript)
Styling: Tailwind CSS
State: Zustand
Charts: echarts, echarts-for-react
Maps: react-map-gl, mapbox-gl
Icons: lucide-react
Font: Orbitron (Google Fonts)

Setup

npm install

Mapbox (optional)

For the interactive map, create a .env file:

cp .env.example .env
# Edit .env and add your Mapbox token from https://account.mapbox.com/access-tokens/

Without a token, the map area shows a placeholder with location labels.

Development

npm run dev

Build

npm run build

Project Structure

src/
├── components/
│   ├── HeaderPanel.tsx   # Top global overview & power index comparison
│   ├── ForcePanel.tsx    # Reusable left/right panel for military forces
│   ├── WarMap.tsx        # Mapbox GL (Persian Gulf center)
│   └── StatCard.tsx      # Reusable number card
├── store/
│   └── situationStore.ts # Zustand store + WebSocket mock logic
├── data/
│   └── mockData.ts       # TypeScript interfaces & initial mock data
├── pages/
│   └── Dashboard.tsx     # Main layout (1920×1080)
├── App.tsx
└── index.css

1.4 KiB Raw Blame History Unescape Escape