How rosemond-kay/alx-capstone-project works
RoseBinge is a React movie-discovery app. Users browse featured and trending titles, filter by category, search with suggestions and recent searches, open movie details, and maintain a watchlist. The sampled App and SearchPage code shows the main data calls and UI ownership; the README documents responsive layouts and graceful API/empty-result handling. Some paths and component behavior are represented from the tree and README rather than inspected source.
Main entry points: App.jsx App state and views · MovieCard.jsx Movie card · omdbapi.js OMDb service · MovieDetailsModal.jsx Movie details modal
Components 18
App shell
- React mount
src/main.jsx - App state and views
src/App.jsx - Navigation
src/components/Navigation.jsx - Mobile navigation
src/components/MobileBottomNav.jsx - Watchlist view and state
src/App.jsx
Movie discovery
- Featured hero
src/components/HeroSection.jsx - Category tabs
src/components/CategoryTabs.jsx - Movie lists
src/components/MovieList.jsx - Movie card
src/components/MovieCard.jsx - Search and suggestions
src/components/SearchPage.jsx - Recent search state
src/components/SearchPage.jsx - Movie details modal
src/components/MovieDetailsModal.jsx
Movie data
- OMDb service
src/omdbapi.js - OMDb API
Shared presentation
- UI primitives
src/components/Button.jsx - Badges and cards
src/components/Badge.jsx - Poster fallback
src/components/ImageWithFallback.jsx
Other components
- Viewer
Connections 27
- Viewer → React mount: opens app
- React mount → App state and views: renders
- App state and views → Navigation: renders
- App state and views → Mobile navigation: renders
- App state and views → Featured hero: renders featured
- App state and views → Category tabs: renders filters
- App state and views → Movie lists: renders results
- Movie lists → Movie card: renders movies
- App state and views → Movie card: renders watchlist
- App state and views → Search and suggestions: renders search view
- Search and suggestions → Recent search state: reads and updates
- App state and views → Movie details modal: renders selection
- Navigation → App state and views: changes view and search
- Category tabs → App state and views: selects category
- Featured hero → App state and views: selects movie
- Movie card → App state and views: selects movie
- Movie details modal → App state and views: updates watchlist
- App state and views → Watchlist view and state: updates and displays
- App state and views → OMDb service: fetches featured and categories
- Search and suggestions → OMDb service: searches title
- OMDb service → OMDb API: requests movie data
- OMDb service → OMDb service: caches and transforms
- Featured hero → UI primitives: uses buttons
- Movie details modal → UI primitives: uses buttons
- Movie card → Badges and cards: uses display parts
- Movie details modal → Badges and cards: uses badges
- Movie card → Poster fallback: loads poster