🎬 Movie Library App

Discover • Search • Explore • Save Your Favorite Movies

A modern React.js Movie Library Application inspired by BookMyShow, powered by the TMDb API. Search movies, explore details, and save your favorite movies with a clean, responsive UI.

---

🚀 Live Demo

🔗 Live Website: `https://exam-react-js.vercel.app/

💻 GitHub Repository

🔗 Repository: `https://github.com/Dev-Mjarir08/react-PR-10

---

📖 About The Project

Movie Library App is a responsive React application that allows users to browse trending movies, search movies instantly, view complete movie information, and maintain a personal list of favorite movies.

The project demonstrates modern React development using Redux Toolkit, React Router, Axios, and TMDb API integration.

---

✨ Features

🎥 Movie Features

• 🔥 Popular Movies
• 🔎 Search Movies
• 📄 Movie Details
• ⭐ Add to Favorites
• ❌ Remove Favorites
• ❤️ Favorite Movies Page

---

👤 Authentication

• 🔐 Login System
• 🚫 Protected Routes
• 💾 Local Storage Authentication
• 👥 User Session Management

---

🎨 UI Features

• 📱 Fully Responsive
• 🎯 BookMyShow Inspired Design
• ⚡ Fast Performance
• 🧭 Smooth Navigation
• 🎬 Beautiful Movie Cards
• 🔄 Loading States
• ⚠ Error Handling

---

🛠 Tech Stack

Technology	Usage
⚛ React.js	Frontend
🧠 Redux Toolkit	State Management
🌐 React Router DOM	Routing
📡 Axios	API Calls
🎨 Bootstrap 5	Styling
🎬 TMDb API	Movie Database
⚡ Vite	Build Tool

---

📂 Project Structure

Movie-Library
│
├── public
│
├── src
│   ├── api
│   │      apiInstance.js
│   │
│   ├── app
│   │      store.js
│   │
│   ├── components
│   │      MovieCard.jsx
│   │      MovieDetails.jsx
│   │      MovieList.jsx
│   │      MovieSearch.jsx
│   │      Navbar.jsx
│   │      PrivateRoute.jsx
│   │
│   ├── features
│   │      movieSlice.js
│   │
│   ├── pages
│   │      Home.jsx
│   │      Details.jsx
│   │      Favorites.jsx
│   │      Login.jsx
│   │      NotFound.jsx
│   │
│   ├── App.jsx
│   ├── App.css
│   └── main.jsx
│
├── package.json
└── README.md

---

⚙ Installation

1️⃣ Clone Repository

git clone https://github.com/Dev-Mjarir08/react-PR-10.git

---

2️⃣ Go to Project

cd react-PR-10

---

3️⃣ Install Packages

npm install

---

4️⃣ Configure Environment Variable

Create a .env file.

VITE_TMDB_API_KEY=YOUR_API_KEY

---

5️⃣ Run Development Server

npm run dev

---

6️⃣ Production Build

npm run build

---

📸 Screenshots

Add screenshots here

🏠 Home

Home Screenshot

🔎 Search

Search Screenshot

🎬 Details

Movie Details Screenshot

❤️ Favorites

Favorites Screenshot

---

🌐 API Used

TMDb API

Used for

• Popular Movies
• Search Movies
• Movie Details

Official Documentation

https://developer.themoviedb.org/

---

📦 Dependencies

React
Redux Toolkit
React Redux
React Router DOM
Axios
Bootstrap
React Icons
Vite

---

🚀 Future Improvements

• 🎥 Trailer Integration
• ⭐ Ratings & Reviews
• 🌙 Dark Mode
• 🎭 Genre Filtering
• 🎬 Infinite Scrolling
• 👤 Firebase Authentication
• ❤️ Cloud Favorite Sync

---

👨‍💻 Developer

Jarir Multani

Full Stack MERN Developer

💼 Passionate about building modern web applications using React, Node.js, Express.js, and MongoDB.

---

🤝 Connect With Me

GitHub

https://github.com/Dev-Mjarir08

Portfolio

https://jarirmultani.vercel.app/

LinkedIn

Add Your LinkedIn Profile

---

⭐ Support

If you like this project,

⭐ Star the repository

🍴 Fork the repository

🛠 Contribute to improve it

---

Made with ❤️ using React.js