🎬 CineScope - Movies & Series Web Application

A modern, responsive web application built with React, TypeScript, and TailwindCSS for discovering and exploring movies and TV series. This project demonstrates best practices in modern web development with a sleek, professional design.

✨ Features

🎯 Core Functionality

• Home Page: Trending movies and TV series with popular content sections
• Details Page: Comprehensive information with trailer playback functionality
• Favorites System: Save and manage your favorite content with localStorage persistence
• Professional Navigation: Modern navbar with integrated search and theme toggle

🎨 UI/UX Features

• Modern Design: Sleek, compact, and professional interface
• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Dark/Light Mode: Seamless theme switching with persistent preferences
• Smooth Animations: Framer Motion powered animations and micro-interactions
• Loading States: Professional shimmer loading effects and skeleton screens
• Glassmorphism Effects: Modern backdrop blur and transparency effects
• Hover Interactions: Engaging hover effects and visual feedback

🎥 Trailer Functionality

• YouTube Integration: Watch official trailers directly in the app
• Modal Player: Professional full-screen trailer modal with autoplay
• Smart Detection: Automatically finds official trailers or fallback videos
• Keyboard Support: ESC key to close trailer modal
• Mobile Optimized: Responsive trailer player for all devices

🔧 Technical Features

• TypeScript: Full type safety and enhanced development experience
• React Router: Client-side routing with URL parameters and search params
• Context API: Efficient theme and state management
• Custom Hooks: Reusable logic for favorites and data management
• TMDb API Integration: Comprehensive movie and TV series data
• Error Handling: Robust error handling with user-friendly messages
• Performance Optimized: Lazy loading, efficient re-renders, and optimized images
• Environment Variables: Secure API key management with .env files

🚀 Getting Started

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn package manager
• TMDb API key (free at developer.themoviedb.org)

Installation

1. Clone the repository

   git clone <your-repo-url>
   cd movies-series-app

2. Install dependencies

   npm install

3. Environment Setup

   • Copy .env.example to .env
   • Add your TMDb API key:

   REACT_APP_TMDB_API_KEY=your_api_key_here
   REACT_APP_TMDB_BASE_URL=https://api.themoviedb.org/3
   REACT_APP_TMDB_IMAGE_BASE_URL=https://image.tmdb.org/t/p

4. Start the development server

   npm run dev
   # or
   npm start

5. Open your browser

   • Navigate to http://localhost:3000
   • The app should now be running!

📁 Project Structure

src/
├── api/
│   └── tmdb.ts              # TMDb API service functions
├── components/
│   ├── MovieCard.tsx        # Movie/Series card component
│   ├── Navbar.tsx           # Modern navigation bar
│   ├── Pagination.tsx       # Pagination component
│   ├── SearchBar.tsx        # Advanced search with filters
│   └── TrailerModal.tsx     # YouTube trailer modal
├── contexts/
│   └── ThemeContext.tsx     # Dark mode context
├── hooks/
│   └── useFavorites.ts      # Favorites management hook
├── pages/
│   ├── Home.tsx             # Home page with trending content
│   ├── Search.tsx           # Search results page
│   ├── Details.tsx          # Detailed movie/series page
│   └── Favorites.tsx        # Favorites management page
├── types/
│   └── index.ts             # TypeScript type definitions
├── App.tsx                  # Main app component
├── index.tsx                # App entry point
└── index.css                # Global styles and animations

🛠️ Available Scripts

• npm start - Start development server
• npm run dev - Start development server (alias for start)
• npm run build - Build for production
• npm test - Run tests
• npm run eject - Eject from Create React App

🎨 Design System

Color Palette

The app uses a sophisticated color system with primary and dark mode colors:

colors: {
  primary: {
    50: '#f0f9ff',
    100: '#e0f2fe',
    500: '#0ea5e9',
    600: '#0284c7',
    700: '#0369a1',
    900: '#0c4a6e',
  },
  dark: {
    50: '#f8fafc',
    700: '#334155',
    800: '#1e293b',
    900: '#0f172a',
  }
}

Typography & Spacing

• Modern font stack with proper hierarchy
• Consistent spacing using Tailwind's spacing scale
• Responsive typography that scales with screen size

🔧 API Integration

The app integrates with TMDb API for comprehensive movie and TV series data:

Key API Functions

• getTrending() - Get trending content (day/week)
• searchMulti() - Advanced search with filters
• getMovieDetails() / getTVSeriesDetails() - Detailed information with videos
• getMovieCredits() / getTVSeriesCredits() - Cast and crew information
• getMovieGenres() / getTVGenres() - Genre data for filters

Video Integration

• Trailer Detection: Automatically finds official trailers
• YouTube Embed: Seamless YouTube video integration
• Fallback Handling: Graceful handling when no trailers are available

📱 Responsive Design

The app is fully responsive with optimized layouts:

Breakpoints

• Mobile: < 640px (2-column grid)
• Tablet: 640px - 1024px (3-4 column grid)
• Desktop: > 1024px (5-6 column grid)

Mobile-First Approach

• Touch-friendly interactions
• Optimized navigation for mobile
• Responsive images and layouts
• Mobile-optimized trailer player

🎯 Key Features Explained

Search & Filtering

• Real-time search with debounced input
• Multi-criteria filtering (genre, year, rating, type)
• URL persistence - search state saved in URL
• Smart results with proper error handling

Favorites System

• Local storage persistence - favorites survive browser restarts
• Add/Remove functionality with visual feedback
• Dedicated favorites page with grid layout
• Type-safe implementation with TypeScript

Trailer Functionality

• Modal-based player with backdrop blur
• Autoplay support for immediate viewing
• Keyboard navigation (ESC to close)
• Mobile-optimized responsive design

🚀 Deployment

Netlify Deployment

The app is configured for easy deployment on Netlify:

1. Build Configuration

   # netlify.toml
   [build]
     command = "npm run build"
     publish = "build"

2. Environment Variables

   • Set REACT_APP_TMDB_API_KEY in Netlify dashboard
   • Configure other environment variables as needed

3. Redirects

   • Handles client-side routing with _redirects file

Build Optimization

• Code splitting for better performance
• Image optimization with TMDb CDN
• Minified production build
• Gzip compression enabled

🛡️ Error Handling

Robust Error Management

• API error handling with user-friendly messages
• Network error recovery with retry mechanisms
• Graceful fallbacks for missing data
• Loading states for better UX

Data Validation

• TypeScript validation for type safety
• Null/undefined checks for API responses
• Fallback values for missing properties
• Input sanitization for search queries

🎯 Learning Objectives

This project demonstrates advanced web development concepts:

React & TypeScript

• Functional components with modern hooks
• TypeScript interfaces and type safety
• Context API for global state management
• Custom hooks for reusable logic
• Error boundaries and error handling

Modern CSS & Styling

• TailwindCSS utility-first approach
• Responsive design principles
• Dark mode implementation
• CSS animations and micro-interactions
• Glassmorphism and modern effects

Web Development Best Practices

• Component-based architecture
• Clean code organization
• Performance optimization
• Accessibility considerations
• SEO-friendly structure

API Integration & Data Management

• RESTful API consumption
• Async/await patterns
• Error handling strategies
• Data transformation
• Caching strategies

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is created for educational purposes and demonstrates modern web development practices.

🙏 Acknowledgments

• TMDb API for providing comprehensive movie and TV series data
• TailwindCSS for the utility-first CSS framework
• Framer Motion for smooth animations
• React Team for the amazing framework
• TypeScript for type safety and better development experience

© 2024 Satvik Shrivastava. All rights reserved.