Completed
Realtime Database (Explanation)
Class Central Classrooms beta
YouTube videos curated by Class Central.
Classroom Contents
Create an Instagram Clone with React, Tailwind CSS, Firebase - Tutorial
Automatically move to the next video in the Classroom when playback concludes
- 1 Introduction
- 2 Showcase
- 3 Create React App (yarn)
- 4 Project Folder Structure
- 5 Installing Dependencies
- 6 Refactoring unnecessary files, refactoring code
- 7 Install ESLint
- 8 Creating Folder Structure & Architecture
- 9 Setup Firebase
- 10 Firestore
- 11 Firestore Rules
- 12 Firestore (Collections & Docs)
- 13 Firebase Authentication
- 14 Realtime Database (Explanation)
- 15 createContext in firebase.js
- 16 Creating App in Firebase
- 17 Start working on Login Page
- 18 Install React Router Dom
- 19 Create Routes
- 20 Continue working on Login Page (Part 2)
- 21 Tailwind.css Introduction
- 22 Continue working on Login Page (Part 3)
- 23 Install more dependencies
- 24 Change how all scripts work
- 25 yarn add postcss -D
- 26 Create components folder
- 27 Tailwind.css setup
- 28 Completed Tailwind Setup, Continue working on Login Page (Part 4)
- 29 Interjection: Field Value
- 30 Continue working on Login Page
- 31 Tailwind.config
- 32 Login Functionality (with Firebase)
- 33 Signup Page
- 34 Check for user created is a duplicate
- 35 Not Found & Dashboard Page
- 36 Created Timeline Component
- 37 Created Sidebar Component
- 38 Created Header Component
- 39 use-auth-listener.js Hook
- 40 users.js UserContext
- 41 Back to Header Component
- 42 Working on Dashboard Page
- 43 Working on Sidebar Component
- 44 use-user.js hook
- 45 In user.js ⇒ Introduction to prop types
- 46 Created Timeline.js
- 47 Explanation on useMemo
- 48 Add WhyDidYouRender
- 49 Struggling with some issues
- 50 Finally Figuring out some problems with WhyDidYouRender
- 51 Working on suggestion.js (sidebar completed)
- 52 Get suggested profiles
- 53 Functionality: Remove followed user from suggestion
- 54 Functionality: Update user’s following & followers
- 55 Overview on Timeline
- 56 Creating Post Component
- 57 Creating more custom hooks (usePhotos)
- 58 Rendering out the photos (using React skeleton)
- 59 Start work on Post Component
- 60 Components within Post
- 61 Header Component
- 62 Image & Actions
- 63 Service call in Firebase
- 64 Show Comments
- 65 Add Comments
- 66 Adding Protected Routes
- 67 Profile
- 68 Lazy load explanation
- 69 Continue working on Profile Page
- 70 Header Component in Profile Page
- 71 Profile Specific Header
- 72 Get User Photos
- 73 Continue working on header
- 74 Information in header
- 75 Photos Component in Profile Page
- 76 Recap of everything we’ve done
- 77 Start of Review
- 78 Not found header
- 79 Review of usePhotos, useUsers, isUserLoggedIn, ProtectedRoute
- 80 Review of contexts: firebase.js and user.js
- 81 Review of Routes & Posts
- 82 loadtest (Npm install -g loadtest)
- 83 Create a production build
- 84 Deployment to Vercel done but with issues
- 85 Issues fixed
- 86 Lighthouse
- 87 Wrapping up
- 88 Changes and Refactoring (Fixing Bugs)
- 89 Quick Look at Paid Version
- 90 Cypress
- 91 Signing Off
