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 ⭐️ 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 And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp