🚀 Fleet Tracking Dashboard

A real-time fleet tracking simulation dashboard built using React and Zustand.
This application processes streaming trip events and updates vehicle states dynamically.

---

📌 Features

• ⏱️ Real-time event simulation with time progression
• ⚡ Speed controls (1x, 5x, 10x) and Pause/Play
• 📊 Live trip updates (speed, fuel, status)
• 🟢 Status badges (Running, Completed, Cancelled)
• 📈 Progress bar for trip completion
• 🔍 Filter trips (All / Running / Completed)
• 📡 Live event feed with latest updates
• 🎨 Clean grid-based responsive UI

---

🧠 How It Works

• Events are processed in chronological order
• A simulation engine advances time and streams events
• Zustand store manages global trip state
• UI updates automatically as events are processed

---

🛠️ Tech Stack

• React (Vite)
• Zustand (state management)
• JavaScript (ES6+)
• CSS (inline styling)

---

📂 Project Structure

src/ ├── components/ │ ├── fleet/TripCard.jsx │ ├── events/EventFeed.jsx │ └── controls/SimulationControls.jsx │ ├── hooks/useSimulation.js ├── store/useFleetStore.js ├── utils/processEvents.js ├── data/ ├── pages/Dashboard.jsx

---

▶️ Running the Project Locally

# Install dependencies
npm install

# Start development server
npm run dev

Then open:
👉 http://localhost:5173

🌐 Live Demo: https://fleet-tracking-dashboard.vercel.app/

📊 Data Source

Trip data is generated using the provided data generator tool.
Each dataset contains realistic event streams for multiple trips.

📬 Submission Notes
All required features from the assessment are implemented
Uses generated dataset (not fallback data)
Focused on clean UI and scalable state management

👤 Author
Vilas Tamrakar