Summary
Keywords
Full Transcript
🚨 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 Check out Hostinger 👉 https://www.hostinger.com/sonny SPECIAL DISCOUNT: Use code SONNY for 7% OFF Annual Plans! The much anticipated build is FINALLY HERE! Join me as I build an incredible Photo Sharing App (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! 🎙️ 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 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 DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Instagram 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 #nextjs #tailwindcss #instagram #firebase #firebasev9 #recoil
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
