Instagram Clone - React Tutorial - Tailwind CSS - Firebase - React Testing Library - Cypress

Edit Subtitles

Title:

Description:

💰Extended paid version (3 hours 30 mins extra): https://gumroad.com/l/react-instagram-clone

✅ Subscribe: https://bit.ly/CognitiveSurge

🐤 Follow me on Twitter: https://twitter.com/karlhadwen

🧨 GitHub Repo (remember to star & follow!) https://github.com/karlhadwen/instagram

💻 My Tech Gear: https://kit.co/karlhadwen

👊 Discord (tech questions, resources, and general chit-chat!): https://discord.gg/3jTSgft

💰 Bitcoin address: 3GhoHmF4qPHT3bH59t8DuPvCTZwbzGcj5g

The stack you will use: React (custom hooks, useContext, useState, useEffect, useRef), Firebase (Firestore/auth), Tailwind CSS, LoadTest, Lighthouse, Vercel, React Testing Library and Cypress E2E Testing.

In this React Tutorial, we will build an Instagram clone! This React project has multiple pages: login, sign up, dashboard (to view/like/comment on photos), and user profiles. The sign-in page will connect to Firebase when a user tries to sign in, and when a user signs up, we will use Firebase auth to store the user in the Firebase auth database. I built this application using React, JavaScript, Firebase and for styling I used Tailwind CSS (which is amazing). You will need knowledge of React to not struggle on this tutorial (useState, useEffect, useContext) and you will need some knowledge of JavaScript to get you by. Once we have built the application we will deploy it to Vercel (of course after using Lighthouse & LoadTest to performance test).

🕰️ Timeline

0:00 - Introduction
7:11 - Showcase 
9:51 - Create React App (yarn)
12:45 - Project Folder Structure
14:49 - Installing Dependencies
17:10 - Refactoring unnecessary files, refactoring code
23:41 - Install ESLint
27:29 - Creating Folder Structure & Architecture
37:28 - Setup Firebase
38:45 - Firestore
41:07 - Firestore Rules
43:06 - Firestore (Collections & Docs)
45:23 - Firebase Authentication
48:22 - Realtime Database (Explanation)
49:08 - createContext in firebase.js
56:57 - Creating App in Firebase
1:03:38 - Start working on Login Page
1:04:40 - Install React Router Dom 
1:12:38 - Create Routes
1:16:14 - Continue working on Login Page (Part 2)
1:20:58 - Tailwind.css Introduction
1:25:57 - Continue working on Login Page (Part 3)
1:26:58 - Install more dependencies
1:30:53 - Change how all scripts work
1:34:44 - yarn add postcss -D
1:35:20 - Create components folder
1:39:56 - Tailwind.css setup
1:41:28 - Completed Tailwind Setup, Continue working on Login Page (Part 4)
1:45:05 - Interjection - Field Value
1:47:33 - Continue working on Login Page
2:07:24 - Tailwind.config
2:11:42 - Login Functionality (with Firebase)
2:16:49 - Signup Page
2:28:30 - Check for user created is a duplicate
3:00:26 - Not Found & Dashboard Page
3:06:48 - Created Timeline Component
3:07:05 - Created Sidebar Component
3:07:24 - Created Header Component
3:09:51 - use-auth-listener.js Hook
3:17:00 - users.js UserContext
3:21:15 - Back to Header Component
3:47:58 - Working on Dashboard Page
3:51:36 - Working on Sidebar Component
3:51:52 - use-user.js hook
4:09:57 - In user.js ⇒ Introduction to prop types
4:30:40 - Created Timeline.js
4:31:20 - Explanation on useMemo
4:33:22 - Add WhyDidYouRender
4:35:30 - 4:48:19 - Struggling with some issues 
4:48:19 - Finally Figuring out some problems with WhyDidYouRender
4:56:18 - Working on suggestion.js (sidebar completed)
5:04:57 - Get suggested profiles
5:22:05 - Functionality: Remove followed user from suggestion 
5:28:49 - Functionality: Update user’s following & followers
5:39:55 - Overview on Timeline
5:46:24 - Creating Post Component
5:48:34 - Creating more custom hooks (usePhotos)
6:09:53 - Rendering out the photos (using React skeleton)
6:16:32 - Start work on Post Component
6:20:55 - Components within Post
6:21:40 - Header Component
6:26:33 - Image & Actions
6:33:09 - Service call in Firebase
6:48:21 - Show Comments
6:56:50 - Add Comments
7:18:03 - Adding Protected Routes
7:32:50 - Profile
7:35:57 - Lazy load explanation
7:51:00 - Continue working on Profile Page
8:04:25 - Header Component in Profile Page
8:07:51 - Profile Specific Header
8:23:37 - Get User Photos
8:43:29 - Continue working on header
9:26:08 - Information in header
9:42:46 - Photos Component in Profile Page
9:55:44 - Recap of everything we’ve done
9:58:32 - Start of Review
10:01:10 - Not found header
10:02:41 - Review of usePhotos, useUsers, isUserLoggedIn, ProtectedRoute
10:04:12 - Review of contexts: firebase.js and user.js
10:04:34 - Review of Routes & Posts
10:07:08 - loadtest (Npm install -g loadtest)
10:21:04 - Create a production build
10:44:05 - Deployment to Vercel done but with issues
10:57:24 - Issues fixed
10:57:56 - Lighthouse
11:08:04 - Wrapping up
11:09:50 - Changes and Refactoring (Fixing Bugs)
11:54:27 - Quick Look at Paid Version
11:55:36 - Cypress
11:59:45 - Signing Off

☕ Show your support by buying me a coffee!

Extended paid version (3 hours 30 mins extra): https://gumroad.com/l/react-instagram-clone

Monzo: https://monzo.me/karlhadwen

YouTube url:	https://youtu.be/AKeaaa8yAAk
Created:	26. 4. 2021 12:05:37

CaptionsMaker.com

Instagram Clone - React Tutorial - Tailwind CSS - Firebase - React Testing Library - Cypress