Build & Deploy a Netflix Clone with Next js 16, Tailwind CSS 4 & TMDB API | FREE Source Code

Description

🎬 Build & Deploy a Netflix Clone with Next.js 16, Tailwind CSS 4 & TMDB API In this video, I'll walk you through MovieFlix — a modern, fully responsive movie streaming application built from scratch using the latest web technologies. I'll show you every feature of this app, how to set up your TMDB API credentials, and how to deploy it live on Vercel — all step by step! 🔗 Source Code: https://github.com/noorjsdivs/movieflix ☕ Support: https://buymeacoffee.com/reactbd ⏱️ What You'll Learn: ━━━━━━━━━━━━━━━━━━━━━ 00:00 - Introduction & Project Overview 04:40 - Cloning from repository 08:18 - Getting TMDB API Credentials 10:55 - Deploying to Vercel 13:20 - Final Result & Wrap Up ✨ Key Features of This App: ━━━━━━━━━━━━━━━━━━━━━━━━━━ 🎞️ Dynamic Hero Carousel with autoplaying trailers & progress indicators 🔍 Real-time Movie Search functionality 🎭 Genre Filtering (Action, Drama, Comedy, Horror, Sci-Fi, Romance & more) 📱 Fully Responsive Design — Mobile, Tablet & Desktop 🌙 Dark Mode with stunning glassmorphism UI effects 🎬 Browse Now Playing, Popular, Top Rated & Upcoming movies 🎥 Watch YouTube trailers directly in the app ✨ Smooth animations powered by Framer Motion 📧 Contact page with a fully functional form 📜 Terms & Conditions and Privacy Policy pages 🦶 Beautiful footer with social links & newsletter subscription 🛠️ Tech Stack Used: ━━━━━━━━━━━━━━━━━━ ⚡ Next.js 16.1.6 (App Router) 🎨 Tailwind CSS 4.1.18 🧩 shadcn/ui Components (Dialog, Dropdown, Tabs, Tooltip, Sheet, Separator) 🌀 Framer Motion 12 (Animations) 🎠 Embla Carousel with Autoplay 🎬 TMDB API (Movie Data) 💎 Lucide React Icons 📝 TypeScript 5.9 🔄 React 19.2 📦 pnpm 🎥 react-youtube (Trailer Player) ✨ tsparticles (Particle Effects) 📋 React Hook Form + Zod (Form Validation) 🌗 next-themes (Dark/Light Mode) 🔑 How to Get TMDB API Credentials: ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1️⃣ Go to https://www.themoviedb.org/ and create a free account 2️⃣ Navigate to Settings → API 3️⃣ Request an API Key (select "Developer") 4️⃣ Fill in the application details (Type: Personal/Educational) 5️⃣ Copy your API Key & Read Access Token 6️⃣ Create a .env file in your project root: • NEXT_URL=http://localhost:3000/ • TMDB_API_KEY=your_api_key • TMDB_READ_ACCESS_KEY=your_read_access_token 🚀 Deploy on Vercel: ━━━━━━━━━━━━━━━━━━ Simply push your code to GitHub and import the repository on https://vercel.com — don't forget to add your environment variables (TMDB_API_KEY, TMDB_READ_ACCESS_KEY, NEXT_URL) in the Vercel dashboard under Settings → Environment Variables! ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 👋 CONNECT WITH ME — ALL SOCIAL LINKS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 💻 GitHub: https://github.com/noorjsdivs 🌐 Website / ReactBD: https://www.reactbd.com 👤 Portfolio: https://noormohammad.reactbd.com 📝 Blog (Medium): https://medium.com/@reactjsbd ☕ Buy Me a Coffee: https://buymeacoffee.com/reactbd 📘 Facebook: https://www.facebook.com/Noorlalu143/ 📸 Instagram: https://www.instagram.com/simplenoor143/ 🐦 Twitter / X: https://x.com/NoorMoh74531005 💼 LinkedIn: https://www.linkedin.com/in/noor-mohammad-ab2245193/ ▶️ YouTube: https://www.youtube.com/@reactjsbd 🛒 My Projects Shop: https://buymeacoffee.com/reactbd/extras 🔍 Search me on Google: "ReactBD" or "Noor Mohammad Developer" ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 📁 Project Structure: ━━━━━━━━━━━━━━━━━━━━ 📂 /src/app — App Router pages (Home, Contact, About, Terms, Privacy, Genre, Search) 📂 /src/components — Reusable UI components (Header, Footer, Hero Carousel, Movie Cards) 📂 /src/lib — Utility functions & TMDB API fetchers 📂 /src/hooks — Custom React hooks 📌 If you found this video helpful, please LIKE 👍, SHARE 🔗, and SUBSCRIBE 🔔 for more Next.js & React tutorials! 💬 Drop a comment below if you have any questions — I reply to every single one! #nextjs #tailwindcss #netflix #webdevelopment #react #reactbd #noorjsdivs