🔴 Let’s build Disney+ 2.0 with NEXT.JS 14! (Microsoft Azure, Caching, OpenAI, Shadcn, Tailwind, TS)
Vložit
- čas přidán 16. 05. 2024
- ❗️ Sign up to get the Code for FREE here (Form must be submitted, not skipped!): aka.ms/Sonny_functions
🚨 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/dailycoding...
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
I absolutely love you and your videos Sonny. I've been watching you for a few years now!
My mentor, teacher, brother..sending love all the way from Zimbabwe 🇿🇼
amazing build beautiful work sonny
Best Christmas gift from sonny
Great Work and training program thank you 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.
your content is fire bro! thank you!
As ALWAYS => Great video @sonny!! And Team PAPAFAM!!!! Hooyah, Lets Code!!!!
Hell yeah James thank you for being awesome always!!!
Great build mann!
nice video keep going ❤
Hey nice build man ,are u going to make a mern stack project with stripe payment ??
Teh debugging was valuable at the end
Yo go Sunny my man 🚀
that was something totally amazing ,I learnt a lot more new stuff from this video
can you please tell me did he used tmdb api key or access token ?
@@Husnain-developer It's Api key, access token usually has an expiry date, api key just for preventing api abuse.
Love you my teacher ❤️🥰 From Afghanistan 🇦🇫
Great video mate, thanks a lot for sharing your knowledge with us!
I'm trying to create a new OpenAI Azure but in the plan I do not have any options to chose and I recieve this error:
"The subscription does not have QuotaId/Feature required by SKU 'S0' from kind 'OpenAI' or contains blocked QuotaId/Feature."
I really do not know what to do.
Thanks you all!
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
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
Please can you make course how to create own CMS
Why don't you never use the "container" class? Would love to know your answer.
🎉🎉 Gg man 🎉
Hey what are u using for getting screen shots images with text
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.
Great video bro! The step by step is very well done!
The only thing is if I already had a microsoft account linked to my github profile it gets quite tricky to continue with the Azure part of the video, even the part of filling out the form I think it goes too complicated to not have explained the process in the video (also such a boomer from Microsoft to have such an old way to let users use this, when the trial ends and if you want to continue using the services then I think a proper formal form should be filled but for people just trying for free I think they went too much).
I think I will go past of the Azure part of it as it did not feel like a user friendly system really for signing up.
Maybe it's just my case as I have already a microsoft account so (but who doesn't?)... even in the form microsoft asks for a company email which cannot be gmail or hotmail or outlook... I mean what's the scope of Microsoft for this apps? Just for use for big companies or can actually developers go test them for educational/research purposes?
Great build anyway Sonny! Keep 'em coming! 🤟🤟
The same here.
Thanks a Lot Sonny... You really inspire a lot of Us.
Wz wondering if you will be building a payment app in future, like google pay, Paypal or something similar... I will very much appreciate it. Thanks again.
Emmanuel, ur huge fan from Nigeria.
Отличная связка по заработку, всем успеха
I signed up
Great content, but super disappointed that access to OpenAI is being put behind a corporate email wall. I watched and coded along for 2.5 hours before realizing I couldn't use it because my application for access would be denied for using a personal email account.
Nevertheless, good intro to tailwind, shadcdn and some of the newer NextJS 14 features.
;-;
isnt the build available on your github repo? then whats the need to fill the form? I don't need the code anyway as you will only learn if you code along sonny!
P.S: I filled the form to help sonny! I just didnt liked the fact that he said, its a "must" to fill the form for the code
is this course for beginners as well?
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.
That's a very entitled request
You forgot to include search autocomplete with multi select search, start rating component, nested comments section
🔥🔥🔥
Anyone know how to enable auto import of components? it's not showing up for me
I am getting 500: Internal server error. What should I do?
which livestream platform you are using ,i mean that pink color sidebars and all?
you mean software? obs?
are all services(azure, openAI, tmdb,...) free?
This is what i want to know before watching whole video…
TMDB got blocked here in India 😞
You should make a how to get a job video :) or create a agency landing page? something worth our wild
I have been missing a lot
Note for myself: 23:45
waiting for building portfolio 2024 with NEXT.js 14 😍❤️
Great idea
I am building one with all the latest stack, ping me if you want to know the progress
@@rishabh1S cool, how can we get connected?
sir please start react native full stack projects like chat apps or any soical media apps plz sir plz i am waiting with modern technologies with light and dark themes etc
8:20 request access to openAI service.
time stamps plz
👏🏿👏🏿👏🏿👏🏿👏🏿
1:58:00
could you do a zapier clone or somthing similar ?
i've got some issue when try using dark mode. the error says "Unhandled Runtime Error
InvalidCharacterError: DOMTokenList.add: The token can not contain whitespace."
Bro What do you think of FLUTTER ?@SonnySangha