Timestamps - Githubissues

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

00:00:00 - Introduction 00:07:10 - Demo of final project 00:09:50 - Basic Setup 00:12:45 - VS Code Project Structure Explanation, installation of additional packages, project cleanup 00:19:50 - Images Folder Structure, management in real world situation 00:21:21 - App.js, Index.js cleanup 00:23:40 - ESLint Installation 00:27:30 - Architecture, Folder Structure 00:32:00 - Folders creation under src 00:33:05 - DB Seed File 00:37:20 - Firebase setup - Project creation, collection, authentication 00:49:15 - Firebase Context file creation 00:52:06 - Use Firebase context inside index.js 00:53:46 - Firebase lib file creation 00:56:35 - Firebase setting & seeding DB one time 01:03:45 - Login Page basic setup with react router, lazy, suspense keywords 01:12:40 - Routes constants 01:16:18 - Back to login.js, context, useState, useEffect 01:20:50 - tailwind intro 01:26:00 - tailwind setup, adding tailwind related dev dependancies, demo run 01:41:55 - Enhancing login.js to show image, dummy form with tailwind CSS
01:44:30 - firebase wrt login.js 01:47:35 - building login form 02:07:15 - tailwind config updates 02:11:25 - back to login form to add login functionality 02:16:55 - sign up page skeleton 02:28:15 - sign up page linking with firebase 03:00:30 - Not Found Page 03:04:50 - Dashboard page 03:08:55 - Header logic implementation authentication listener 03:16:00 - Usage of authentication listener in top level of app, user context creation 03:21:15 - header.js implementation static portion 03:30:46 - header.js implementation sign up, log in with validation 03:33:15 - header.js implementation - sign out 03:36:50 - header.js implementation - avatar 03:39:30 - fixing display name issue in firebase through sign up flow, seed.js fixes etc 03:43:25 - back to header.js implementation 03:44:30 - header.js not logged in user implementation 03:47:50 - Grid implementation on dashboard.js 03:51:35 - Sidebar component implementation 04:09:50 - User component implementation
04:33:20 - "Why did you render" package usage demo 04:56:15 - Suggestions compoment implementation
05:13:20 - Suggested profile component implementation 05:39:55 - Timeline component implementation 05:46:30 - Posts implementation for Timeline 05:48:55 - get photos from users being followed 06:09:55 - render photos 06:16:15 - Post component implementation 06:21:45 - Post > header component implementation 06:26:35 - Post > image component implementation 06:29:10 - Post > action component implementation 06:46:30 - Post > footer component implementation 06:48:25 - Post > view comments component implementation 06:56:15 - Post > adding comments component implementation 07:11:30 - VVIMP : TIPS, TRICKS & GOOD PRACTICES 07:18:00 - Protective routes implementation 07:30:55 - Profile component implementation ( Webpack / Lazy loading / optimization / importance of lazy loading / smaller bundle size ) 08:04:10 - Header component implementation > getting photos from firebase 08:33:35 - Header component implementation > header compoment implementation, refactoring 08:58:00 - continue..Header component styling, adding follow-unfollow client side logic 09:24:00 - continue..Header component > updating firebase with follow-unfollow logic 09:42:30 - photos component implementation 09:55:50 - Recap 10:07:10 - loadtest / Performance testing 10:21:05 - production build, vercel integration, tailwind optimization for prod build 10:58:15 - lighthouse tool usage 11:09:55 - Refactor > sign up page 11:13:45 - Refactor > profile page 11:15:45 - Refactor > dashboard 11:21:25 - Refactor > timeline 11:24:50 - Refactor > header 11:49:25 - Refactor > sign up 11:50:55 - Paid extension of the video 11:52:10 - Log out fixing 11:53:40 - continue with paid version info 11:54:30 - demo of testing ( unit, ui) 11:59:45 - Sign off > final thoughts, future plans

vikramvi / instagram-clone

Timestamps #1