๐ด Letโs build Disney+ 2.0 with NEXT.JS 14! (Microsoft Azure, Caching, OpenAI, Shadcn, Tailwind, TS)
186,878
Published 2023-12-19
๐จ Join the worldโs BEST developer community & course Zero to Full Stack Hero: www.papareact.com/course
๐ซ Join my Community, "University of Code" for FREE: www.universityofcode.com/
๐ด Looking for the code for my other builds? ๐ ๏ธ
links.papareact.com/github
๐ฉ Want coding problems (with solutions!) delivered to your inbox daily? www.papareact.com/dailycodingchallenges
Join me as I show you how to build a Disney+ clone from scratch with the newly released Next.js 14. You'll learn the following in this build:
๐ Create a Beautiful UI & UX for our Disney+ clone using the highly Popular Shadcn!
๐ How to create and leverage the power of Azure Functions
๐ How to use the Azure OpenAI service for AI movie suggestions and completions!
๐ How to use Loaders in various ways whilst data is being fetched!
๐ How to cache data with Next.js 14 to optimise API calls and provide a Seamless, fast experience for the user
๐ How to build a beautiful UI design with Tailwind CSS!
๐ Learn how to implement Dark Mode toggling to update the UI based on user preference!
๐ How to use TypeScript to reduce the overall number of Bugs and Errors
๐ How to deploy the final build on Vercel!
๐ต WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here ๐ links.papareact.com/newsletter
๐ TIMESTAMPS
00:00 Introduction
01:02 Build Showcase
04:21 Access the Build Source Code for Free!
06:53 Build Tech (1/2)
07:26 Microsoft Azure Sponsorship
08:37 Build Tech (2/2)
12:27 Initialising the Build
17:32 Building the Home Page (1/2)
22:37 Build Plan
24:56 Building the Search Page (1/2)
31:31 Building the Genre Page (1/2)
38:09 Implementing Shadcn/ui
43:32 Building the Header Component (1/2)
51:08 Implementing Light & Dark Mode
56:06 Building the Header Component (2/2)
59:11 Building the Search Input Component
1:10:49 Implementing TMDB (The Movie Database) API
1:21:56 Setting Up Type Definitions
1:22:46 Building the Genre Dropdown Component
1:27:49 Building the Home Page (2/2)
1:29:26 Building the Movies Carousel Component (1/3)
1:32:15 Fetching Movie Information from TMDB API
1:40:17 Building the Movies Carousel Component (2/3)
1:41:05 Building the Movie Card Component
1:53:24 Building the Movies Carousel Component (3/3)
2:01:54 Building the Carousel Banner Wrapper Component
2:19:01 Building the Search Page (2/2)
2:27:37 Implementing Microsoft Azure OpenAI Service (1/3)
2:43:59 Implementing the OpenAI API Key
2:45:11 Implementing Microsoft Azure OpenAI Service (2/3)
2:54:04 Implementing useSWR (Approach #2 for AI Assistant)
3:06:35 Implementing Microsoft Azure OpenAI Service (3/3)
3:12:48 Building the Open AI Azure Suggestion Component
3:17:41 Building the Genre Page (2/2)
3:19:57 Deploying to Vercel with Live Debugging
3:54:04 Final Build Demo
3:54:37 Outro
Letโs get it PAPAFAM ๐ฅ.
DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Disney and/or any of its subsidiaries in any form. Copyright Disclaimer Under section 107 of the Copyright Act 1976, allowance is made for โfair useโ of this video for education purposes.
#nextjs #nextjs14 #react #disneyplus #typescript #reactjs #disney #coding #javascript #tailwindcss #shadcn #nosql #reactjstutorial #coding #tutorial #beginner #programming
All Comments (21)
-
My mentor, teacher, brother..sending love all the way from Zimbabwe ๐ฟ๐ผ
-
I absolutely love you and your videos Sonny. I've been watching you for a few years now!
-
amazing build beautiful work sonny
-
dayum - I got lost in the first 10min but watched till the end anyway. Very soothing experience while designing frontends in SASS. I gotta look at some of your more easier tuts for sure. Mad respect - you seem like a wizard to me. lol. Cheers.
-
As ALWAYS => Great video @sonny!! And Team PAPAFAM!!!! Hooyah, Lets Code!!!!
-
Best Christmas gift from sonny
-
your content is fire bro! thank you!
-
Great build mann!:elbowcough:
-
Great Work and training program thank you Sonny:)
-
Teh debugging was valuable at the end
-
nice video keep going โค
-
Damn.. I ran into the same problem with the 429 error and then solved it by myself. Then later saw that you dealt with it as well :D
-
Please can you make course how to create own CMS
-
that was something totally amazing ,I learnt a lot more new stuff from this video
-
If you cant deploy due to a map issue very easy fix, just modify your dropdown menu {data.genres?.map((genre) => ( add the ? to genres
-
๐๐ Gg man ๐
-
Hey nice build man ,are u going to make a mern stack project with stripe payment ??
-
Love you my teacher โค๏ธ๐ฅฐ From Afghanistan ๐ฆ๐ซ
-
Another great build. A small note. notFound is not returning, it is throwing an exception that next handles. Important to know about so you donโt put it in a try/catch.
-
Sir, I have a request. Please create a video on pagination and infinite scroll. This topic is frequently asked in interviews for React.js, Node.js, and even in regular JavaScript. Additionally, please provide an in-depth explanation on when to use each and the implementation details. Please make it similar to the way you create content. Make it in a way that questions or projects related to pagination or infinite scroll never pose any challenges.
