A Hands-On Course

Build the Library Frontend with React

A data-heavy React app built from an empty folder, on top of the Spring Boot course's Library API.

The mission Learn the modern way to build a data-heavy React app — and why each piece is done that way — by building the frontend for the Library API from the Spring Boot course.

Lessons

Scaffold the App and Fetch the Books

Bun, Vite and TypeScript, a dev proxy to the Spring API, and the books on screen with plain fetch and useEffect.

Soon
The Cost of Fetching in Effects

Loading and error flags, race conditions and StrictMode's double fetch: what hand-rolled fetching gets wrong.

Soon
Server State with TanStack Query

QueryClient, useQuery, query keys and the Devtools replace the effect.

Soon
A Typed Client from the OpenAPI Spec

Generate types from the Spring API's spec and call it with openapi-fetch.

Soon

Reference

📖 Glossary — the vocabulary of React, grouped by the lesson that introduces each term.
🧭 Architecture Decisions — the choices the course makes and why, each linked to the lesson that introduces it.

Community

📣 Course news — new lessons and courses as they land.
💬 Questions — ask about a lesson or report a mistake (GitHub account needed).

Trusted resources

📚 Practical React Query — the TanStack Query maintainer's series on how and why to use it.
⚛️ You Might Not Need an Effect — react.dev on when effects are the wrong tool, fetching included.
🔎 TanStack Query docs — the official guides and API reference.
🧪 Common mistakes with React Testing Library — Kent C. Dodds on writing tests the way users use the app.