🎬 Netflix Clone - Premium Streaming Experience

A cutting-edge Netflix clone built with the latest React 19 and modern web technologies

🎥 Live Demo • ✨ Features • 🚀 Installation • 🛠️ Tech Stack

---

🌟 Overview

Dive into the future of streaming with this premium Netflix clone, crafted using React 19 and the latest web technologies. Experience seamless movie discovery, detailed information pages, and a pixel-perfect Netflix-inspired interface that adapts beautifully to any device.

✨ Features

🎯 Core Functionality 🎬 Browse Movies & TV Shows - Explore trending and top-rated content 📱 Detailed Media Pages - Rich information with cast, crew, and ratings 📺 Season Management - Complete TV show season breakdown 🎭 Actor Profiles - Detailed cast information and filmography 🔍 Smart Search - Advanced search with filters and suggestions 💫 Recommendations - AI-powered similar content discovery

🎨 UI/UX Excellence 🌙 Netflix-Authentic Design - Pixel-perfect Netflix recreation ⚡ Smooth Animations - Buttery smooth hover effects and transitions 🔄 Loading States - Professional loading indicators and skeletons 🛡️ Error Handling - Graceful error management and fallbacks 📱 Mobile-First - Responsive design for all screen sizes 🎨 Custom Fonts - Netflix Sans font family integration

🚀 Tech Stack

🎭 Frontend Powerhouse

Technology	Version	Purpose
	19.1.0	Latest React with Concurrent Features
	6.2.0	Next-gen build tool with HMR
	7.6.1	Advanced client-side routing
	4.1.7	Utility-first CSS framework
	7.65.0	Performant forms with easy validation
	0.30.3	Smooth carousel components

🎨 UI & Icons

Technology	Version	Purpose
	6.7.2	Professional icon library
	4.17.21	Utility functions for better performance

🛠️ Development Tools

Technology	Version	Purpose
	9.21.0	Advanced code linting and formatting
	3.5.3	Code formatting with Tailwind plugin
	Types	Type definitions for better development

🌐 API & Data

Service	Purpose
	Movie and TV show database
	Reusable data fetching logic

🎬 Live Demo

� Experience the magic yourself!

---

🛠️ Installation & Setup

📋 Prerequisites

Requirement	Version	Download
	18.0+	Download
	latest	Included with Node.js
	Required	Get API Key

🚀 Quick Start

🔥 One-Click Setup (Recommended)

# Clone and setup in one go
git clone https://github.com/mrDanh11/netflix.git && cd netflix && npm install

📦 Step-by-Step Installation

1️⃣ Clone the Repository

git clone https://github.com/mrDanh11/netflix.git
cd netflix

2️⃣ Install Dependencies

# Using npm (recommended)
npm install

# Or using yarn
yarn install

# Or using pnpm (fastest)
pnpm install

3️⃣ Environment Configuration

Create a .env file in the root directory:

# 🌐 TMDB API Configuration
VITE_API_HOST=https://api.themoviedb.org/3
VITE_API_TOKEN=your_tmdb_api_token_here

# 🚀 Optional: Custom Configuration
VITE_APP_TITLE=Netflix Clone
VITE_APP_DESCRIPTION=Premium Streaming Experience

🔑 How to get your TMDB API Token

1. Visit TMDB API Settings
2. Create a free account if you don't have one
3. Request an API key (it's free!)
4. Copy your API Read Access Token (not the API Key)
5. Paste it in your .env file

💡 Tip: Use the API Read Access Token, not the API Key for better security!

4️⃣ Start Development Server

# Start the development server
npm run dev

# Or with other package managers
yarn dev
pnpm dev

🎉 Success! Visit http://localhost:5173 to see your Netflix clone in action!

5️⃣ Build for Production

# Create optimized production build
npm run build

# Preview production build locally
npm run preview

🔧 Additional Scripts

# 🧹 Lint your code
npm run lint

# 🎨 Format code with Prettier
npm run format

# 🧪 Run tests (if available)
npm test

# 📊 Analyze bundle size
npm run analyze

📁 Project Architecture

🏗️ netflix/
├── 📁 public/
│   ├── 🖼️ asets/              # Static images and visual assets
│   │   ├── aceBg.jpg          # Hero background image
│   │   ├── logo.png           # Netflix logo
│   │   └── NoImage.svg        # Fallback image placeholder
│   └── 🔤 fonts/              # Netflix Sans font family
|
├── 📁 src/
│   ├── 🎯 components/         # Reusable UI components
│   │   ├── 🧩 CircularProgressBar.jsx    # Rating visualization
│   │   ├── 🖼️ Image.jsx                  # Optimized image component
│   │   ├── ⏳ Loading.jsx                # Loading spinner
│   │   ├── 🎬 MovieCard.jsx              # Movie/TV show cards
│   │   ├── 🔍 SearchForm.jsx             # Search functionality
│   │   ├── 🎥 TrailerModal.jsx           # Video trailer modal
│   │   ├── 📁 Header/                    # Navigation components
│   │   │   └── index.jsx
│   │   ├── 📁 FeatureMovie/              # Hero section
│   │   │   ├── index.jsx
│   │   │   ├── Movie.jsx
│   │   │   └── PaginateIndicator.jsx
│   │   ├── 📁 MediaDetail/               # Detail page components
│   │   │   ├── ActorInfo.jsx             # Cast member details
│   │   │   ├── ActorList.jsx             # Cast listing
│   │   │   ├── Banner.jsx                # Detail page hero
│   │   │   ├── MediaInfo.jsx             # Media information
│   │   │   └── RecommendMediaList.jsx    # Similar content
│   │   ├── 📁 MediaList/                 # Content lists
│   │   │   └── index.jsx
│   │   ├── 📁 SearchForm/                # Advanced search
│   │   │   ├── FormField.jsx
│   │   │   ├── GenresTypeInput.jsx
│   │   │   ├── MediaTypeInput.jsx
│   │   │   └── RatingInput.jsx
│   │   └── 📁 Season/                    # TV show seasons
│   │       ├── SeasonCard.jsx
│   │       └── SeasonList.jsx
│   ├── 🪝 hooks/                         # Custom React hooks
│   │   └── useFetch.jsx                  # API data fetching
│   ├── 📚 libs/                          # Utilities and constants
│   │   └── constants.js                  # App-wide constants
│   ├── 📄 pages/                         # Route components
│   │   ├── MovieDetail.jsx               # Movie detail page
│   │   ├── PeoplePage.jsx                # Actor/person page
│   │   ├── RootLayout.jsx                # Layout wrapper
│   │   ├── SearchPage.jsx                # Search results
│   │   └── TvShowDetail.jsx              # TV show detail page
│   ├── 🎨 index.css                      # Global styles
│   ├── 🚀 main.jsx                       # Application entry point
│   └── 📱 App.jsx                        # Main app component
├── 📁 docs/                              # Documentation and assets
│   ├── 📸 screenshots/                   # App screenshots
│   ├── docsTailwindcss.md               # Tailwind documentation
│   └── react-hook-form.md               # Form handling docs
├── ⚙️ vite.config.js                     # Vite configuration
├── 🧹 eslint.config.js                   # ESLint rules
├── 📦 package.json                       # Dependencies and scripts
└── 📖 README.md                          # This file

�️ Component Architecture

🧩 Core Components

🎭 Layout & Navigation App.jsx - Main application orchestrator RootLayout.jsx - Shared layout structure Header/ - Navigation and search bar Loading.jsx - Elegant loading states 🎬 Content Display FeatureMovie/ - Hero section with featured content MediaList/ - Trending/top-rated content carousels MovieCard.jsx - Individual movie/show cards CircularProgressBar.jsx - Visual rating display

📋 Detail Pages MovieDetail.jsx - Comprehensive movie information TvShowDetail.jsx - TV show with season details MediaDetail/ - Shared detail components Season/ - Season management components 🔍 Search & Forms SearchForm/ - Advanced search with filters SearchPage.jsx - Search results display TrailerModal.jsx - Video trailer integration

🪝 Custom Hooks & Utilities

useFetch Hook

Centralized API data fetching with advanced features:

const { data, isLoading, error, refetch } = useFetch({
  url: '/movie/popular',
  options: {
    enabled: true,
    cache: true,
    retries: 3
  }
});

Features:

• ✅ Automatic loading and error states
• ✅ Request caching and deduplication
• ✅ Retry logic for failed requests
• ✅ TypeScript-ready interface

🎨 Design System & Styling

🎯 Styling Approach

✨ Animations

• 🏃 Smooth transitions and hover effects
• 📱 Touch-friendly interactions
• ⚡ Hardware acceleration for performance
• 🎭 Micro-interactions for engagement

🌐 API Integration & Data Flow

🔗 Endpoint Mapping

Feature	Endpoint	Purpose	Cache
🔥 Trending	/trending/all/day	Daily trending content	✅ 30min
⭐ Top Movies	/movie/top_rated	Highest rated movies	✅ 1hr
📺 Top TV Shows	/tv/top_rated	Highest rated TV shows	✅ 1hr
🎬 Movie Details	/movie/{id}	Complete movie information	✅ 2hr
📺 TV Details	/tv/{id}	Complete TV show information	✅ 2hr
🎯 Recommendations	/movie/{id}/recommendations	Similar content discovery	✅ 1hr
👥 Cast & Crew	/movie/{id}/credits	Actor and crew information	✅ 2hr
🔍 Search	/search/multi	Multi-category search	❌ No cache

📊 Data Flow Architecture

graph TD
    A[User Interaction] --> B[React Component]
    B --> C[useFetch Hook]
    C --> D[API Request]
    D --> E[TMDB API]
    E --> F[Response Processing]
    F --> G[State Update]
    G --> H[UI Re-render]
    H --> I[Loading States]
    H --> J[Error Handling]
    H --> K[Content Display]

Loading

🚀 Performance & Optimization

⚡ Optimization Features

🏃‍♂️ React 19 Performance ✅ Concurrent Rendering for smooth UX ✅ Automatic Batching for state updates ✅ Suspense Boundaries for loading states ✅ React Server Components ready 📦 Bundle Optimization ✅ Tree Shaking with Vite ✅ Code Splitting by routes ✅ Dynamic Imports for components ✅ Asset Optimization and compression

🖼️ Image Optimization ✅ Lazy Loading for images ✅ WebP Format support ✅ Responsive Images with srcSet ✅ Placeholder Images during load 🌐 Network Optimization ✅ Request Caching and deduplication ✅ Retry Logic for failed requests ✅ Debounced Search queries ✅ Prefetching for critical resources

🛡️ Error Handling & Resilience

🔧 Error Management Strategy

// Global Error Boundary
<ErrorBoundary fallback={<ErrorFallback />}>
  <Router>
    <Suspense fallback={<Loading />}>
      <App />
    </Suspense>
  </Router>
</ErrorBoundary>

Features:

• 🚨 Graceful Degradation - App continues working with limited functionality
• 🔄 Automatic Retries - Smart retry logic for failed API calls
• 📝 Error Logging - Comprehensive error tracking and reporting
• 🎭 Fallback UI - Beautiful error states and empty states

🌟 Features in Development

🚧 Coming Soon

Feature	Status	Priority	ETA
🔐 User Authentication	🟡 In Progress	High	Q1 2025
📚 Watchlist Functionality	🔵 Planned	High	Q1 2025
🎯 Advanced Search Filters	🟡 In Progress	Medium	Q2 2025
🎥 Video Trailer Integration	🔵 Planned	Medium	Q2 2025
⭐ User Reviews & Ratings	🔵 Planned	Low	Q3 2025
📱 Progressive Web App	🔵 Planned	Medium	Q2 2025
🌍 Internationalization	🔵 Planned	Low	Q3 2025
🤖 AI Recommendations	🔵 Planned	Low	Q4 2025

🎯 Roadmap Highlights

• Phase 1 (Q1 2025): User authentication and watchlist
• Phase 2 (Q2 2025): Enhanced search and video integration
• Phase 3 (Q3 2025): Social features and internationalization
• Phase 4 (Q4 2025): AI-powered features and advanced analytics

📱 Browser Support & Compatibility

Chrome ✅ Latest

Firefox ✅ Latest

Safari ✅ Latest

Edge ✅ Latest

Opera ✅ Latest

📱 Mobile Support

• ✅ iOS Safari (iOS 14+)
• ✅ Chrome Mobile (Android 8+)
• ✅ Samsung Internet
• ✅ Firefox Mobile

📄 License

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

🙏 Acknowledgments

💝 Special Thanks

The Movie Database Providing comprehensive movie data

Vite Team Lightning-fast build tool

React Team Revolutionary UI framework

Tailwind CSS Beautiful utility-first CSS

📞 Contact & Support

🌟 Get in Touch

📂 Project Links

---

© 2025 Netflix Clone. Built with React 19 & Modern Web Technologies.