How melvin-logdat-dev/whimsical-whiskers works
Whimsical Whiskers is a React cat-breed browsing app. A visitor chooses a breed from a list fetched by the search form; that selection is lifted to App and passed to the banner, which fetches breed details and images and displays an image carousel. The sampled source supports these UI and API relationships; the README describes no additional product capabilities.
Main entry points: SearchForm.jsx Breed selector · Banner.jsx Breed banner · App.jsx App state · Header.jsx Site header
Components 9
User interface
- App state
src/App.jsx - Site header
src/components/Header.jsx - Breed selector
src/components/SearchForm.jsx - Breed banner
src/components/Banner.jsx - Image carousel
src/components/Banner.jsx
Breed content
- Breed list API
- Breed detail API
- Breed images API
Other components
- Visitor
Connections 10
- Visitor → Breed selector: selects breed
- App state → Site header: renders
- App state → Breed selector: renders
- App state → Breed banner: renders with selection
- Breed selector → Breed list API: requests breeds
- Breed list API → Breed selector: returns breeds
- Breed selector → App state: reports selection
- Breed banner → Breed detail API: requests details
- Breed banner → Breed images API: requests images
- Breed banner → Image carousel: displays images