Create an Instagram Clone with React, Tailwind CSS, Firebase - Tutorial

Learn how to create an Instagram clone with React and JavaScript! This project uses React (custom hooks, useContext, useState, useEffect, useRef), Firebase (Firestore/auth), Tailwind CSS, LoadTest, Lighthouse, Vercel, React Testing Library and Cypress E2E Testing. This React project has multiple pages: login, sign up, dashboard (to view/like/comment on photos), and user profiles. The sign-in page connects to Firebase when a user tries to sign in, and when a user signs up, Firebase auth is used to store the user in the Firebase auth database. After the application is built you will learn how to deploy it to Vercel. ✏️ Course created by Karl Hadwen. Check out his channel: https://www.youtube.com/c/CognitiveSurge 💻 Code: https://github.com/karlhadwen/instagram ❤️ Try interactive React courses we love, right in your browser: https://scrimba.com/freeCodeCamp-React (Made possible by a grant from our friends at Scrimba) ⭐️ Course Contents ⭐️ ⌨️ (0:00:00) Introduction ⌨️ (0:05:37) Showcase ⌨️ (0:15:28) Create React App (yarn) ⌨️ (0:18:22) Project Folder Structure ⌨️ (0:20:26) Installing Dependencies ⌨️ (0:22:47) Refactoring unnecessary files, refactoring code ⌨️ (0:29:18) Install ESLint ⌨️ (0:33:06) Creating Folder Structure & Architecture ⌨️ (0:43:05) Setup Firebase ⌨️ (0:44:22) Firestore ⌨️ (0:46:44) Firestore Rules ⌨️ (0:48:43) Firestore (Collections & Docs) ⌨️ (0:51:00) Firebase Authentication ⌨️ (0:53:59) Realtime Database (Explanation) ⌨️ (0:54:45) createContext in firebase.js ⌨️ (1:02:34) Creating App in Firebase ⌨️ (1:09:15) Start working on Login Page ⌨️ (1:10:17) Install React Router Dom ⌨️ (1:18:15) Create Routes ⌨️ (1:21:51) Continue working on Login Page (Part 2) ⌨️ (1:26:35) Tailwind.css Introduction ⌨️ (1:31:34) Continue working on Login Page (Part 3) ⌨️ (1:32:35) Install more dependencies ⌨️ (1:36:30) Change how all scripts work ⌨️ (1:40:21) yarn add postcss -D ⌨️ (1:40:57) Create components folder ⌨️ (1:34:19) Tailwind.css setup ⌨️ (1:35:51) Completed Tailwind Setup, Continue working on Login Page (Part 4) ⌨️ (1:39:28) Interjection: Field Value ⌨️ (1:41:56) Continue working on Login Page ⌨️ (2:01:47) Tailwind.config ⌨️ (2:06:05) Login Functionality (with Firebase) ⌨️ (2:11:12) Signup Page ⌨️ (2:22:53) Check for user created is a duplicate ⌨️ (2:54:49) Not Found & Dashboard Page ⌨️ (3:01:11) Created Timeline Component ⌨️ (3:01:28) Created Sidebar Component ⌨️ (3:01:47) Created Header Component ⌨️ (3:04:14) use-auth-listener.js Hook ⌨️ (3:11:23) users.js UserContext ⌨️ (3:15:38) Back to Header Component ⌨️ (3:42:21) Working on Dashboard Page ⌨️ (3:45:59) Working on Sidebar Component ⌨️ (3:46:15) use-user.js hook ⌨️ (4:04:20) In user.js ⇒ Introduction to prop types ⌨️ (4:25:03) Created Timeline.js ⌨️ (4:25:43) Explanation on useMemo ⌨️ (4:27:45) Add WhyDidYouRender ⌨️ (4:29:53) Struggling with some issues ⌨️ (4:42:42) Finally Figuring out some problems with WhyDidYouRender ⌨️ (4:50:41) Working on suggestion.js (sidebar completed) ⌨️ (4:59:20) Get suggested profiles ⌨️ (5:16:28) Functionality: Remove followed user from suggestion ⌨️ (5:23:12) Functionality: Update user’s following & followers ⌨️ (5:34:18) Overview on Timeline ⌨️ (5:40:47) Creating Post Component ⌨️ (5:42:57) Creating more custom hooks (usePhotos) ⌨️ (6:04:16) Rendering out the photos (using React skeleton) ⌨️ (6:10:55) Start work on Post Component ⌨️ (6:15:18) Components within Post ⌨️ (6:16:03) Header Component ⌨️ (6:20:56) Image & Actions ⌨️ (6:27:32) Service call in Firebase ⌨️ (6:42:44) Show Comments ⌨️ (6:51:13) Add Comments ⌨️ (7:12:26) Adding Protected Routes ⌨️ (7:27:13) Profile ⌨️ (7:30:20) Lazy load explanation ⌨️ (7:45:23) Continue working on Profile Page ⌨️ (7:58:48) Header Component in Profile Page ⌨️ (8:02:14) Profile Specific Header ⌨️ (8:18:00) Get User Photos ⌨️ (8:37:52) Continue working on header ⌨️ (9:20:31) Information in header ⌨️ (9:37:09) Photos Component in Profile Page ⌨️ (9:50:07) Recap of everything we’ve done ⌨️ (9:52:55) Start of Review ⌨️ (9:55:33) Not found header ⌨️ (9:57:04) Review of usePhotos, useUsers, isUserLoggedIn, ProtectedRoute ⌨️ (9:58:35) Review of contexts: firebase.js and user.js ⌨️ (9:58:57) Review of Routes & Posts ⌨️ (10:01:31) loadtest (Npm install -g loadtest) ⌨️ (10:15:27) Create a production build ⌨️ (10:38:28) Deployment to Vercel done but with issues ⌨️ (10:51:47) Issues fixed ⌨️ (10:52:19) Lighthouse ⌨️ (11:02:27) Wrapping up ⌨️ (11:04:13) Changes and Refactoring (Fixing Bugs) ⌨️ (11:48:50) Quick Look at Paid Version ⌨️ (11:49:59) Cypress ⌨️ (11:54:08) Signing Off -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news