🔴 Let’s build Disney+ 2.0 with NEXT.JS 14! (Microsoft Azure, Caching, OpenAI, Shadcn, Tailwind, TS)
ฝัง
- เผยแพร่เมื่อ 1 พ.ค. 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
🔴 LOOKING FOR THE CODE? 🛠️
links.papareact.com/github
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 coding problems (with solutions!) delivered to your inbox daily!?
Sign Up Here: www.papareact.com/universityo...
🎵 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
![รุ่นใหญ่ EP.2 บุกบ้าน เสรีพิศุทธ์ ระหว่าง บิ๊กต่อ กับ บิ๊กโจ๊ก อา รักใครมากกว่า ?? l [Nickynachat]](http://i.ytimg.com/vi/j2inUqhN__0/mqdefault.jpg)
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
Best Christmas gift from 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.
Great build mann!
Great Work and training program thank you Sonny:)
As ALWAYS => Great video @sonny!! And Team PAPAFAM!!!! Hooyah, Lets Code!!!!
Hell yeah James thank you for being awesome always!!!
that was something totally amazing ,I learnt a lot more new stuff from this video
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
🎉🎉 Gg man 🎉
Hey nice build man ,are u going to make a mern stack project with stripe payment ??
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
Love you my teacher ❤️🥰 From Afghanistan 🇦🇫
Yo go Sunny my man 🚀
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.
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!
Hey what are u using for getting screen shots images with text
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.
🔥🔥🔥
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.
I signed up
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
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.
;-;
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.
Отличная связка по заработку, всем успеха
is this course for beginners as well?
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
which livestream platform you are using ,i mean that pink color sidebars and all?
you mean software? obs?
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?
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?
Note for myself: 23:45
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
I have been missing a lot
👏🏿👏🏿👏🏿👏🏿👏🏿
are all services(azure, openAI, tmdb,...) free?
This is what i want to know before watching whole video…
TMDB got blocked here in India 😞
8:20 request access to openAI service.
You should make a how to get a job video :) or create a agency landing page? something worth our wild
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