Design Uber – Frontend System Design

We’ll walk through the frontend system design for the Uber rider app on the web: the screen where you pick a destination, compare UberX and Comfort prices, request a car, and watch it drive toward you. You’ll see why the map must live outside React, how the trip lifecycle becomes an explicit state machine, and how a driver marker that only gets a new position every four seconds still glides smoothly along the street.

The interviewer is not asking you to build a dispatch system. Matching, pricing, and routing are backend problems. Your job is the part the rider touches: a map that stays at 60fps on a mid-range phone, a request flow that never double-books a car, and a trip screen that tells the truth after a tunnel, a background tab, or a dead socket.

Problem Statement

Design the frontend for a ride-hailing rider app like Uber, on mobile web and desktop web.

Requirements:

• Show the rider’s location on a map and let them set a pickup point
• Search for a destination with... premium content.