vikramvi / instagram-clone Goto Github PK

• validations
• tests ( unit , integration, UI )
• styling

• logged in user is not following anyone and is shown message to follow some users
• logged in user follows a user but he is not shown followed user's photos
• to view photos page needs to be uploaded

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

• goto profile page
• it takes few seconds before showing necessary info
• show react skeleton animation till info gets loaded

80eb4fb

• user adds new comment
• it's shown on top
• after refresh shown at bottom

Similar to Dashboard and Profile page, can we break down login and sign up page with help of smaller components ?

• add ---- OR ----
• add Forget Password ? link
• create page with back to login button

• Goto profile page ( self / other )
• Click on one of the photo's comment / like icon
• It should show pop-up with required info

• validations
• tests ( unit , integration, UI )
• styling

• Once user clicks on Login and Sign up button show loading animation to inform user action is going on and s/he need to wait some time

Refer to original file https://github.com/karlhadwen/instagram/blob/master/src/styles/app.css , it's much smaller

1. Add 2 rows with different links
2. Add language selector and company name with year

• clicking on a image should open pop-up
• Refer to https://www.instagram.com/p/COAIiAaFYAs/
• left side image, right side text area
• text area actions: like / unlike , comment, save , comments area

Notes:

1. Like / Unlike logic is same as post login screen
2. Comment logic is same as post login screen

• comments section "View all X comments" is not working