๐Ÿ”ด Let’s build Facebook 2.0 with REACT.JS! (Next.js, Tailwind CSS, Image Uploading, Facebook Login)

Sonny Sangha

๐Ÿšจ Join the worldโ€™s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course

๐Ÿซ‚ Join my Community, “University of Code” for FREE: https://www.universityofcode.com

๐Ÿ”ด LOOKING FOR THE CODE? ๐Ÿ› ๏ธ
https://links.papareact.com/github

๐Ÿ“ฉ Want coding problems (with solutions!) delivered to your inbox daily? https://www.papareact.com/dailycodingchallenges

Join me as I build a completely responsive real-time Facebook 2.0 with TAILWIND CSS (with 2.1 JIT!) & NEXT.JS with Image Upload functionality and Powered by Firebase!

๐ŸŽ™๏ธ PODCAST
https://links.papareact.com/podcast

๐ŸŒ SOCIALS:
Instagram: https://links.papareact.com/instagram
Facebook: https://links.papareact.com/facebook
LinkedIn: https://links.papareact.com/linkedin
Twitter: https://links.papareact.com/twitter
Discord: https://links.papareact.com/discord
Newsletter: https://links.papareact.com/newsletter

โค๏ธ SUPPORT
PAPA Merch: https://links.papareact.com/merch
Donate: https://links.papareact.com/donate

๐Ÿ• TIMESTAMPS:
00:00 Introduction
00:25 Build Showcase
03:58 Initialising the Build
09:53 Setting Up Tailwind CSS
15:21 Building the Header Component
19:24 Building the Left Side of the Header
39:01 Building the Center of the Header (Header Icon Component)
57:41 Building the Right Side of the Header (1/2)
1:04:37 Implementing NextAuth.js
1:18:14 Building the Login Component
1:27:26 Building the Right Side of the Header (2/2)
1:31:07 Building the Sidebar Component
1:35:33 Building the SidebarRow Component (with Intense Debugging)
1:48:07 Building the Feed Component
1:49:13 Building the Stories Component
1:51:09 Building the StoryCard Component (with Intense Debugging)
2:15:32 Building the InputBox Component (1/2)
2:31:26 Implementing Cloud Firestore
2:35:27 Building the InputBox Component (2/2)
2:59:31 Building the Posts Component
3:02:12 Building the Post Component
3:16:16 Building the Widgets Component
3:23:06 Building the Contact Component
3:26:40 Almost Final Build Demo
3:28:50 Implementing Additional Server Side Rendering Step
3:35:03 Final Build Demo
3:37:49 Outro

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.

#reactjs #tailwindcss #nextjs