FrontendArena/ 01Build mode

Mission 10 / Final capstone

Developer Article Hub

Combine forms, Fetch API, arrays, UI state, sorting and localStorage in one useful feature.

Hard250 XPAPIStateSaved items

Capstone flow

One feature, several connected responsibilities

  1. The form validates and starts an asynchronous search.
  2. The response becomes the current articles state.
  3. The selected sort creates a derived copy of that state.
  4. Saved items use a second localStorage-backed array.
  5. A single render function keeps the visible list and count together.

Article Hub

Search, sort and save

Saved view

0 articles

Explain-audit

Can you trace the code?

  • Explain what changes when the form is submitted.
  • Explain why sorting uses a copied array.
  • Explain how one saved article survives refresh.
  • Explain why the page can still show saved items when the API fails.