English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 114 lectures (44h 19m) | 24.28 GB
Next.js 13 (reactjs framework) Projects. 4 NextJS 13 projects. IMDB, Instagram, Twitter, Google clone using Next js 13
NEW Next.js 13 Projects. Build 4 brand new NextJS hands-on projects including IMDB, Instagram, Twitter and Google clones.
Welcome to the best course for learning next js through the development of real-world applications.
This is a project-based course that includes hands-on projects such as Instagram and Google clones.
We are going to use the best practices of Nextjs to design and build fully functional websites.
So far, three projects have been created for this course , including IMDB, Instagram, and Google clones, and more projects are being added each month. You can check the preview of each project in the course curriculum.
In this brand new course, you will learn rendering techniques such as how to build static site pages, server side rendering and incremental static regeneration. You will learn about pagination, image uploading functionality, and state management using recoil. You are going to be able to build amazing responsive websites with Tailwind CSS latest version (3.0).
This course also teaches you how to use Firebase for database and storage. We are going to use next-auth for authentication. And you are going to learn how to use TMDB and google search APIs.
Finally, you are going to learn how to deploy your apps using vercel with your own custom domain name.
My name is Sahand, and I have over 16 years of programming experience.
I will be your instructor and answer any questions you may have in the Q&A section.
The project you are going to build in this course:
IMDB Clone (Next.js 13)
- use TMBD database
- style with Tailwind CSS
Instagram Clone
- use Firebase for database and storage
- style with Tailwind CSS
- authenticate using next-auth
- apply like and comment functionality
- add upload functionality and use Image tag of nextjs
Google Clone (Next.js 13)
- style with Tailwind CSS
- authenticate using next-auth
- use google search api
- include web and image search
Twitter Clone
- style with Tailwind CSS
- authenticate using next-auth and Firebase auth
- apply like and comment functionalit
- add upload functionality and use Image tag of nextjs
What you’ll learn
- Learn to build 4 practical powerful NextJS apps including TMDB, Instagram, and Google Clones
- Learn all about rendering techniques such as how to build static site pages, server side rendering and incremental static regeneration
- learn about pagination, image uploading functionality, and state management using recoil.
- Learn how to use Firebase for database and storage.
- Learn how to use next-auth for authentication
- Learn how to use TMDB and google search APIs
- Learn how to deploy your apps using vercel with your own custom domain name
Table of Contents
Project – IMDb Clone (Next 13)
1 Intro
2 Install Next js 13
3 Install Tailwind CSS
4 Create the header section
5 Add dark mode
6 Create the about page
7 Create the navbar component
8 Fetch data from TMDB API in the home page
9 Handle the error
10 Add loading effect
11 Add card component
12 Add movie page
13 Add search ability
14 Deploy to Vercel
15 search params object is empty in production with next 13 app
Project – Google Clone (Next 13)
16 Intro
17 Install next js and create the first template
18 Install tailwind css
19 Add home header component
20 Add body section
21 Add footer component
22 Create search page for web and image
23 Update the search header component
24 Complete the search box component
25 Complete the search header options
26 Fetch data from google search API and show the titles
27 Handle possible errors
28 Create search result component
29 Add image results
30 Add pagination component
31
32
Project – Instagram Clone
33 Preview of instagram clone project
34 Install Nextjs and Tailwind CSS and create homepage template
35 Add instageram logo to the left side of the header component
36 Add search bar to the header component
37 Add the menu and profile image at the right side of the header
38 Implement sticky header
39 Populate fake data using minifaker and create feed and story components
40 Style the story section and install tailwind-scrollbar
41 Create posts and post components and make some dummy data
42 Create the header and image sections of the post component
43 Create the buttons section of the post component
44 Add the caption and input box of the post component
45 Make the feed section responsive
46 Create the mini profile component
47 Build the suggestion part of the feed component
48 Install next-auth and firebase and initilize the firebase
49 Complete the signin page
50 Get the session and modify the header component with google data
51 Modify mini profile and story components to include the session
52 Install recoil and add atom and UploadModal component
53 Install and impliment react-modal
54 Complete the UploadModal component
55 Create a post and add it to firestore and get the downloadURL
56 Get the post data from database and show it in the feed section
57 Hide buttons and input section when the user is logged out
58 Add comment to the firebase database
59 Show comments in the comments section and get data from the firebase database
60 Apply like functionality
61 Deploy to vercel
62 Update 1 – show the number of likes
63 Update 2 – add firebase auth insead of next-auth
Project – Twitter Clone
64 Preview of the twitter clone project
65 Install Nextjs and Tailwind CSS
66 Create Sidebar component
67 Create feed component and its header
68 Add the input section of the feed component
69 Add the post section of the feed component
70 Create the widgets component and the search bar
71 Create the news section of the widgets component
72 Create the random users section of the widgets component
73 Install next-auth and firebase and initialize the firebase
74 Complete the signin page
75 Get the session and modify sidebar and input components
76 Send data to firebase and add loading effect
77 Get post data from firestore and show them in the post section
78 Add like functionality to the post
79 Add delete functionality to the post
80 Add animation effect using framer motion
81 Install and implement recoil
82 Install and implement react-modal
83 Send comments to firestore, show the number of comments, & redirect by useRouter
84 Create post page
85 Get the comments from firestore and create the comment component
86 Complete the comment component
87 Deploy to vercel and fix the errors
88 Update – add firebase auth and remove next-auth
Project – IMDb Clone (Next 12)
89 Introduction to the IMDB clone project
90 Overview of the IMDB clone project
91 Install Next.js and Tailwind CSS
92 Create components and finish the template
93 Create the header component
94 Style the header section
95 Create the Navbar component and requests.js
96 Create server side function and pass it to client side
97 Create card component
98 Complete the card component and make the result section responsive
99 Deploy to vercel and add a custom domain name
Project – Google Clone (Next 12)
100 Preview of Google clone project
101 Install NextJS and Tailwind CSS
102 Create the header section
103 Add authentication and get user data from google
104 Create the body section
105 Create footer component
106 Get the term from input and redirect to the related page
107 Create search header component
108 Create search header options component
109 Get data from google api and create the mock data
110 Create the about data section and modify the title in search page
111 Complete the result section and install html react parser
112 Create pagination component
113 Add image results component
114 Deploy and fix the remaining buttons
Resolve the captcha to access the links!