Design a ride tracking screen similar to Uber.
Core requirements:
- Show user location on map
- Show nearby cars
- Update car positions in real time
- Animate movement smoothly
- Show route from pickup to destination
Follow-ups:
- How do you handle frequent updates?
- How do you animate movement?
- How do you avoid re-rendering everything?
- How do you handle thousands of cars?
- How do you cluster markers?
How to Think About It (Framework)
- UI Layer (Map + Markers)
- Data Model (Location data)
- Real-time Updates
- Animation System
- Rendering Optimization
- Caching
- Edge Cases
UI Layer
Main components:
- Map (Google Maps / Mapbox)
- User marker
- Driver markers
- Route polyline
Behavior:
- Pan / zoom
- Marker updates
- Route visualization
Data Model
Each driver:
{
id: "driver1",
lat: 12.9716,
lng: 77.5946,
heading: 120
}Real-time Updates
Use:
- WebSocket (preferred)
- Polling (fallback)
Flow:
- Server sends location updates
- Client updates state
- UI re-renders
Animation System
Problem:
- Markers jumping looks bad
Solution:
- Interpolate positions
Example:
- Old position → New position
- Animate over 300–500ms
Smooth Movement Logic
- Store previous position
- Interpolate frame-by-frame
- Use requestAnimationFrame
Rendering Optimization
Critical part:
- Avoid full re-render
- Update only changed markers
- Use map libraries’ native marker system
Handling Large Scale (Thousands of Cars)
Techniques:
- Marker clustering
- Viewport-based rendering
- Only render visible cars
Marker Clustering
Group nearby cars into one cluster:
- Show count
- Expand on zoom
Caching
- Cache last known positions
- Avoid refetching same region
Performance Optimization
- Throttle updates
- Batch updates
- Use Web Workers (advanced)
- Avoid React re-render loops
Edge Cases
- Network delay
- Sudden jumps in location
- GPS inaccuracies
- Rapid zoom changes
Simple Flow
- Load map
- Fetch nearby drivers
- Start real-time updates
- Animate movement
- Update UI
What Interviewer is Testing
- Real-time thinking
- Performance awareness
- Animation understanding
- Efficient rendering
