Preview Frontend System Design

Back

JavaScript Interview Guide Book

120 Solved JavaScript Interview Questions

JavaScript Practice Playground

JavaScript problem practice

Publisher-subscriber 1

Publisher-subscriber 2

Proxy object

Implement an in-memory search engine

Fetch with timeout

Cached api call with expiry time

Piping function - 1

Piping function - 2

Retry promises N number of times

Memoize a function

Method chaining - 1

Method chaining - 2

Execute async functions in Series

CSS selector generator

Implement circuit breaker

Curry - 1

Curry - 2

Curry - 3

Curry - 4

HTML encoding of a string - 1

HTML encoding of a string - 2

Get object value from string path

Set object value at the string path

Create custom cookie

Fetch request and response interceptor

Aggregate array of objects on the given keys

Filter array of objects on value or index

Implement browser history

Array with event listeners

Implement getElementByClassName() function

Implement getByClassNameHierarchy() function

Find element with the given color property

Localstorage with expiry

Machine coding practice

Practice playground

Multi-Stepper component in React

Switch-Case component in React

usePrevious() hook in React

Design Pattern

Singleton

Observer

Circuit Breaker

Proxy

Builder

Prototype

Iterator

Resource / Object pool

Chain of responsibility

Command

Mediator

Memento

State

Stratergy

Template method

Visitor

Adapter

Bridge

Composite

Decorator

Facade

Flyweight

Factory

Rendering Pattern

Container/presentational pattern in React

Higher-order component pattern in React

Provider data passing pattern in React

Compound pattern in React

Client-side rendering vs Server-side rendering

Incremental static re-rendering vs Server-side generated

Progressive Hydration

Selective Hydration

Optimization Techniques

Load script efficiently with async and defer

Tress shaking

Code splitting

Reactivity in JavaScript frameworks

Pagination - Offset vs. Cursor-Based

Adaptive loading

Core web vitals

Static import

Dynamic import

Optimizing loading sequence

Import on Visibility

Import on Interaction

Preload and Prefetch

Third party libraries optimization

List virtualization

Compression for better performance

Effecient loading of media

Periodically synchronize data in the background

Web fundamentals

How a webpage is rendered in the browser

Testing startergies

Different frontend architectures

Different ways to host a frontend application

Multi-page application vs Single-page application

Test automation

Error handling

What are Rest API's

What are SOAP API's

What is WebRTC

Different way for real-time data exchange

Understanding CDN

Understanding and optimizing privacy

Network reliability

Progressive Web App

Web caching for unreliable networks

Web security

Cross-site scripting (XSS)

Cross-site forgery (CSRF)

XML Enternal Entity (XEE)

Code Injection

Authenticaion and its best practices

Authorization and its best practices

Session management and its best practices

Server-side request forgery

Cross frame scripting

Denial of Service (DDOS)

CORS attack

Keeping web safe and secure

State Management

Microstate management with Zustand

Data Normalization

Flux architecture and its alternatives

Redux

React-Query caching the data

Cookies, Session, Local storage, Indexdb

Styling

Style guide

Desing system

Different ways to style a react component

Understanding and optimizing accessibility

Understanding and optimizing internationalization

Code management

Monorepo vs Polyrepo

PR template

Code review stratergies

Branch Management

Interview Guide

What is system design?

What to expect in Frontend Interview?

RADIO stratergy for system design

How to ace the interviews

Cheat Sheet

React Hooks 🆕

usePrevious() hook

useIdle() hook

useAsync() hook

useDebounce() hook

useThrottle() hook

useResponsive() hook

useWhyDidYouUpdate() hook

useOnScreen() hook

useScript() hook

useOnClickOutside() hook

useHasFocus() hook

useToggle() hook

useCopy() hook

useLockedBody() hook in React

Low-Level Design / Machine coding

Tic tac toe game with bot

Implement Feature Flag component in React

Multi-Stepper component in React

Switch-Case component in React

Implement Infinite Scroll in React

Two-step login form in React

Editable todo-list in React

Search with pagination in Reactjs

Responsive slideshow in Reactjs

Create responsive slideshow gallery in Reactjs

Create a lightbox (modal-image-gallery) in Reactjs

Functional modal component in Reactjs

Detect overlapping circles in React

Animate elements in a sequence

Preview zoomed image on Hover

Search with Autocomplete - React

Image auto carousel in React

Search with autosuggestion in VanillaJs

Pagination component in React

Typing effect component in react

Scroll indicator in React

Toggle switch in React

Accordion in React

Capture product visible on viewport when user stops scrolling

Create website walkthrough assistant in JavaScript

Number increment counter in React

Highlight text on selection in React 🆕

Batch api calls in sequence in React 🆕

Time in human readable format in React 🆕

Frontend System Design Questions

Design a video streaming app like youtube - sample

Design a trello / kanban board

Design a video streaming app like youtube, netflix, prime

Design an food order app like Swiggy, Ubereats

Design collaborative text editor

Design an form enricher, shortner sdk

Design news feeds of Facebook, Twitter, Linkedin

Design a configurable frontend application with different login types

Designing the frontend of the group or suite of apps

Designing the frontend of Pinterest or Google Photos

Design the frontend of the instagram

Design the frontend of the E-commerce APP

Design an online javascript coding platform

Design a messaging application like Slack

Design a hotel, housing booking service like airbnb - 🆕

Design an meeting booking app like Calendly and Topmate.io - 🆕

Design a music streaming webapp like spotify, gaana.com - 🆕

Design linkedin / peerlist (A professional network to showcase skills)

Design a todo list

Desing a role-based application (Privelages, restriction)

Design a feature-based application (A/B testing) feature flag

Design an analytics SDK (Collect user and website data)

Design a routing logic with two paths for every step

Design a pictonary game for remote team to collaborate

Design a news website

Design an no code form builder like Google forms

Design slido

Desing a offer validation service (Current offer is valid till X date)

Design an appointment, dining, movie booking app

Design a condition oversability application which works with rule When X, If meets codition Y, Do this action

Design a video conferencing app like google meet, zoom

Design an event listing web app

Design an memebership web app

Design an lucid admin dashboard

Design a google drive / dropbox

Design Q and A web app

Design a poll widget

Design a chat widget

Design an email client

Design an training website, where move to the next step when the previous step is done and require X percentage to pass

Design an online text and video testomonial collector (SDK that can be injected)

Quick Revision

5 hooks to improve performance in React App

“Speed by a thousand cuts” - Different loading strategies to optimize the website speed

Understanding closure in JavaScript

Understanding powerful Array.reduce() method

Function & this in JavaScript

Functions with default parameters in javascript

What are Pure and Impure functions in JavaScript

Javascript SET datastructure

Javascript MAP Datastructure

Javascript promise

A learners guide to JavaScript promises

Preview - Frontend System Design