How zhangmyihua/monsters-rolodex-complete works
Monsters Rolodex is a small React app that fetches user records, filters them by name as the user types, and displays matching records with generated monster images. The main runtime wiring is visible in the sampled source; no separate persistence layer is present.
Main entry points: App.js App state and filter · index.js React entry · search-box.component.jsx Search input · card-list.component.jsx Filtered card list
Components 8
App workflow
- React entry
src/index.js - App state and filter
src/App.js
Display components
- Search input
src/components/search-box/search-box.component.jsx - Filtered card list
src/components/card-list/card-list.component.jsx - Monster card
src/components/card/card.component.jsx
Other components
- Browser user
- User API
- RoboHash images
Connections 9
- Browser user → React entry: opens app
- React entry → App state and filter: renders
- App state and filter → User API: fetches users
- User API → App state and filter: returns records
- App state and filter → Search input: renders
- Search input → App state and filter: sends search change
- App state and filter → Filtered card list: passes filtered records
- Filtered card list → Monster card: renders per record
- Monster card → RoboHash images: requests image