React News Feed Application

Problem

Search-driven news readers either hammer the upstream API on every keystroke or feel sluggish because they wait too long between requests. I wanted the search input to feel instantaneous on the page but make at most one network request per typed phrase, plus a paginated reading experience that doesn't blow up the rate limit.

Approach

Debounced search via Lodash's `debounce` — 400 ms after the user stops typing, one request fires. Results are paginated client-side from the GNews response, so flipping between pages is instant. Material UI gives the layout a serious-newspaper feel without writing custom skeletons and pagination components. Vite handles the build because the project predates Next.js being a default reach for static SPAs.

Stack & rationale

• Vite
  Fast dev server and minimal config for a pure client-side React app. No SSR was required, so Next would have been overkill.
• Material UI
  Off-the-shelf cards, pagination, and skeletons. The visual identity of news content benefits from MUI's typographic defaults more than a fully custom system.
• GNews API
  Free tier with a wide enough rate limit for live demos; returns clean JSON with image URLs that already work in <img> tags.
• Lodash debounce
  One well-tested utility, no need to roll a debounce hook by hand. Tree-shakes to ~1 KB when imported as `lodash/debounce`.

Highlights

• ▸Debounced search (400 ms) — at most one API call per typed query, regardless of how fast the user types
• ▸Client-side pagination over the fetched result set — page changes are instant, no extra network
• ▸Material UI skeletons during the loading window so the layout doesn't shift
• ▸Article cards link out to the original publisher; the app is a discovery surface, not a re-hoster