A fully functional Netflix clone built with Next.js 15, TypeScript, Tailwind CSS, and The Movie Database (TMDB) API.
The landing page highlights a trending movie in a Netflix-style hero section with title, rating, year, and description. A video trailer plays in the background with controls for play, pause, mute, and restart. Top navigation links and a dark, vibrant design create a modern streaming look.
The main area shows horizontally scrolling rows for categories like "Trending Now," "Popular on Netflix," and "Action Movies." Each row displays large movie and show posters with titles and interactive hover effects. The top navigation bar offers quick links to TV Shows, Movies, Search, and user profile. The layout uses a sleek black background and bold accents, closely matching the Netflix look.
The movie details modal closely matches Netflix’s UI, showing a large preview image, title, rating, year, runtime, and average score. Users get playback controls and social actions like add to list, like, and dislike. The modal displays a brief description, genre tags, release date, and production credits, all on a dark, blurred background for focus and immersion.
- 🎬 Hero Section: Random trending movie with trailer background and video controls
- 🎥 Movie Cards: Interactive cards with hover effects showing ratings, year, and descriptions
- 🔍 Search Functionality: Real-time movie search with TMDB API
- 📱 Responsive Design: Works seamlessly on desktop, tablet, and mobile
- 🎮 Video Controls: Play/pause, mute/unmute, and restart trailer functionality
- 🎭 Multiple Categories: Trending, Popular, Top Rated, Now Playing, and Coming Soon
- ✨ Smooth Animations: Netflix-style hover effects and transitions
- 🎨 Dark Theme: Modern dark UI matching Netflix's design language
- Framework: Next.js 15 with App Router
- Language: TypeScript
- Styling: Tailwind CSS
- API: The Movie Database (TMDB)
- Icons: Lucide React
- Image Optimization: Next.js Image component
Before running this project, you need:
- Node.js (version 18 or higher)
- TMDB API Key - Get one from The Movie Database
git clone <your-repo-url>
cd nextflixnpm installCreate a .env.local file in the root directory:
NEXT_PUBLIC_TMDB_API_KEY=your_tmdb_api_key_hereReplace your_tmdb_api_key_here with your actual TMDB API key.
npm run devOpen http://localhost:3000 with your browser to see the application.
nextflix/
├── app/ # Next.js App Router
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page (Server Component)
├── components/ # React components
│ ├── ClientWrapper.tsx # Client-side wrapper for interactivity
│ ├── Header.tsx # Navigation header with search
│ ├── HeroSection.tsx # Hero banner with video
│ ├── MovieCard.tsx # Individual movie card
│ └── MovieRow.tsx # Horizontal scrolling movie rows
├── lib/ # Utility functions
│ └── tmdb.ts # TMDB API integration
├── public/ # Static assets
│ └── placeholder-movie.svg # Fallback movie poster
└── ...config files
- Displays a random trending movie as the main banner
- Video background with YouTube trailer (when available)
- Play/pause, mute/unmute, and restart controls
- Smooth image overlay during video loading
- Interactive movie cards with Netflix-style hover effects
- Shows movie poster, title, rating, year, and overview
- Expandable detailed view on hover
- Responsive design for different screen sizes
- Horizontally scrolling rows of movies
- Left/right navigation arrows
- Smooth scroll behavior
- Categories: Trending, Popular, Top Rated, etc.
- Fixed navigation with Netflix-style transparency
- Search functionality with real-time results
- Responsive design with mobile support
The app uses The Movie Database (TMDB) API for:
- Trending Movies:
/trending/movie/{time_window} - Popular Movies:
/movie/popular - Top Rated Movies:
/movie/top_rated - Now Playing:
/movie/now_playing - Upcoming Movies:
/movie/upcoming - Movie Videos:
/movie/{movie_id}/videos - Search Movies:
/search/movie
All API calls include error handling and fallbacks.
The project uses:
- Tailwind CSS for utility-first styling
- Custom CSS for Netflix-specific animations
- CSS Variables for consistent theming
- Responsive Design with mobile-first approach
Key design features:
- Netflix red (#E50914) accent color
- Dark theme with subtle gradients
- Smooth hover transitions
- Card-based layout system
- Next.js Image Optimization: Automatic image resizing and format selection
- Server Components: Data fetching on the server for better performance
- Client Components: Interactive features only where needed
- Lazy Loading: Images and components load as needed
- Caching: TMDB API responses are cached
| Variable | Description | Required |
|---|---|---|
NEXT_PUBLIC_TMDB_API_KEY |
Your TMDB API key | Yes |
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Fork the project
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- The Movie Database (TMDB) for the movie data API
- Netflix for design inspiration
- Next.js for the amazing React framework
- Tailwind CSS for the utility-first CSS framework
- API Key Error: Make sure your TMDB API key is correctly set in
.env.local - Images Not Loading: Check your internet connection and TMDB API status
- Videos Not Playing: Some trailers may not be available or may be region-locked
If you encounter any issues:
- Check the console for error messages
- Verify your API key is valid
- Ensure all dependencies are installed
- Check the TMDB API documentation
Built with ❤️ using Next.js and the TMDB API