Facebook Full Stack Clone with REACT! Next.js, Tailwind CSS, Firebase for Beginners
DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Facebook and it's 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.
Facebook Full Stack Clone with REACT! Next.js, Tailwind CSS, Firebase for Beginners
Book a session with me on Fiver: https://www.fiverr.com/andreibarbu681...
👑👑👑👑👑
Discord: / discord
Patreon: https://www.patreon.com/user?u=81130310
Code on Github: https://github.com/andreibarbu5/Faceb...
In this video, we are going to build a Facebook full stack clone with React. Next.js, Tailwind CSS, and Firebase for beginners. We will cover everything from setting up the development environment to deploying the app to the cloud!
Facebook is one of the most popular social networks in the world, so it's important to have a working knowledge of React.
Next.js is a React library that makes building apps with React fast and fun.
Tailwind CSS is a super lightweight CSS framework that makes development faster and easier.
Firebase is a powerful cloud-based platform that makes developing apps with web technologies easy.
TimeStamps:
0:00 Intro
2:41 Installing Next.js and Tailwind Css
5:48 Building the Header
8:55 Building the Left side of the Header
12:32 Building the Middle Part of the Header
17:47 Building the Right side of the Header
27:08 Creating the Feed Component
29:18 Creating the Left Sidebar
36:35 Description to the Left Sidebar
43:10 Facebook Stories
52:35 Stories Responsive
1:00:06 Story second part
1:12:27 New Post Component
1:31:19 Second Part New Post
1:41:15 New Post Responsive
1:47:15 Recap
1:47:48 Frontend Part 2
1:48:02 Post Header
2:03:24 Post Caption
2:04:19 Post Image
2:06:16 Buttons
2:19:19 Comment Section
2:26:50 Post Input
2:46:15 RightSidebar
3:00:37 Right Sidebar Responsive
3:07:17 Backend Part 1
3:07:31 Connect to NEXT Auth
3:11:52 Connect to Firebase
3:16:51 Google Auth
3:23:39 SignIn Page
3:25:57 Configuring Google Cloud Credentials
3:30:00 Adding the user session
3:44:25 Upload a post to Firebase
3:55:35 Importing the Posts from Firebase
4:03:37 Rendering the posts
4:12:05 Adding a photo
4:32:25 Previewing the Image
4:38:10 Like Functionality
5:00:05 Comments Functionality
5:16:56 Backend Part 2
5:17:15 Fixing Comments
5:27:55 Signed out picture
5:37:06 Styling the sign in page
5:46:10 Uploading to Github
5:47:31 Uploading to vercel
5:48:28 Key prop fix
6:01:10 Result
Music:
Track: Machine Guy — gbry.svg [Audio Library Release]
Music provided by Audio Library Plus
Watch: • Machine Guy — gbry.svg | Free Backgro...
Free Download / Stream: https://alplus.io/machine-guy
Track: The Portal — Next Route [Audio Library Release]
Music provided by Audio Library Plus
Watch: • The Portal — Next Route | Free Backgr...
Free Download / Stream: https://alplus.io/portal
Track: Eight — Land of Fire [Audio Library Release]
Music provided by Audio Library Plus
Watch: • Eight — Land of Fire | Free Backgroun...
Free Download / Stream: https://alplus.io/eight
Track: Tiger — Metro Vice [Audio Library Release]
Music provided by Audio Library Plus
Watch: • Video
Free Download / Stream: https://alplus.io/tiger
Days Like This by Justhea / justhea
Creative Commons — Attribution-ShareAlike 3.0 Unported — CC BY-SA 3.0
Free Download / Stream: https://bit.ly/3dOQQX8
Music promoted by Audio Library • Days Like This – Justhea (No Copyrigh...
Crimson - Mehul Choudhary / mehul-choudhar. .
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
Free Download / Stream: https://bit.ly/3e73wZI
Music promoted by Audio Library • Crimson – Mehul Choudhary (No Copyrig...
Letting Go by Hotham / hothammusic
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
Free Download / Stream: https://bit.ly/3rbLJ6l
Music promoted by Audio Library • Letting Go – Hotham (No Copyright Music)
Highfly by Jay Someday / jaysomeday
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
Free Download / Stream: https://bit.ly/3yiWPdV
Music promoted by Audio Library • Highfly – Jay Someday (No Copyright M...
Keep Me by tubebackr / tubebackr
Creative Commons — Attribution-NoDerivs 3.0 Unported — CC BY-ND 3.0
Free Download / Stream: https://bit.ly/3CBrXYx
Music promoted by Audio Library • Keep Me – tubebackr (No Copyright Music)
-
Daytrip by Spiring / user-57630131
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
Free Download / Stream: https://bit.ly/3qQFHI7
Music promoted by Audio Library • Daytrip – Spiring (No Copyright Music)
-
DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Facebook.