A React front end for browsing and booking film tickets — Carousels, category cards, a movie page with cast and similar titles, and a payment modal — built with React Router, context, and Tailwind, running on live data from The Movie Database.
The same app on television, laptop, and phone.
Practice projects get interesting the moment real data arrives. This one pulls live films from The Movie Database, which forces the parts a static clone never reaches: loading states, routing to a detail page by id, sharing the selected film through context, and rendering whatever the API actually returns rather than fixed markup.
Built by Nishanth K R — son of a farmer, always a farmer.
- Hero carousel — A full-width carousel with custom previous and next arrows, built on react-slick.
- Poster sliders — Separate rails for recommended, premieres, and upcoming titles, each fed by its own TMDB endpoint.
- Entertainment categories — The category card row — music, esports, upskilling, cooking, and games.
- Movie detail page — Routed by film id, with the hero, the information panel, cast and crew, and similar titles.
- Payment modal — A checkout dialog built with Headless UI, including card and wallet options.
- Layouts and routing — A default layout and a movie layout composed through React Router, so page chrome is not repeated.
- Shared movie context — The selected film travels through React context instead of being refetched on every page.
Film artwork and metadata come from The Movie Database (TMDB). This project is not endorsed or certified by TMDB.
| Laptop · 1440 × 900 | Phone · 390 × 844 |
|---|---|
 |
 |
What you see when the page opens.
The full page, top to bottom.
A full-width react-slick carousel with custom previous and next arrows, above the search bar and city selector.
Music shows, esports, upskilling, cooking, and interactive games as a card row — the section that gives the home page its shape before any API data arrives.
Recommended titles, each rail fed by its own TMDB endpoint — top rated, popular, and upcoming — through one reusable PosterSlider.
Premieres sit on their own dark band with the RuPay banner, the same slider component with isDark flipped.
/movie/:id loads the film by id: poster, rating, languages, runtime, genres, and the rent options. The selected film travels through React context rather than being refetched by each child.
Below the hero: the overview, the applicable offers, then rails for recommended and similar titles.
| Layer | Technology |
|---|---|
| Framework | React 18 with Create React App |
| Routing | React Router 7 with layout components |
| Styling | Tailwind CSS |
| Carousels and UI | react-slick · slick-carousel · Headless UI · react-icons |
| Data | axios against The Movie Database API |
Deployed and running with live TMDB data.
Node 18 or newer is recommended.
git clone https://github.com/Nishanth1409/REACT-TO-INTOR.git
cd REACT-TO-INTOR
npm installCreate a .env file with your own key rather than relying on the value in the source.
REACT_APP_TMDB_API_KEY=your_tmdb_key_here
The app opens on port 3000 by default.
npm startDo I need my own TMDB key?
Use your own. Create a free account at themoviedb.org and put the key in REACT_APP_TMDB_API_KEY.
Is this affiliated with BookMyShow?
No. It is an independent practice project that reproduces a familiar booking interface. All trademarks belong to their owners.
Can I actually book a ticket?
No. The payment modal is the interface only — there is no payment provider behind it.
Why Create React App?
It is what the project was started on. The routing, context, and data-fetching work transfers to Vite unchanged.
| Live | bokmyshow1409.vercel.app |
| Author | Nishanth K R |
| Repo | Nishanth1409/REACT-TO-INTOR |
| Portfolio | nkrportfolio.vercel.app |