English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 31 lectures (10h 30m) | 6.50 GB
Next js (react js framework) Project. NextJS hands on project. Build instagram clone by Next.js, Firebase, Tailwindcss 3
In a hands-on project (Instagram clone), build an Instagram clone from scratch using NextJS, Firebase and Tailwind CSS.
I am thrilled to have you join me for the best course available for learning next js, Firebase, and Tailwind CSS by creating a real-world application.
This is a hands-on course that focuses on project-based learning and includes an Instagram clone project.
When it comes to the design and development of fully functional websites, I will be utilizing the best practices that Nextjs has to offer.
You will learn about the server-side rendering technique in this brand-new course. This lesson will go over the functionality of image uploading as well as state management with recoil. You will be able to create incredible responsive websites using the most recent version of Tailwind CSS (3.0).
This course will also teach you how to use Firebase as a database and storage solution. Next-auth will handle the authentication process.
Finally, you will learn how to deploy your applications using Vercel and a domain name that is uniquely yours.
My name is Sahand, and I have more than 16 years of programming experience.
I will be your instructor and will answer any questions you may have in the Question and Answer section.
The following are the main components of this class’s final project:
- Tailwind CSS is used for styling.
- Authenticate the user with both next-auth and Firebase auth.
- Use the like, delete and comment features.
What you’ll learn
- Build an Instagram clone from scratch using NextJS, Firebase & Tailwind CSS..
- Utilizing the best Nextjs practices available.
- You will learn techniques for server-side rendering.
- Using the latest version of Tailwind CSS.
- Find out how to use Firebase as a database and a place to store files.
- Use both next-auth and Firebase auth to check the session token.
Table of Contents
Introduction
1 Intro to instageram clone project
Installation
2 Install Nextjs and Tailwind CSS and create homepage template
Header section
3 Add instagram logo to the left side of the header component
4 Add search bar to the header component
5 Add the menu and profile image at the right side of the header
6 Implement sticky header
Story section
7 Populate fake data using minifaker and create feed and story components
8 Style the story section and install tailwind-scrollbar
Feed section
9 Create posts and post components and make some dummy data
10 Create the header and image sections of the post component
11 Create the buttons section of the post component
12 Add the caption and input box of the post component
13 Make the feed section responsive
Mini profile and suggestion section
14 Create the mini profile component
15 Build the suggestion part of the feed component
Authentication using Firebase and next-auth
16 Install next-auth and firebase and initilize the firebase
17 Complete the signin page
18 Get the session and modify the header component with google data
19 Modify mini profile and story components to include the session
Upload modal
20 Install recoil and add atom and UploadModal component
21 Install and impliment react-modal
22 Complete the UploadModal component
Add functionality to the feed section
23 Create a post and add it to firestore and get the downloadURL
24 Get the post data from database and show it in the feed section
25 Hide buttons and input section when the user is logged out
26 Add comment to the firebase database
27 Show comments in the comments section and get data from the firebase database
28 Apply like functionality
Deployment
29 Deploy to vercel
Updates
30 Update 1 – show the number of likes
31 Update 2 – add firebase auth insead of next-auth
Resolve the captcha to access the links!