Next.js 14 and Tailwind CSS project for beginners | Build a Movie app similar to IMdB
Вставка
- Опубліковано 1 сер 2024
- Get Hostinger Discount: hostinger.com/Sahand Coupon Code: SAHAND
Are you eager to become an expert in Next.js 14? You've come to the right place! Delve into our complete Next.js tutorial, where we walk you through everything from the basics to advanced methods. Whether you're just starting out with Next.js or aiming to construct a complete website using Next.js and Tailwind CSS, this crash course is perfect for you.
Discover the newest functionalities of Next.js 14 and master the art of crafting impressive portfolios and projects. With our comprehensive Next.js 14 course, you'll gain the proficiency to tackle any Next.js task. Embark on this thrilling journey with us and enhance your development skills today!
Source code and final version: github.com/sahandghavidel/imd...
Eraser diagram: app.eraser.io/workspace/v2yko...
Welcome to this project where we build an IMdB clone with Next.js 14 and Tailwind CSS. With the release of Next.js 14, website creation has become incredibly optimised and easy. In this course, we'll walk you through the process, step by step.
We'll start by understanding how to organise the folder and file structure of our Next.js 14 project. Then, we'll jump right into building an IMdB clone from scratch, utilising the power of the TMDB API. Just imagine, creating your very own Movie database app similar to imdb.com!
But that's not all. We'll enhance our project with modern design elements using Tailwind CSS, ensuring our website looks professional. Plus, we'll learn how to add loading effects seamlessly with the modern approach of Next.js 14 and handle errors efficiently using its error file.
As we progress, we'll tackle more advanced concepts like implementing search functionality and creating different components tailored to our needs, whether server-side or client-side. We'll even develop separate pages for each movie with its own unique design as well as dark mode functionality using Tailwind CSS.
Timestamp:
00:00 - Intro
3:00 - File and folder structure in Next.js 14 to create pages and routes
20:32 - Install Next.js and Tailwind CSS and create the first template
34:20 - Create the header section
48:28 - Add dark mode
01:03:55 - Create the about page
01:08:01 - Create the navbar component
01:18:08 - Fetch data from TMDB API in the home page
01:29:07 - Handle the error using next.js 14
01:33:00 - Add loading effect using next.js 14
01:39:45 - Add card component
01:54:00 - Add movie page
02:06:00 - Add search box
02:15:36 - Deploy to Hostinger
Get Hostinger Discount: hostinger.com/Sahand Coupon Code: SAHAND
Sahand,
To be honest, I couldn't find anyone else on UA-cam who does not copy and paste or watch a second monitor while presenting themselves as a super developer. Sahand is truly exceptional; he has taught me what development looks like. His videos are recorded naturally, as he looks at Figma and writes code like a real developer. Sahand is undeniably one of the best UA-camrs I have ever seen.
Thank you, Sahand, for your continuous dedication. You truly deserve thousands of subscribers. Your skills as a developer are truly remarkable.
Awesome! I've just took my first steps with Next.js 14. Following this tutorial was admittedly fun and very educational for me, I feel I've learned plenty of things. Thank you very much for sharing!
You are now my favourite channel on youtube. I am always excited to check out your content
Thanks for all projects you provided for the channel, I am learning a lot!
My pleasure!
Please typscript, prisma, your my first teacher
Thanks for your suggestion, I will try to include them in my future projects.
so clear and understandable
Amazing ... Thank you so much Sahand 🔥💯
My pleasure 😊
it is really very very nice class to understanding the folder structure..........
Amazing. Thank you for video
Thank You Sahand.
Love from Bangladesh
Love you too! thanks for commenting.
I have done your previous two mern projects completely. I have learned very much things
Thanks ❤
I am happy to work on these next js projects❤
Great job! I am going to upload more projects soon, let me know what project you are interested
@reactproject please add ai features in your next projects and also forget password features mandatory by sending email to users.
Add some Ai models for recommended similar products or any else according to your projects.
Thanks🥀
sure mate thanks for you suggestions, I will keep them in mind for future projects :)
thanks for this
thanks for your comment. let me know your feedback about the project and what you want to see next :)
Amazing!! Thanks!
Thank you too!
First of all , thanks a lot for your beautiful lesson on next js 14. Sahand❤ your teaching technique is really fantastic.👏
It's my pleasure
Great . Thanks Sahand ♥
you are welcome :)
14:18 On entire UA-cam Just I Found this Channel One Best Explanation ever I seen.... Please continue this type video's by the way I'm your family member ☺️
Thank you, I will make more projects using next.js soon
Thank you so much sir .
So nice of you
Thank you so much Sahand. my great Master my inspiration. 🔥🔥
Sahand the legend ⭐
thanks for your comment. let me know your feedback about the project and what you want to see next :)
thanks
it was awesome bro
You are awesome bro!! Greetings from Colombia :3.
Thanks! You too!
This is an amazing tutorial, thank you for that ! i would like to see pagination added to it if its possible
Great suggestion!
Nice first part ! Maybe it could be an individual video ... Thanks for your (good) work !
Glad you liked it! I like using eraser to illustrate the concepts
Muito bom! Very good!
thanks for your comment. let me know your feedback about the project and what you want to see next :)
hello sir which software are you using for demostration of the folder structure?
Wonderful sahand! I assume you're originally iranian . so am i. loved the accent and the smooth pace of the tutorial . It would be wonderful if you do a big project like Airbnb .
Thank you so much 😀
Thank You ❤
افتخار مایی ❤❤
❤❤❤❤
Thank you for uploading new project. I have complete MERN Blog app , Realtor, Google clone app from your videos. Your explanation is very nice. I have learn a lot of things , like debugging error.
thanks for your comment. let me know your feedback about this project and what you want to see next :)
@@reactprojectyour every project are very good and easy to understand every concept. Please make a big project so clear all concepts with project .
Thanks, a lot.................
So nice of you
keep going
Please include typescript as well
can anyone help me? in Navbar className="dark:bg-gray-700" is not working
Hi Sahand you're always my best guide i learned alot from your mern projects now i want to learn more about nextjs 14 with you..can you please make a project that we have on our own database and includes crud and other things like in mern-estate and mearn-blog ? Thank you for your hard work sir 🙏
thanks ❤
Thank you for this tutorial, Sir. Although I've done a couple projects already with these very tools, I still enjoyed watching you code. What extension was giving you the code completion. Is it free? I just uninstalled Tabnine because you need the PRO version to get the features I was looking for.
Hi it is github copilot and it is 10 dollars per month
I ran into 2 errors, firstly.....my about page duped for no reason, then my header in layout.js just kept saying "cant find module @/components/Header". Such random errors from nowhere
Hey so I know nothing about NextJS but I am familiar with react. Can I follow this tutorial?
Hi, next.js is much easier than react and it has many common concepts. This tutorial is created beginner friendly and I highly recommend if it is your first next.js project.
@@reactproject then I'll definitely do it thanks.
Pls one project with typescript too ❤
Very good content appreciate your efforts,can you make a video series on eCommerce with payment gateway security..
sure mate thanks for you comment, I am working on more projects. The next one is a social media app using nextjs. I will use your suggestions for future videos
Hello, can you create a video with Nextjs and Zustand please ? Thank you for this one :)
sure mate thanks for your comment. let me know your feedback about the project :)
hello sir , i recently learned react , nextjs ,prisma , reactquery and can you please make projects by using that technologies because i want to become a full stack developer but no one has the teaching skills that you have ! In life i believe one thing that is if you want to become great your master should be great and i think it is you and there are less teachers who takes the student deep into the subject ! and also i am very confused on how to build projects because no one is telling me how projects should be done from begining to end ! i need your suggestion on that .hope you gonna replay me!
Sir in ur next project please make use of admin panel and working with database no sql and using special features like notifications chat and stories/reels display for ur next social media app.... All this would be so great and so unique
Sure I will
ITS SHOWING ' FAILED TO FETCH DATA ' FROM THE TMDB API, CAN SOMEONE HELP ME WITH THIS ERROR ?
check your api key and fetch url
@@reactproject thank u for replying SIR, I've been rechecking everything several times and stuck in this api problem from 10-15 days but every time the website shows same ' FAILED TO FETCH DATA ' error, regenerated API keys many times, Nothings woking, even asked many of my friends to solve the error, but can't resolve it,
I've even compared and tried to copy paste your GitHub code but NO PROGRESS . SORRY the reply got too long😅but happy u replied instantly.
@@reactproject Unhandled Runtime Error & Unable to get Data in my TERMINAL, Stuck in this DATA FETCH AND API ERROR FROM APPROX A MONTH NOW 🥲
Is there alternative for TMDB API key as I the TMDB servers are low right now while I am making this project
it should be temporary try again, i don't know a good one like tmdb
Thanks !
You can build with typescript ?
Yes I can!
waiting for it!@
Thanks!
@@reactproject
I have one question when we work in next js and node js then nodejs devloper send token in response then we can get it in client side then how we can protect page in middleware using server side because next js middleware run on server
the page that is protected does not need to be server side as is it not important for SEO
@@reactproject I mean when I don't have token and i want to access the protected page then I want to redirect login page that concept I don't understand in next js with node js because it's protect we define in middleware and middleware default run on server
it is similar you can have token as well, I will make a project with backend in next.js soon
Please build Multivendor E-commerce Application with MernStack
sure mate, more projects are coming soon
Is it responsive?
sir please make one video on typescript and ORM and next js on ERP trackcer website
sure mate, I will make more videos using next.js this year, I will keep in mind your suggested topics
Thank you so much about this videos , Could you please make for us a video about payment online like stripe and Paypal in website using MERN stack and thank you
sure thanks for your comment. let me know your feedback about the project :)
Sir please make a video on eCommerce website clone including payment getaway
And admin panal
sure mate very soon
Please more Next JS projects with mongodb.
more projects are coming soon on the channel :)
Make a beginner React Project which can get us hired as an intern developer 👏👏
I am working on it now.
Is this begginer friendly?
yes it is made for beginners
@@reactproject Thank you, I'm a 16 year old from india. Do you think I can learn full stack web development in a year (just the basic which is necessary to build web so I can do freelancing). And btw a request video - building a portfolio, simple with animations. Thank you and have a great day aheah.😃
thanks for your suggestion, age is not important and just a number, I started learning programming when I was 12
@@reactproject Okay, thank you for your time.
Bro can u please share the resources from where I can learn the Basics, to connect with you make a discord channel or insta id😅
it project is already basic, I will make more basic videos soon
@@reactproject Okay that is good! Could we connect through Instagram or another medium? I would appreciate your guidance and advice
you can connect with my instagram: @ghavidelsahand
@@reactproject zindex22 - follow request sent