Instant search

Replace the in-browser search with the server's: GET /api/stalls?q=… searches names and blurbs. It has to feel instant, show the right results for what's in the box, and live in the URL so a search can be shared and the Back button works. ★★☆

“Somebody said there's a stall with pineapple. Which one was it?”

You'll demo (next class): type "pineapple" quickly: one request after you stop, and Taco Bike. Copy the URL into a new tab: same search, same result. Type, then press Back: the previous search comes back.

The core (start in class if you've connected, the minimum for the demo)

Four things, on top of your connected market. They count when they work with chaos on (control page).

Typing searches on the server: GET /api/stalls?q=, built with URLSearchParams.
Each search aborts the previous one; AbortError never reaches the user or the console.
Debounced: one request once typing pauses for ~250 ms.
Loading (old results dimmed), "No stall matches …", and an error message.

The full feature (finish at home)

What has to work for the demo next class, not how. The core above is part of it.

Requests

GET /api/stalls?q= built with URLSearchParams, combined with the tag filter (?tag=food&q=…).
Debounced: one request once typing pauses for ~250 ms.
Every new search aborts the one in flight (AbortController).

States

Results, "No stall matches …" and an error each render from state; the old results stay visible, dimmed, while a search is loading.
The query and the tag are in the page's URL (?q=pineapple&tag=food), and the page starts from them on load.
Back and Forward restore earlier searches.

Errors

AbortError is never shown to the user and never reaches the console.
A 503 shows a message and keeps the previous results.
Typing faster than the server never shows results for an older query.

New tool: history.replaceState / pushState and the popstate event: change the URL without reloading.

The endpoints you need

Method	Path	Answers
`GET`	`/api/stalls?q=&tag=&sort=`	200 · array, `X-Total-Count` · 400 for an unknown tag

The server answers short queries slowly and long ones fast (more matches to rank): q=t takes about 0.7 s, q=pineapple about 0.1 s. Out-of-order responses are guaranteed.

Edge cases (with chaos on, minutes 38–43)

Type "t", wait half a second, type "aco". What's in the list?
Clear the box: all stalls again, and the URL has no q=.
Open /?q=%3Cb%3E (a query with HTML in it).
Back, Back, Forward.
Chaos on, type, go Offline (DevTools) mid-search.

Stretch, if you're done early

Highlight the matched text in names, without innerHTML.
Keyboard: / focuses the search box, Esc clears it.
Cache: the same query twice in 30 s doesn't hit the network.

Stuck? One hint at a time

Network panel first: is the request sent, with what, and what came back? Then a hint.

Hint 1

Debounce and abort solve two different problems. Which one does each solve, and which one makes the result correct?

Hint 2

replaceState or pushState: should every keystroke be a Back step?

Hint 3

On load, the URL has a query. What runs first: reading it, or the first render?

Traps

Open when something behaves strangely

The list shows the results for "t" while the box says "taco".
"pineapple": the Network panel shows Taco Bike in the response, the page shows nothing (something on the client is still filtering by name).
"Uncaught (in promise) AbortError" in the console.
Back changes the URL but not the list.
The search box and the URL disagree after Back.

Before you start

This brief assumes Connect the market is done: api.js works, the stalls come from the API, loading and errors are handled. Then: Typing sends GET /api/stalls?q=…; with fast typing, earlier ones show (canceled) in the Network panel.

Demo · next class, 3 minutes

Your 3 minutes

The happy path, with the Network panel open next to the page.
Chaos on: the loading state, one failure, and how the page recovers.
One request in code: the call, the status codes you handle, where the state changes.
One bug you hit, and the panel or the message that showed it to you.