Filters, sort and Back: all in the URL
The URL is the only place filters live. page=3 is dropped on the first change, two categories become cat=jackets&cat=shoes, and Back undoes the last change exactly like a browser would.
A shop's frontend must be found by search engines, load fast on phones, keep filters shareable in the URL, keep one cart across tabs and devices, make checkout forms easy and correct, keep card data away from your own code, and measure every step of the funnel.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a price filter to the filters example: a select with Any, 100 and 150 stored as max in the URL.
Make the cart example also react to the storage event, as a real cross-tab cart would.
Explain it without notes
Why should filters live in the URL, and how do you implement it in React?
How would you render product pages for SEO and speed?
How do you keep the cart consistent across tabs and devices?
What are the security boundaries in a checkout?
What analytics would you add, and how do you keep them from hurting performance?
Preview
Console
Nothing logged yet.Expected console output
/shop?cat=jackets -> Rain jacket $150, Down jacket $220
/shop?cat=jackets&cat=shoes -> Road shoe $120, Trail shoe $90, Rain jacket $150, Down jacket $220
/shop?cat=jackets&cat=shoes&sort=price-asc -> Trail shoe $90, Road shoe $120, Rain jacket $150, Down jacket $220
/shop?cat=jackets&cat=shoes -> Road shoe $120, Trail shoe $90, Rain jacket $150, Down jacket $220