Skip to content

Latest commit

 

History

History
85 lines (56 loc) · 2.12 KB

features.md

File metadata and controls

85 lines (56 loc) · 2.12 KB

Learn React With Harshi Series

Documenting my learning journey of Namaste React Live Course conducted by Akshay Saini

Machine Coding Round :

  • Developing/Coding - an app during the interview

  • Many companies ask to develop in HTML, CSS & Javascript

  • Some companies ask to develop in their tech stack -> React

  • Examples of problems asked in interviews: todo list caurosel infinit scroll counter app bouncing image gallery

  • Important in machine coding -> Time management *

How to manage ? -> Practice before interview -> Plan before starting the interview
-> Execution

What are we going to build ?

*** YOUTUBE ***

  1. Requirement Clarification :
  • features
  • tech stack and briefly say why - UI layer & Data Layer JS Framework -> React CSS -> Tailwind CSS Routing -> react-router-dom Web bundler -> webpack Testing -> Jest
  1. Low-level Design - There are 1000 ways to implement a project -> LLD makes sure that both you and interviewer are in the same page

Component UI Hierarchy App Header Body SideBar MainContainer CategoriesButtonContainer CategoryButton VideosListContainer VideoCard VideoPageContainer VideoContainer VideoStream VideoDescription VideoComments CategoriesButtonContainer CategoryButton VideosListContainer VideoCard

  1. Basic features that we are going to develop in this chapter

  2. Display hamburger menu, logo, search input bar, button and user login button in Header

  3. Display List of menus in Sidebar (hardcoded for now)

  4. On click of hamburger menu, toggle the Sidebar

  5. Display CategoryButtonsContainer (group of category buttons) and VideosListContainer (list of most popular videos (video card) in India) in Main Container.

  6. On Click of any video card, naviagte to /watch page along with videoId

  7. In VideoPageContainer, Play the video, and display its description like video details and comments.

  8. On right side, display the CategoryButtonsContainer and VideoListContainer (videos relevant to the currently played video)