FrontPrep

Crack Frontend
Interviews

The interactive learning experience with a strategic roadmap that helps you master frontend interviews questions from top tech companies within 12 weeks.

Amazon Frontend Interview Questions
Google Frontend Interview Questions
Meta (Facebook) Frontend Interview Questions
Apple Frontend Interview Questions
Microsoft Frontend Interview Questions
Netflix Frontend Interview Questions
Uber Frontend Interview Questions
Atlassian Frontend Interview Questions
LinkedIn Frontend Interview Questions
Adobe Frontend Interview Questions
Intuit Frontend Interview Questions
Airbnb Frontend Interview Questions

It's highly effective

  • Gallery item 1
  • Gallery item 2
  • Gallery item 3
  • Gallery item 4
  • Gallery item 5
  • Gallery item 6
  • Gallery item 7
  • Gallery item 8

User Interface

This interview requires you to build UI components that demonstrate your mastery of React, JavaScript, and CSS.

Practice with real interview challenges sourced directly from top tech companies.

Each challenge includes a detailed prompt, clear requirements, interactive playground, strategic hints, common pitfalls, and an evaluation rubric used by interviewers.

  • Bar Chart example interface

    Bar Chart

    Visualize data with proportional bars representing numerical values.

  • Transfer List example interface

    Transfer List

    Move items between two lists to manage multiple selections.

  • Traffic Light example interface

    Traffic Light

    Build a Traffic Light with Pure JavaScript: Red, Yellow, Green, and Beyond! 🚦

  • Tabs example interface

    Tabs

    Tab component in React with a focus on accessibility and user experience.

  • Tree Navigation example interface

    Tree Navigation

    Display and interact with hierarchical data through expandable nodes.

  • Select Menu example interface

    Select Menu

    Component displays a list of selectable options when clicked.

  • Accordion example interface

    Accordion

    Toggle content sections with an accordion interface.

  • Calculator example interface

    Calculator

    Perform basic arithmetic operations with a simple calculator interface.

  • City Search example interface

    City Search

    Auto-suggest cities as users type in the search field.

  • Deal a Hand example interface

    Deal a Hand

    Draw and display random cards from a standard deck.

  • Elevator Floors example interface

    Elevator Floors

    Simulate elevator movement between multiple floors.

  • Filterable Table example interface

    Filterable Table

    Filter and display products with animated transitions.

  • Nested Comments example interface

    Nested Comments

    Display hierarchical comments with visual level indicators.

  • Node Unwinder example interface

    Node Unwinder

    Toggle node colors with automatic sequential reversal.

  • Stopwatch example interface

    Stopwatch

    Track time with a stopwatch interface.

  • Phone Number Input example interface

    Phone Number Input

    Format phone numbers in real-time as (555) 555-5555.

  • Progress Bar example interface

    Progress Bar

    Show task completion with an animated progress indicator.

  • Star Widget example interface

    Star Widget

    Rate items using an interactive star selection system.

  • Tic Tac Toe example interface

    Tic Tac Toe

    Classic two-player game with win detection.

  • Toast example interface

    Toast

    Display and manage temporary notification messages.

  • Todo List example interface

    Todo List

    Create, edit, and manage tasks with completion tracking.

  • Transaction Filtering example interface

    Transaction Filtering

    Filter financial transactions based on search criteria.

  • Wordle example interface

    Wordle

    Guess the five-letter word with color-coded feedback.

JavaScript Questions

Master core JavaScript concepts through hand picked interview challenges in our interactive environment.

Practice everything from closures, currying, and promises to browser events, objects, timers, polyfills, and performance optimization functions.

    Flatten Array

    Takes a nested array and merges all its layers into a single, flat array.

    Click by Domains

    Record the clicks for each domain and subdomain.

    Nested Filtering

    Filter multi dimensional array that can contain any type of data.

    clearAllTimeouts

    A function that clears all active JavaScript timeouts at once.

    Contiguous History

    The longest contiguous sequence of URLs that appears in the browsing histories of users.

    Polyfill: map()

    Generates a new array by applying a function to each item without native functionality.

    pipe

    Processing data sequentially through functions.

    Debounce

    Dbouncing enhances performance by delaying function execution until a certain period of inactivity.

    Throttle

    Throttling optimizes performance by limiting function execution to a specified rate.

    sum(a)(b)(c).....(n)

    Technique of translating a function that takes multiple arguments into a sequence of functions.

    Tricky Closure

    Closure is not capturing a value, it is preserving access to a variable.

    Immutability Challenge

    Enhance a given class to return immutable copies of its instances.

    Chaining: Calculator

    Class with methods for arithmetic operations, enabling successive method calls.

    Deep Flatten Object

    Each nested property is flattened into a flat property.

    Bind Polyfill

    Replicate the behaviour of built in Function.prototype.bind() method.

    Shallow Equality

    Comparison of the immediate proprties of two objects or arrays.

    Deep Merge

    Seamlessly combine multiple objects, respecting the intricacies of nested structures.

    Flatten Array

    Takes a nested array and merges all its layers into a single, flat array.

    Click by Domains

    Record the clicks for each domain and subdomain.

    Nested Filtering

    Filter multi dimensional array that can contain any type of data.

    clearAllTimeouts

    A function that clears all active JavaScript timeouts at once.

    Contiguous History

    The longest contiguous sequence of URLs that appears in the browsing histories of users.

    Polyfill: map()

    Generates a new array by applying a function to each item without native functionality.

    pipe

    Processing data sequentially through functions.

    Debounce

    Dbouncing enhances performance by delaying function execution until a certain period of inactivity.

    Throttle

    Throttling optimizes performance by limiting function execution to a specified rate.

    sum(a)(b)(c).....(n)

    Technique of translating a function that takes multiple arguments into a sequence of functions.

    Tricky Closure

    Closure is not capturing a value, it is preserving access to a variable.

    Immutability Challenge

    Enhance a given class to return immutable copies of its instances.

    Chaining: Calculator

    Class with methods for arithmetic operations, enabling successive method calls.

    Deep Flatten Object

    Each nested property is flattened into a flat property.

    Bind Polyfill

    Replicate the behaviour of built in Function.prototype.bind() method.

    Shallow Equality

    Comparison of the immediate proprties of two objects or arrays.

    Deep Merge

    Seamlessly combine multiple objects, respecting the intricacies of nested structures.

    Roll call

    Creates a function that allows you to call out names from an array one by one.

    Right or Wrong?

    Make sure the log function outputs the right value.

    Capturing in IIFEs

    Closures and nested functions in JavaScript using IIFEs

    HEX to RGB

    Convert a hexadecimal color code to and RGB color code

    Timer Manager

    Manages multiple timers, offering set, clear, pause, resume, and clear-all functionalities.

    Traverse DOM Tree

    Traverse DOM tree and flatten it into a one-dimensional array.

    Cancel Request

    How can I abort a Fetch API request in JavaScript?

    Local Storage Expiry

    Extend the functionality of the browser's localStorage to include an expiry feature.

    Digital Clock

    A function that creates a digital clock.

    clearAllIntervals

    A function that clears all active JavaScript intervals at once.

    Retry Promise N Times

    Retries a promise returning function with optional delays until success or a max attempt limit.

    Event Emitter

    Emits events and registers listeners for handling asynchronous operations.

    Parallel Async

    Executes multiple asynchronous functions concurrently.

    Sequential Async

    Executes async functions in sequence, each starting only after the previous one has completed.

    Custom Promise

    Design a Promise-like class with methods to manually resolve or reject, and to attach callbacks.

    Memoize

    Takes a function and returns its memoized variant, optimizing repeated calls.

    Roll call

    Creates a function that allows you to call out names from an array one by one.

    Right or Wrong?

    Make sure the log function outputs the right value.

    Capturing in IIFEs

    Closures and nested functions in JavaScript using IIFEs

    HEX to RGB

    Convert a hexadecimal color code to and RGB color code

    Timer Manager

    Manages multiple timers, offering set, clear, pause, resume, and clear-all functionalities.

    Traverse DOM Tree

    Traverse DOM tree and flatten it into a one-dimensional array.

    Cancel Request

    How can I abort a Fetch API request in JavaScript?

    Local Storage Expiry

    Extend the functionality of the browser's localStorage to include an expiry feature.

    Digital Clock

    A function that creates a digital clock.

    clearAllIntervals

    A function that clears all active JavaScript intervals at once.

    Retry Promise N Times

    Retries a promise returning function with optional delays until success or a max attempt limit.

    Event Emitter

    Emits events and registers listeners for handling asynchronous operations.

    Parallel Async

    Executes multiple asynchronous functions concurrently.

    Sequential Async

    Executes async functions in sequence, each starting only after the previous one has completed.

    Custom Promise

    Design a Promise-like class with methods to manually resolve or reject, and to attach callbacks.

    Memoize

    Takes a function and returns its memoized variant, optimizing repeated calls.

Conceptual

Conceptual questions are a great way to test your understanding of web fundamentals.

We have handpicked questions from HTML, CSS, JavaScript, React, Security, Performance and Accessibility based on interview experiences.

box model
event loop
arrow functions
var vs let vs const
async vs defer
code splitting
rendering strategies
cookies
performance optimization
dangerouslySetInnerHTML
virtual dom
use strict
translate vs absolute
garbage collection
responsive design
preventDefault()
call() vs apply()
this keyword
CSP
XSS
CORS
null vs undefined
== vs ===
closure
tree shaking
key prop
hoisting

Coding Playground

FAQs