# abuabir/movie-book-redux architecture

> Architecture diagram of the GitHub repository abuabir/movie-book-redux, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-15). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/abuabir/movie-book-redux
- Repository: https://github.com/abuabir/movie-book-redux

## Overview

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: [`src/App.jsx`](https://github.com/abuabir/movie-book-redux/blob/main/src/App.jsx) (Routes and shell), [`src/features/movies/movieSlice.js`](https://github.com/abuabir/movie-book-redux/blob/main/src/features/movies/movieSlice.js) (Movie state), [`src/store/store.js`](https://github.com/abuabir/movie-book-redux/blob/main/src/store/store.js) (Redux store), [`src/components/BookingPage.jsx`](https://github.com/abuabir/movie-book-redux/blob/main/src/components/BookingPage.jsx) (Booking form)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["App experience"]
  node_app["Routes and shell<br/>[App.jsx]"]
  node_header["Header<br/>[Header.jsx]"]
  node_searchfield["Search field<br/>[SearchField.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
end

subgraph group_catalog["Movie and events"]
  node_latest["Latest movies<br/>[MovieList.jsx]"]
  node_upcoming["Upcoming movies"]
  node_searchresults["Search results<br/>[SearchResults.jsx]"]
  node_events["Events view<br/>[Events.jsx]"]
end

subgraph group_booking["Booking flow"]
  node_bookingpage["Booking form<br/>[BookingPage.jsx]"]
  node_seatbooking["Seat selection<br/>[SeatBooking.jsx]"]
  node_confirmation["Booking confirmation"]
end

subgraph group_state["State and API"]
  node_store["Redux store<br/>[store.js]"]
  node_movieslice["Movie state<br/>[movieSlice.js]"]
  node_eventslice["Event state<br/>[eventSlice.js]"]
  node_seatslice["Seat state<br/>[seatSlice.js]"]
  node_bookingslice["Booking state<br/>[bookingSlice.js]"]
end

node_viewer(("Moviegoer"))
node_api["JSON Server API"]
node_datafile[("Seed data<br/>[db.json]")]

node_viewer -->|"uses"| node_app
node_app -->|"renders"| node_header
node_app -->|"renders"| node_footer
node_app -->|"routes to"| node_latest
node_app -->|"routes to"| node_upcoming
node_app -->|"routes to"| node_events
node_app -->|"routes to"| node_searchresults
node_app -->|"routes to"| node_bookingpage
node_app -->|"routes to"| node_confirmation
node_header -->|"renders"| node_searchfield
node_latest -->|"fetches"| node_movieslice
node_upcoming -->|"fetches"| node_movieslice
node_searchresults -->|"fetches"| node_movieslice
node_events -->|"fetches"| node_eventslice
node_bookingpage -->|"renders"| node_seatbooking
node_bookingpage -->|"submits"| node_bookingslice
node_seatbooking -->|"fetches"| node_seatslice
node_store -->|"registers"| node_movieslice
node_store -->|"registers"| node_eventslice
node_store -->|"registers"| node_seatslice
node_store -->|"registers"| node_bookingslice
node_movieslice -->|"reads movies"| node_api
node_eventslice -->|"reads events"| node_api
node_seatslice -->|"reads seats"| node_api
node_bookingslice -->|"reads and writes"| node_api
node_api -.->|"uses data"| node_datafile
node_searchfield -.->|"navigates to"| node_searchresults
node_bookingpage -.->|"navigates to"| node_confirmation

click node_app "https://github.com/abuabir/movie-book-redux/blob/main/src/App.jsx"
click node_header "https://github.com/abuabir/movie-book-redux/blob/main/src/components/Header.jsx"
click node_searchfield "https://github.com/abuabir/movie-book-redux/blob/main/src/components/SearchField.jsx"
click node_footer "https://github.com/abuabir/movie-book-redux/blob/main/src/components/Footer.jsx"
click node_latest "https://github.com/abuabir/movie-book-redux/blob/main/src/components/MovieList.jsx"
click node_upcoming "https://github.com/abuabir/movie-book-redux/blob/main/src/components/UpcomingMovieList.jsx"
click node_searchresults "https://github.com/abuabir/movie-book-redux/blob/main/src/components/SearchResults.jsx"
click node_events "https://github.com/abuabir/movie-book-redux/blob/main/src/components/Events.jsx"
click node_bookingpage "https://github.com/abuabir/movie-book-redux/blob/main/src/components/BookingPage.jsx"
click node_seatbooking "https://github.com/abuabir/movie-book-redux/blob/main/src/components/SeatBooking.jsx"
click node_confirmation "https://github.com/abuabir/movie-book-redux/blob/main/src/components/FinalBookingPage.jsx"
click node_store "https://github.com/abuabir/movie-book-redux/blob/main/src/store/store.js"
click node_movieslice "https://github.com/abuabir/movie-book-redux/blob/main/src/features/movies/movieSlice.js"
click node_eventslice "https://github.com/abuabir/movie-book-redux/blob/main/src/features/events/eventSlice.js"
click node_seatslice "https://github.com/abuabir/movie-book-redux/blob/main/src/features/seats/seatSlice.js"
click node_bookingslice "https://github.com/abuabir/movie-book-redux/blob/main/src/features/bookings/bookingSlice.js"
click node_datafile "https://github.com/abuabir/movie-book-redux/blob/main/db.json"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_header,node_searchfield,node_footer toneBlue
class node_latest,node_upcoming,node_searchresults,node_events,node_datafile toneAmber
class node_bookingpage,node_seatbooking,node_confirmation,node_api toneMint
class node_store,node_movieslice,node_eventslice,node_seatslice,node_bookingslice toneRose
class node_viewer toneIndigo
```

## Components

### App experience

- [Routes and shell](https://github.com/abuabir/movie-book-redux/blob/main/src/App.jsx): `src/App.jsx`
- [Header](https://github.com/abuabir/movie-book-redux/blob/main/src/components/Header.jsx): `src/components/Header.jsx`
- [Search field](https://github.com/abuabir/movie-book-redux/blob/main/src/components/SearchField.jsx): `src/components/SearchField.jsx`
- [Footer](https://github.com/abuabir/movie-book-redux/blob/main/src/components/Footer.jsx): `src/components/Footer.jsx`

### Movie and events

- [Latest movies](https://github.com/abuabir/movie-book-redux/blob/main/src/components/MovieList.jsx): `src/components/MovieList.jsx`
- [Upcoming movies](https://github.com/abuabir/movie-book-redux/blob/main/src/components/UpcomingMovieList.jsx): `src/components/UpcomingMovieList.jsx`
- [Search results](https://github.com/abuabir/movie-book-redux/blob/main/src/components/SearchResults.jsx): `src/components/SearchResults.jsx`
- [Events view](https://github.com/abuabir/movie-book-redux/blob/main/src/components/Events.jsx): `src/components/Events.jsx`

### Booking flow

- [Booking form](https://github.com/abuabir/movie-book-redux/blob/main/src/components/BookingPage.jsx): `src/components/BookingPage.jsx`
- [Seat selection](https://github.com/abuabir/movie-book-redux/blob/main/src/components/SeatBooking.jsx): `src/components/SeatBooking.jsx`
- [Booking confirmation](https://github.com/abuabir/movie-book-redux/blob/main/src/components/FinalBookingPage.jsx): `src/components/FinalBookingPage.jsx`

### State and API

- [Redux store](https://github.com/abuabir/movie-book-redux/blob/main/src/store/store.js): `src/store/store.js`
- [Movie state](https://github.com/abuabir/movie-book-redux/blob/main/src/features/movies/movieSlice.js): `src/features/movies/movieSlice.js`
- [Event state](https://github.com/abuabir/movie-book-redux/blob/main/src/features/events/eventSlice.js): `src/features/events/eventSlice.js`
- [Seat state](https://github.com/abuabir/movie-book-redux/blob/main/src/features/seats/seatSlice.js): `src/features/seats/seatSlice.js`
- [Booking state](https://github.com/abuabir/movie-book-redux/blob/main/src/features/bookings/bookingSlice.js): `src/features/bookings/bookingSlice.js`

### Other components

- **Moviegoer**
- **JSON Server API**
- [Seed data](https://github.com/abuabir/movie-book-redux/blob/main/db.json): `db.json`

## Connections

- Moviegoer → Routes and shell: uses (evidence: `src/App.jsx`)
- Routes and shell → Header: renders (evidence: `src/App.jsx`)
- Routes and shell → Footer: renders (evidence: `src/App.jsx`)
- Routes and shell → Latest movies: routes to (evidence: `src/App.jsx`)
- Routes and shell → Upcoming movies: routes to (evidence: `src/App.jsx`)
- Routes and shell → Events view: routes to (evidence: `src/App.jsx`)
- Routes and shell → Search results: routes to (evidence: `src/App.jsx`)
- Routes and shell → Booking form: routes to (evidence: `src/App.jsx`)
- Routes and shell → Booking confirmation: routes to (evidence: `src/App.jsx`)
- Header → Search field: renders (evidence: `src/components/Header.jsx`)
- Latest movies → Movie state: fetches (evidence: `src/components/MovieList.jsx`)
- Upcoming movies → Movie state: fetches (evidence: `src/components/UpcomingMovieList.jsx`)
- Search results → Movie state: fetches (evidence: `src/components/SearchResults.jsx`)
- Events view → Event state: fetches (evidence: `src/components/Events.jsx`)
- Booking form → Seat selection: renders (evidence: `src/components/BookingPage.jsx`)
- Booking form → Booking state: submits (evidence: `src/components/BookingPage.jsx`)
- Seat selection → Seat state: fetches (evidence: `src/components/SeatBooking.jsx`)
- Redux store → Movie state: registers (evidence: `src/store/store.js`)
- Redux store → Event state: registers (evidence: `src/store/store.js`)
- Redux store → Seat state: registers (evidence: `src/store/store.js`)
- Redux store → Booking state: registers (evidence: `src/store/store.js`)
- Movie state → JSON Server API: reads movies (evidence: `src/features/movies/movieSlice.js`)
- Event state → JSON Server API: reads events (evidence: `src/features/events/eventSlice.js`)
- Seat state → JSON Server API: reads seats (evidence: `src/features/seats/seatSlice.js`)
- Booking state → JSON Server API: reads and writes (evidence: `src/features/bookings/bookingSlice.js`)
- JSON Server API → Seed data: uses data
- Search field → Search results: navigates to
- Booking form → Booking confirmation: navigates to