🎬 Movie Booking App

Movie Booking App is a responsive frontend web application that enables users to discover movies, explore cinemas, and simulate ticket bookings — all powered by the TMDB API and browser-local storage. It supports location-based movie filtering using the OpenStreetMap Nominatim API, real-time movie search, and a complete booking flow from registration to booking confirmation.

🔗 Live Demo

---

🛠️ Tech Stack

---

✨ Features

• 🔐 User Registration & Login using localStorage
• 🎥 Browse Now Playing and recommended movies via TMDB API
• 🔍 Search movies by title in real time
• 📍 Location-based filtering by Indian state using browser geolocation & Nominatim API
• 🎞️ View movie details — cast, director, runtime, and genre
• 🏟️ Browse cinemas and available showtimes
• 🎟️ Book tickets and store booking history locally
• 🗂️ Fallback to local movie data when the TMDB API is unavailable

---

📁 Project Structure

Movie/
├── src/
│   ├── components/
│   │   ├── Auth/          # Register & Login
│   │   ├── Dashboard/     # MovieList (Browse & Search)
│   │   ├── Cinema/        # CinemaList (Theater selection)
│   │   ├── Show/          # ShowTime (Showtime picker)
│   │   └── Booking/       # BookingSuccess (Confirmation)
│   ├── api/               # TMDB & Nominatim API calls
│   ├── data/              # Local fallback movie data
│   ├── App.jsx            # Route configuration
│   └── main.jsx           # App entry point
├── index.html
├── vite.config.js
└── package.json

---

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/your-username/movie-booking-app.git
cd movie-booking-app/Movie

2. Install Dependencies

npm install

3. Start the Development Server

npm run dev

Open the local URL shown by Vite in your browser.

---

🔄 App Flow

Register → Login → Browse Movies → Filter/Search → Movie Details → Select Cinema → Pick Showtime → Book Ticket → Confirmation

1. Register — Create a new account (stored in localStorage)
2. Login — Authenticate with your credentials
3. Dashboard — Browse now-playing movies, filter by state, or search
4. Movie Detail — View cast, director, runtime, and choose a cinema
5. Showtime — Pick a show slot for the selected cinema
6. Booking Confirmed — Receive a booking confirmation stored locally

---

📡 Data Sources

Source	Usage
TMDB API	Movie listings, search, cast, and details
OpenStreetMap Nominatim	Reverse geocoding for location-based filtering
localStorage	Users, session state, and booking history

---

📌 Notes

• This is a frontend-only project with no backend server.
• All booking, login, and user data are persisted in the browser's localStorage.
• The TMDB API key is currently hardcoded — move it to a .env file before deploying.
• Offline fallback data ensures the app remains usable when the API is unreachable.

---

🔮 Future Improvements

• Seat selection UI
• Payment gateway integration
• Dedicated booking history page
• Protected routes (auth guard)
• Backend + database integration
• Environment-based API configuration

---

👤 Author

Annamneedi suresh kumar
Built with ❤️ using React, Vite, TailwindCSS, and the TMDB API.

---

🏷️ Topics

react · vite · tailwindcss · movie-booking · tmdb-api · openstreetmap · localstorage · react-router · frontend · javascript · location-based-filtering · ticket-booking