andriajah Sat Oct 2021 3 years ago
🔴 Let's Build Instagram 2.0 With React.js! (next.js, Tailwind Css, Firebase V9, Nextauth, Recoil)
SPECIAL DISCOUNT: Use code SONNY for 7% OFF Annual Plans!
👉 Watch my REACT BASICS 101 class for FREE with 1 month FREE Skillshare access (First 1000 people): https://skl.sh/2Srfwuf
🚨 Join the world’s BEST developer community “Zero to Full Stack Hero” NOW: https://www.papareact.com/course
The much anticipated build is FINALLY HERE!
Join me as I build an incredible INSTAGRAM 2.0 clone (yes its completely mobile responsive!), you'll learn how to do the following in this build:
👉 Build a fully functional Instagram feed with comments!!!
👉 Use Tailwind CSS to build a FULLY mobile responsive web app!
👉 Build a custom authentication screen using NextAuth!
👉 Learn how to use the new Firebase v9 SDK!
👉 Learn to use Firebase storage API and upload images!
👉 Learn to use Recoil as a state management tool!
+ SO MUCH MORE!
🖥️ CODE
Get the code for my builds here: https://links.papareact.com/github
📰 NEWSLETTER (Join to get the PAPAFAM Playlist for FREE! 🎵)
https://links.papareact.com/newsletter
🎙️ 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
❤️ SUPPORT
PAPA Merch: https://links.papareact.com/merch
Donate: https://links.papareact.com/donate
🕐 TIMESTAMPS:
00:00 Introduction
01:01 Build Showcase
04:53 Build Explanation
06:53 Hostinger Sponsorship
08:54 Other Good Stuff
10:09 Setting up Next.js and Tailwind CSS
13:28 Initialising the build
23:42 Build Layout
26:42 Building the Header Component
30:00 Building the Left Section of the Header
42:09 Building the Middle Section of the Header
56:53 Building the Right Section of the Header
1:19:37 Implementing Sticky Header
1:22:30 Building the Feed Component
1:25:12 Building the Stories Section of the Feed (1/2)
1:29:40 Implementing Faker.js
1:43:56 Building the Stories Section of the Feed (2/2)
1:57:08 Building the Posts Component (1/2)
2:02:42 Building the Post Component (1/2)
2:04:49 Building the Header Section of the Post
2:09:25 Building the Image Section of the Post
2:11:01 Building the Buttons Section of the Post
2:15:42 Building the Captions Section of the Post
2:17:28 Building the Input Box Section of the Post
2:21:30 Building the MiniProfile Component
2:30:38 Building the Suggestions Component
2:40:00 Explaining NextAuth Authentication Custom Page
2:41:35 Implementing NextAuth Authentication (1/3)
2:46:53 Implementing and Explaining Firebase
2:56:49 Implementing a Custom Sign In Page
2:58:47 Customising the Sign In Page (1/2)
3:10:25 Implementing NextAuth Authentication (2/3)
3:19:26 Customising the Sign In Page (2/2)
3:25:18 Implementing NextAuth Authentication (3/3)
3:42:15 Explaining Recoil Implementation
3:43:23 Implementing Recoil
3:45:52 Implementing Recoil atoms
3:50:14 Building the Modal Component
4:11:16 Implementing Firebase v9
4:25:46 Testing Photo Upload Functionality
4:29:22 Building the Posts Component (2/2)
4:39:20 Building the Post Component (2/2)
4:41:16 Beating the Hacker(s)!
4:47:14 Implementing the Comment Functionality
4:55:31 Building the Comments Section of the Post
5:02:40 Implementing the Like Functionality
5:20:34 Final Build Demo (1/2)
5:22:11 Deploying to Vercel
5:32:23 Final Build Demo (2/2)
5:34:20 Outro
#reactjs #nextjs #tailwindcss #instagram #firebase #firebasev9 #recoil react developer reactjs html css js javascript papa papareact papa-react tutorial frontend webdev web-dev clone fullstack backend motivation reactnative react-native redux typescript