🎬 MovieRate Project

A simple, responsive movie listing app using React, TypeScript, TailwindCSS, and The Movie DB API.
Users can browse top-rated movies and manage their favorites with a ❤️.

---

🛠 Built With

• ⚛️ React + Vite
• 🧩 TypeScript
• 🎨 TailwindCSS
• 🧠 Redux Toolkit Query for data fetching
• 🗂 LocalStorage for persisting favorites
• 📡 The Movie DB API

---

🎯 Purpose of the Project

This project was created to:

• Practice component design using React & TypeScript
• Learn how to fetch and display movie data from an external API
• Implement a simple favorite system using heart icons ❤️
• Preserve state using localStorage across page reloads
• Explore responsive layout design with TailwindCSS

---

📄 Page Structure

🏠 Home (/):

• Displays top-rated movies in a responsive grid
• Each card includes:
  • Movie poster
  • Title
  • Rating
  • Overview
  • Favorite icon (❤️ / 🤍)

💖 Favorites (/favorites):

• Shows only user-selected favorite movies
• Updates instantly when items are added or removed

---

📦 API Integration

• All data is fetched from The Movie DB using RTK Query
• useGetTopRatedQuery is used to fetch movie listings

---

📱 Responsive Design

• Built using Tailwind’s grid utilities for mobile-first responsiveness
• Adjusts seamlessly from small to large screens

---

🚀 Getting Started

# Install dependencies
npm install

# Run the app locally
npm run dev

---

📁 Folder Structure

src/
├── components/        # MovieCard component
├── features/          # RTK Slice for movie API
├── pages/             # Home and Favorites pages
├── types/             # TypeScript interfaces

---

🤍 Notes

• Favorites are saved in localStorage
• Fully responsive
• Minimalist design focused on functionality

---

🌐 Live Preview

You can deploy this app to Netlify, Vercel or GitHub Pages.

MovieRateProject