English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 25 lectures (12h 16m) | 7.52 GB
Next.js (react js framework) Project. NextJS hands on project. Build Twitter clone using Next js, Firebase, Tailwind css
A NEW Project Using Next.js and Firebase. Construct a Twitter clone using NextJS and Firebase in a hands-on project (Twitter clone) from scratch.
We are excited to have you join us for the best course available for learning next.js, Firebase, and Tailwind CSS by building a real-world application.
This is a hands-on course that focuses on project-based learning and includes a Twitter clone project.
When it comes to the design and development of websites that are fully functional, we will be utilizing the best practices that Nextjs has to offer.
You will learn rendering technique which is called server-side rendering. In this brand-new course. The functionality of image uploading, as well as state management with recoil, will be covered in this lesson. Using the most recent version of Tailwind CSS (3.0), you will have the ability to create incredible websites that are responsive.
This course will also instruct you on how to make use of Firebase as a database and storage solution. The authentication process is going to be handled by next-auth.
In the end, you will discover how to deploy your applications by making use of Vercel while utilizing a domain name that is uniquely yours.
My name is Sahand, and I have over 16 years of experience in the field of programming.
I will be your instructor and will respond to any questions that you may have in the Question and Answer section.
The following are the main things that will make up the final project for this class:
- Tailwind CSS is used for styling.
- authenticate the user using next-auth as well as Firebase auth.
- Make use of the like and comment functionality.
- Add functionality for uploading files and make use of the Image tag in nextjs.
What you’ll learn
- Construct a Twitter clone using NextJS and Firebase in a hands-on project (Twitter clone) from scratch.
- Utilizing the best practices that Nextjs has to offer.
- You will learn server-side rendering technique.
- sing the most recent version of Tailwind CSS 3.
- Learn how to make use of Firebase as a database and storage solution.
- Authenticate the user using next-auth as well as Firebase auth.
Table of Contents
Introduction
1 Preview of the twitter clone project
Installation
2 Install Nextjs and Tailwind CSS
The home page UI
3 Create Sidebar component
4 Create feed component and its header
5 Add the input section of the feed component
6 Add the post section of the feed component
The home page widgets section
7 Create the widgets component and the search bar
8 Create the news section of the widgets component
9 Create the random users section of the widgets component
Authentication using Firebase and next-auth
10 Install next-auth and firebase and initialize the firebase
11 Complete the signin page
12 Get the session and modify sidebar and input components
13 Send data to firebase and add loading effect
Feed section functionality (like, comment, delete)
14 Get post data from firestore and show them in the post section
15 Add like functionality to the post
16 Add delete functionality to the post
17 Add animation effect using framer motion
18 Install and implement recoil
19 Install and implement react-modal
20 Send comments to firestore, show the number of comments, & redirect by useRouter
Post page
21 Create post page
22 Get the comments from firestore and create the comment component
23 Complete the comment component
Deployment
24 Deploy to vercel and fix the errors
Updates
25 Update – add firebase auth and remove next-auth
Resolve the captcha to access the links!