Hello, friends! 😃 Welcome to the IMDB Clone Full-Stack Project Course! 🎬 Join me as we create a stunning, feature-packed movie app using Next.js 15, Tailwind CSS, MongoDB, and Clerk for secure user authentication.
⭐ Clerk: https://go.clerk.com/wsJiD3K
🎨 Eraser Diagram: https://app.eraser.io/workspace/on7AvviPIkbsNg7zIT4b?origin=share
🛠️ We'll begin by setting up Next.js and Tailwind CSS to design a clean, responsive interface. This app includes core features such as:
User authentication with Clerk for secure login and personalised user profiles.
Dynamic movie listing system with detailed descriptions, ratings, and reviews.
Search and filter functionality to easily explore movies by genre, release year, and rating.s.
🎥 Key user features include:
Browsing movies with rich details, including trailers and posters.
Adding movies to their watchlist.
Submitting and reading reviews, with a sleek dark mode option for optimal user experience.
🚀 Finally, we'll deploy the app to Vercel for seamless, global access, making it a great addition to your portfolio or a solid foundation for your next project.
Source Code & Final Version:
🔗 https://github.com/sahandghavidel/next-imdb
⭐ Clerk: https://go.clerk.com/wsJiD3K
🎨 Eraser Diagram: https://app.eraser.io/workspace/on7AvviPIkbsNg7zIT4b?origin=share
💻 All you need to start is a basic understanding of JavaScript and React. Subscribe, hit the bell, and join us to build your very own professional-grade movie app! 🚀✨
Timestamps:
00:00 - Intro
01:48 - Install Next.js and Tailwind CSS
12:23 - Build the header section
17:49 - Add dark mode functionality
30:44 - Add user authentication with Clerk
42:45 - Sync Clerk data with MongoDB
51:54 - Add MongoDB to connect Clerk and the database
01:09:18 - Add About page with application description
01:12:05 - Add Navbar component and TopPages route
01:18:35 - Fetch and display movies and add Results and Card components
01:28:23 - Add error handling component and refactor genre parameter extraction
01:32:45 - Add MoviePage component for movie details display
01:37:25 - Implement search and filter functionality
01:45:04 - Add favorites functionality with API routes and UI components