How abuabir/movie-book-redux works
This is a React/Redux movie-ticket booking app backed by a local JSON Server API. Users browse latest or upcoming movies, search titles, choose a movie, select seats and a showtime/date, submit a booking, and reach a confirmation route. Events are a separate browsing capability. Redux slices fetch and hold movie, seat, event, and booking data; booking submission also updates the selected seats. The README identifies JSON Server as the API, but the excerpts do not show its runtime configuration or confirmation-page data behavior.
Main entry points: App.jsx Routes and shell · movieSlice.js Movie state · store.js Redux store · BookingPage.jsx Booking form
Components 19
App experience
- Routes and shell
src/App.jsx - Header
src/components/Header.jsx - Search field
src/components/SearchField.jsx - Footer
src/components/Footer.jsx
Movie and events
- Latest movies
src/components/MovieList.jsx - Upcoming movies
src/components/UpcomingMovieList.jsx - Search results
src/components/SearchResults.jsx - Events view
src/components/Events.jsx
Booking flow
- Booking form
src/components/BookingPage.jsx - Seat selection
src/components/SeatBooking.jsx - Booking confirmation
src/components/FinalBookingPage.jsx
State and API
- Redux store
src/store/store.js - Movie state
src/features/movies/movieSlice.js - Event state
src/features/events/eventSlice.js - Seat state
src/features/seats/seatSlice.js - Booking state
src/features/bookings/bookingSlice.js
Other components
- Moviegoer
- JSON Server API
- Seed data
db.json
Connections 28
- Moviegoer → Routes and shell: uses
src/App.jsx - Routes and shell → Header: renders
src/App.jsx - Routes and shell → Footer: renders
src/App.jsx - Routes and shell → Latest movies: routes to
src/App.jsx - Routes and shell → Upcoming movies: routes to
src/App.jsx - Routes and shell → Events view: routes to
src/App.jsx - Routes and shell → Search results: routes to
src/App.jsx - Routes and shell → Booking form: routes to
src/App.jsx - Routes and shell → Booking confirmation: routes to
src/App.jsx - Header → Search field: renders
src/components/Header.jsx - Latest movies → Movie state: fetches
src/components/MovieList.jsx - Upcoming movies → Movie state: fetches
src/components/UpcomingMovieList.jsx - Search results → Movie state: fetches
src/components/SearchResults.jsx - Events view → Event state: fetches
src/components/Events.jsx - Booking form → Seat selection: renders
src/components/BookingPage.jsx - Booking form → Booking state: submits
src/components/BookingPage.jsx - Seat selection → Seat state: fetches
src/components/SeatBooking.jsx - Redux store → Movie state: registers
src/store/store.js - Redux store → Event state: registers
src/store/store.js - Redux store → Seat state: registers
src/store/store.js - Redux store → Booking state: registers
src/store/store.js - Movie state → JSON Server API: reads movies
src/features/movies/movieSlice.js - Event state → JSON Server API: reads events
src/features/events/eventSlice.js - Seat state → JSON Server API: reads seats
src/features/seats/seatSlice.js - Booking state → JSON Server API: reads and writes
src/features/bookings/bookingSlice.js - JSON Server API → Seed data: uses data
- Search field → Search results: navigates to
- Booking form → Booking confirmation: navigates to