62 lines
1.4 KiB
Markdown
62 lines
1.4 KiB
Markdown
# 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
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### Mapbox (optional)
|
||
|
||
For the interactive map, create a `.env` file:
|
||
|
||
```bash
|
||
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
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
## Build
|
||
|
||
```bash
|
||
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
|
||
```
|