RESOURCES

Video Series

Step-by-step tutorials with source code

React Optimization #Shorts

1. React Lazy Loading & Suspense: Part 1

2. React Lazy Loading & Custom Suspense: Part 2

3. Web Workers to run task in background

4. Image Optimization & Custom Image Rendering

5. DOM recycling / Windowing / List Virtualization

Javascript Machine Coding Series #Shorts

Day 1: Typeahead

Day 2: Infinite Scroll

Day 3: Stepper Component

Day 4: Todo List

Day 5: Carousel

Day 6: OTP Input box

Day 7: Stopwatch

Day 8: Modal

Day 9: Star Rating

Day 10: Overlapping Circles

Day 11: Autocomplete (Multiselect)

Javascript DSA Series #Shorts

Day 1: Two Sum

Day 2: Valid Parenthesis

Day 3: Merge Sorted LinkedList (Iterative)

Day 4: Merge Sorted LinkedList (Recursive)

Day 5: Best time to buy & sell stocks

Day 6: Valid Palindrome

Day 7: Binary Tree DFS

Day 8: Binary Tree BFS

Day 9: Invert Binary Tree

Day 10: Valid Anagram

Day 11: Binary Search

Day 12: Flood fill

Day 13: Lowest Common Ancestor of BST

Day 14: Balanced Binary Tree

Javascript Interviews Series #Shorts

Day 1: WTF is __proto__? (Object Literal & Object with getter and setter)

Day 2: WTF is __proto__? (constructor functions & ES6 Classes)

Day 3: What is hoisting

Day 4: What is closure

Day 5: What is callback functions

Day 6: What is Promise

Day 7: What is Promise (static methods)

Day 8: What is async-await

Day 9: What is set & weakSet

Day 10: What is Map & WeakMap

Day 11: What is generator functions

Day 12: What is generator functions

Day 13: Null vs Undefined

Day 14: IIFE

Day 15: var, let & const

Day 16: Shallow vs Deep copy

Day 17: Call, Apply and Bind

Day 18: Debounce

Day 19: Throttling Part 1

Day 20: Thottling Part 2

Day 21: Currying

Day 22: Polyfills

Mastering React Interviews #Shorts

Day 1: Infinite scroll

Day 2: Auto-complete search box

Day 3: Auto-complete search box (Optimization)

Day 4: Overlapping Circles

Day 5: Per Second Timer

Day 6: Stepper Component

Day 7: Feature Flag Component

Day 8: Jira Board (Drag n Drop)

Day 9: OTP Input Box

Day 10: File Explorer

Mastering React Challenge #Shorts

Day 1: Introduction

Day 2: Components and Styling

Day 3: Rendering Multiple Items

Day 4: Managing Events and State

Day 5: API Request and Props

Day 6: useEffect hook

Day 7: State Management using zustand

Day 8: Deployment

Curated Resources

Handpicked links and learning materials

Frontend System Design - Resources

Optional notes about this collection can go here. These notes will only render if the notes property is present.

Frontend System Design - Introduction

- Stay aware about the time (45-60 min) - Requirements Gathering: (5min) - Functional requirements - Non functional - Architecture (Component Design): (10min) - Build component relationship based on requirements - Data Model: (10min) - Design component models & its state - State management - local component state, global state - Interface API: (15min) - API design - /user, /posts, etc - Communication protocols - HTTPS, GraphQL, Sockets, etc - Optimizations and Deep Dive: (30min) - Advance topics like web workers, asset optimization, accessibility again based on your requirements. - Avoid mentioning topics which you are not strong in like Web Security, gRPC, Web streaming, etc. Upcoming videos we will go deep in each topic, this prep is enough for any frontend system design interview.