arrow_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 - 🆕
Visitor - 🆕
Command - 🆕
Composite - 🆕
Mediator - 🆕
Memento - 🆕
State - 🆕
Stratergy - 🆕
Template method - 🆕
Adapter - 🆕
Bridge - 🆕
Decorator - 🆕
Flyweight - 🆕
Facade - 🆕
Factory - 🆕
Rendering Pattern
Container/presentational pattern in React
Higher-order component pattern in React
Provider data passing pattern in React
Incremental static re-rendering vs Server-side generated
Client-side rendering vs Server-side rendering
Selective vs Progressive Hydration
Compound pattern in React
Optimization Techniques
Load script efficiently with async and defer
Tress shaking
Code splitting
Reactivity in JavaScript frameworks
Pagination - Offset vs. Cursor-Based
Adaptive loading
List virtualization
Core web vitals
Static import
Dynamic import
Optimizing loading sequence
Import on Visibility
Import on Interaction
Preload and Prefetch
Third party libraries optimization
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 ways to host a frontend application
REST API vs SOAP API - 🆕
gRPC v/s GraphQL - 🆕
What is WebRTC - 🆕
Progressive Web App - 🆕
Understanding CDN - 🆕
Different way for real-time data exchange - 🆕
Understanding and optimizing privacy - 🆕
Web caching for unreliable networks - 🆕
Network reliability - 🆕
Different frontend architectures
Multi-page application vs Single-page application
Test automation
Error handling
Web security
Cross-site scripting (XSS)
Cross-site forgery (CSRF)
XML Enternal Entity (XEE)
Authenticaion and its best practices
Authorization and its best practices
Denial of Service (DDOS)
CORS attack
Cross frame scripting
Keeping web safe and secure
CSP directives and its secure implementation
Prototype pollution attacks
Server-side request forgery
Code Injection
Session management and its best practices
State Management
Cookies, Session, Local storage, Indexdb
Microstate management with Zustand
Data Normalization
React-Query caching the data
Flux architecture and its alternatives - 🆕
MobX - 🆕
Redux - 🆕
Styling
Style guide
Different ways to style a react component
Desing system
Understanding and optimizing internationalization
Understanding and optimizing accessibility
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 🆕
Image comparison slider in React - 🆕
Frontend System Design Questions
Sample- Design a video streaming app like youtube
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 a video conferencing app like Google meet, Zoom - 🆕
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 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)
Design high frequency trading platform like Stock exchange
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
Discuss (
0
)
navigate_before
Previous
Next
navigate_next