How yaserhasan/reflix works
REFLIX is a client-side movie-rental app. Users browse and search a movie catalog, open a movie’s details, and rent or return it; they can also switch users and view their rented movies. App owns the in-memory catalog, active user, search state, and rental-budget updates, then routes data and callbacks to the page components. The README only documents Create React App setup, so it does not establish additional product capabilities. Relationships below follow the shown imports and calls; source for some listed components was not excerpted, so those links are omitted.
Main entry points: App.jsx App State and Routes · Layout.jsx Page Layout · Homepage.jsx Homepage · MovieDetailsPage.jsx Movie Details
Components 17
Routing and State
- App State and Routes
src/App.jsx - Protected Route
src/ProtectedRoute.jsx - Mock Movie and User Data
src/mock_data.js
Product Pages
- Homepage
src/pages/Homepage/Homepage.jsx - Movie Details
src/pages/MovieDetailsPage/MovieDetailsPage.jsx - Rented Movies Page
src/pages/RentedMoviesPage/RentedMoviesPage.jsx - Switch User Page
src/pages/SwitchUserPage/SwitchUserPage.jsx
Shared Presentation
- Page Layout
src/components/Layout/Layout.jsx - Header
src/components/Header/Header.jsx - Account Dropdown
src/components/Header/components/AccountDropDown/AccountDropDown.jsx - Button
src/components/Button/Button.jsx - Footer
src/components/Footer/Footer.jsx - Global Styles
src/GlobalStyles.js
Catalog Components
- Container
src/components/Container/Container.js - Movies List and Search
src/components/MoviesList/MoviesList.jsx - Movie Card
src/components/Movie/Movie.jsx
Other components
- Visitor
Connections 24
- Visitor → App State and Routes: uses
- App State and Routes → Mock Movie and User Data: initializes state
src/App.jsx - App State and Routes → Homepage: routes data
src/App.jsx - App State and Routes → Protected Route: guards route
src/App.jsx - App State and Routes → Rented Movies Page: routes data
src/App.jsx - App State and Routes → Movie Details: routes callbacks
src/App.jsx - App State and Routes → Switch User Page: routes data
src/App.jsx - App State and Routes → Global Styles: renders
src/App.jsx - Homepage → Page Layout: renders
src/pages/Homepage/Homepage.jsx - Homepage → Container: renders
src/pages/Homepage/Homepage.jsx - Homepage → Movies List and Search: renders
src/pages/Homepage/Homepage.jsx - Rented Movies Page → Page Layout: renders
src/pages/RentedMoviesPage/RentedMoviesPage.jsx - Rented Movies Page → Container: renders
src/pages/RentedMoviesPage/RentedMoviesPage.jsx - Rented Movies Page → Movies List and Search: renders
src/pages/RentedMoviesPage/RentedMoviesPage.jsx - Movie Details → Page Layout: renders
src/pages/MovieDetailsPage/MovieDetailsPage.jsx - Movie Details → Button: renders
src/pages/MovieDetailsPage/MovieDetailsPage.jsx - Movie Details → Movies List and Search: renders styled list
- Switch User Page → Page Layout: renders
src/pages/SwitchUserPage/SwitchUserPage.jsx - Switch User Page → Container: renders
src/pages/SwitchUserPage/SwitchUserPage.jsx - Page Layout → Header: renders
src/components/Layout/Layout.jsx - Page Layout → Footer: renders
src/components/Layout/Layout.jsx - Header → Account Dropdown: renders
src/components/Header/Header.jsx - Header → Button: renders
src/components/Header/Header.jsx - Movies List and Search → Movie Card: renders
src/components/MoviesList/MoviesList.jsx