Practice by building

Design a link shortener (like bit.ly) in three steps. Each step adds one new need.

How it works

1. Drag a part onto the board, or click it to add it.
2. Point at a part and press its +. Pick Arrow (sends requests to) or Dashed arrow (copies data to), then click the part it goes to. You can also drag from the + straight to another part.
3. To remove a part, drag it onto the Bin. To remove an arrow, click it and press the bin.
4. Press Check my design. You get a short list of what works and what to fix.

Press Open full page for a big board: the task on the left, the board in the middle, the parts and the bin on the right.

Your boards are saved in this browser.

Your turn

Step 1 A small link shortenerStep 2 Now it’s popularStep 3 Count every click

Open full page

Step 1: A small link shortener

• People paste a long link and get a short one.
• Opening the short link takes them to the long one.
• About 100 users a day. Keep it simple.

+ Client+ DNS+ CDN+ Load balancer+ API gateway+ App server+ Cache+ Database+ Read replica+ Queue+ Worker+ Object storage+ Search index+ Service

Bin

Add parts from the list above. Then press the + on a part to draw an arrow.

Solid arrow: sends requests toDashed arrow: copies data to

Watch the traffic

Send 10 requests through your board and see where each one goes. Then make a part fail and send them again.

Send

ReadsWritesBackground jobs

Send 10 reads

How requests move

Requests start at the Client and follow your arrows. Reads try a cache first (4 in 5 are found there), then a read replica, then the database. Writes go to the database. Background jobs go on a queue, and a worker saves them. A load balancer skips a part that is down; nothing else can.

Check my designShow an example

In a real interview

Say why you added each part. Practice that out loud: “I added a cache because reads are 100 times more common than writes.”