Vehicle Tracker Challenge

Setup

1. Get a free Mapbox API key:

   • Sign up at https://account.mapbox.com/
   • Copy your default public token
   • It starts with pk.

2. Configure environment:

   cp .env.example .env
   # Edit .env and add your Mapbox token

3. Install and run:

   npm install
   npm run dev

The Challenge

You have real telemetry data from 3 autonomous vehicles conducting survey missions. Each vehicle has 2-3 minutes of flight logged at 200ms intervals.

Your task: Build a interactive vehicle tracking visualization.

Time: ~60 minutes

---

The Data

Location: /public/vehicle-data.json

Structure:

{
  vehicles: [
    {
      id: string,           // e.g., "UAV-001"
      callsign: string,     // e.g., "Alpha"
      telemetry: [
        {
          timestamp: number,        // seconds from mission start
          position: {
            lat: number,           // latitude
            lng: number,           // longitude  
            alt: number            // altitude (meters)
          },
          heading: number,          // degrees (0-360)
          airspeed: number,         // m/s
          px4_mode: number,         // flight mode code
          is_armed: boolean,
          healthy: boolean,
          mission: {
            current_item: number,   // current waypoint
            total_items: number
          }
        }
      ]
    }
  ],
  px4Modes:
    { 
        "0":"MANUAL", 
        "3":"AUTO"
    // ... etc
  }
}

Note: Vehicles launch at different times - check the first timestamp in each vehicle's telemetry.

Type definitions: See src/types.ts

---

Requirements

Tier 1: Core Functionality

Build a web application that:

1. Map Visualization

   • Display all 3 vehicles on an interactive map
   • Use any map library (Mapbox GL, Leaflet, Google Maps, etc.)
   • Clearly differentiate vehicles (colors, icons, labels)

2. Animated Playback

   • As simulation time progresses, update each vehicle's marker position
   • Marker should move along the flight path (following the telemetry data)

---

🎯 Tier 2: Animation & Playback

If you complete Tier 1 with time remaining:

4. Playback Controls

   • Play/Pause button
   • Speed control (1x, 2x, 5x, 10x)
   • Display current simulation time

5. Visual States

   • Flight mode changes affect vehicle appearance
   • Handle vehicles that haven't launched yet
   • Handle vehicles that have landed

---

🚀 Tier 3: Advanced Features (Pick ONE)

If you finish Tier 2, choose one to implement:

A) Performance Optimization

• Display FPS counter
• Maintain smooth 60fps at 10x speed (50 position updates/sec × 3 vehicles)
• Implement position interpolation for smooth movement

B) Historical Flight Trails

• Draw the path behind each vehicle (last 30-60 seconds)
• Fade trail opacity over time
• Efficient rendering (don't redraw everything each frame)

C) Vehicle Information Panel

• Click a vehicle to display:
  • Callsign & ID
  • Current altitude & airspeed
  • Flight mode (show the name, not just the number)
  • Armed status
  • Health status

C) Your Choice

• Surprise us with something creative!

---

Important Notes

• Think out loud during the interview - we want to understand your thought process
• Ask questions if requirements are unclear
• Use whatever libraries/tools you want (or none at all!)
• Don't over-polish - we value working, performant code over pixel-perfect design
• Performance matters - this role focuses on smooth, responsive visualizations under heavy data loads

---

Resources

Mapbox (already in package.json, but optional):

• Free API key: https://account.mapbox.com/
• Docs: https://docs.mapbox.com/mapbox-gl-js/

Alternatives:

• Leaflet: https://leafletjs.com/
• Google Maps: https://developers.google.com/maps/documentation/javascript

Data already loaded in App.tsx - just build on top of the starter code!

---

Questions?

Ask during the interview - we're here to help clarify, not trick you.

Good luck! 🚁