← Over the wire · all materialsBuild · 45 min · individually · demos next class
Build
Connect it, then ship a feature
Individually, against the course's HTTP server: everyone has their own market on it. Step 1 is the same for everyone: the market from Lecture 5 stops reading data.js and loads its vendors from the API. Step 2 is one feature from the briefs below, started in class if there's time and finished at home for the demo next class.
Step 1 · everyone (the 45 minutes)
The rule
Done means done with chaos on. Your work behaves with chaos on, set on the control page harbour-api.lopin.me (every response 1.2 s late, 30 % of them a 503): there is a loading state, every failure says something and recovers, and nothing happens twice.
Step 2 · pick a brief (start in class, finish at home)
Every brief starts from a connected market: your own after step 1, in a new branch and a second pull request to harbour-market-starter. Your feature goes in a new module in starter/js/, imported from main.js, and every request goes through your api.js. Paths are relative to /api: getJSON("/stalls/taco-bike/reviews"); third-party APIs take a full https://… URL. Each brief has four core items: those are the minimum for the demo.
The six briefs (and two spares)
- Brief 1 · ★☆☆Review wallA stall's reviews in a dialog: read, post, validation errors, delete your own.
- Brief 2 · ★★☆Order boardOrder without queueing. The ticket polls until it's ready, then stops.
- Brief 3 · ★★☆Instant searchServer-side search: debounced, aborted, in the URL, Back works.
- Brief 4 · ★★☆Saved on the serverThe ♥ with PUT and DELETE: optimistic, rolled back when it fails.
- Brief 5 · ★★★Vendor adminCreate, edit, remove stalls with a Bearer token. Five ways to say no.
- Brief 6 · ★★☆Weather for the nightA third-party API (Open-Meteo), independent requests, a cache with an expiry.
- Spare · ★☆☆Prices in your currencyToday's rates from a public API, formatted with Intl.NumberFormat.
- Spare · ★★☆Load morePagination with limit and page, the total and the next page from the headers.
How you work
- Your own laptop, fork and market: everyone builds and hands in their own pull request. Keep the brief and the Network panel open next to the page.
- Minute 12 is the checkpoint: step 1's console check passes (
getJSON("/stalls") gives 10 stalls). Not there? Usually setup (the username missing from API, live-server not running, the server not running): ask.
- When something fails: the request in the Network panel (Headers, Payload, Response), then api.html, then a hint, then the teacher.
Your market
Everyone has their own copy of the market on the course server: https://harbour-api.lopin.me/<your-github-username>/api. The control page harbour-api.lopin.me checks it, turns chaos on and off (latency, 503s), and resets it to the seed data. Nothing you do there affects anyone else. One slow and unreliable request only: add ?chaos=1 to its URL.
Demos next class
One per person, about your brief from step 2 (or, if you didn't get that far, the connected market).
3 minutes each
- 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 what showed it to you.