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