MovieDB - Your Ultimate Movie Database

A modern, responsive React application for discovering and managing your favorite movies. Built with React, Tailwind CSS, and powered by the TMDB API.

🔗 Live Demo: https://cool-churros-f65dec.netlify.app/
📸 Screenshots: See below

📸 Screenshots

🌟 Features

1. Dynamic Movie Discovery

• Now Playing Movies Banner
  • Stunning carousel display of currently playing movies
  • Auto-playing slideshow with smooth transitions
  • Movie details overlay with title and description
  • Quick access to trailers and movie information

2. Movie Browsing

• Popular Movies Section

  • Grid display of trending movies
  • Responsive layout adapting to different screen sizes
  • Smooth hover animations and transitions

• Top Rated Movies Section

  • Curated collection of highest-rated films
  • Interactive movie cards with detailed information
  • Rating and release year display

3. Movie Interaction

• Movie Cards
  • Beautiful hover effects with backdrop blur
  • Quick access buttons for:
    • Playing trailers
    • Viewing detailed information
    • Adding to watchlist
  • Display of movie ratings and release year
  • Smooth animations and transitions

4. Search Functionality

• Real-time Search
  • Instant search results as you type
  • Debounced search for optimal performance
  • Clear display of search results
  • Mobile-responsive search interface

5. Watchlist Management

• Personal Watchlist
  • Add/Remove movies from watchlist
  • Persistent storage using localStorage
  • Visual feedback for watchlist actions
  • Easy access to saved movies

6. Detailed Movie Information

• Movie Details Modal
  • Comprehensive movie information
  • Movie overview and synopsis
  • Rating and popularity metrics
  • Release date and language information
  • Additional movie metadata

7. Video Playback

• Trailer Player
  • YouTube video integration
  • Custom video player controls
  • Full-screen support
  • Volume and playback controls
  • Backdrop blur effect for enhanced focus

8. User Interface

• Modern Design
  • Clean and intuitive interface
  • Responsive layout for all devices
  • Smooth animations and transitions
  • Dark theme optimized for movie browsing
  • Loading states and error handling

🛠️ Technical Features

1. Performance

• Optimized image loading
• Debounced search functionality
• Efficient state management
• Smooth animations and transitions
• Lazy loading of components

2. Responsive Design

• Mobile-first approach
• Flexible grid layouts
• Adaptive typography
• Touch-friendly interactions
• Cross-browser compatibility

3. State Management

• React Context for global state
• Local storage persistence
• Efficient component updates
• Optimized re-renders

4. API Integration

• TMDB API integration
• Error handling
• Loading states
• Data caching

🚀 Getting Started

1. Clone the repository ```bash git clone https://github.com/yourusername/moviedb.git ```

2. Install dependencies ```bash cd moviedb npm install ```

3. Create a .env file with your TMDB API key ```env VITE_TMDB_API_KEY=your_api_key_here ```

4. Start the development server ```bash npm run dev ```

🔧 Technologies Used

• React - Frontend library
• Tailwind CSS - Styling
• React Router - Navigation
• React Icons - UI icons
• React Player - Video playback
• Slick Carousel - Banner slider
• TMDB API - Movie data

📱 Responsive Design

The application is fully responsive and works seamlessly across:

• Desktop computers
• Tablets
• Mobile phones
• Different screen orientations

🔍 Search Implementation

The search functionality includes:

• Real-time results
• Debounced API calls
• Clear result display
• Error handling
• Loading states

📋 Watchlist Features

The watchlist implementation includes:

• Local storage persistence
• Add/Remove functionality
• Visual feedback
• Smooth animations
• Easy access

🎥 Movie Details

Detailed movie information includes:

• Title and overview
• Rating and popularity
• Release date
• Original language
• Runtime
• Adult content rating
• Vote count

🎬 Video Player Features

The custom video player includes:

• Play/Pause controls
• Volume control
• Progress bar
• Full-screen toggle
• Time display
• Custom styling

🎨 UI/UX Features

• Smooth transitions
• Hover effects
• Loading animations
• Error states
• Toast notifications
• Modal interactions
• Backdrop blur effects

🔐 Security

• Secure API key handling
• Protected routes
• Input sanitization
• Error boundaries

🔄 Future Enhancements

• User authentication
• Social sharing
• Advanced filtering
• Personalized recommendations
• Multiple watchlists
• Movie reviews and ratings
• Offline support

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• TMDB for providing the movie database API
• React community for excellent tools and libraries
• Tailwind CSS for the utility-first CSS framework
• All contributors and users of the application