680+ frontend interview questions

Practice frontend interviews in a real browser editor.

Pick a JavaScript or UI question. Write the code and run the tests in the same tab. React, Vue, Angular, and Vanilla starters are ready.

Try Debounce free Browse 680+

It opens in your browser. You can start without a credit card.

Get Premium for $8.25 $4.92 /month

JavaScriptReactVueAngular480+ free

uiready.dev/questions/debounce

DescriptionPROMPT

Build a debounce utility

Delay the callback until calls have stopped for the given wait time.

debounce(fn, 200)

debounce.jsLIVE EDITOR

// Implement debounce
function debounce(fn, wait) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, wait);
  };
}

TestsAUTO RUN

returns a function

no sync invoke

invokes after wait

resets on call

uses latest args

All tests passed5 / 5

Description

debounce(fn, 200)

debounce.js

// Implement debounce
function debounce(fn, wait) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, wait);
  };
}

Tests

returns a function

no sync invoke

invokes after wait

resets on call

uses latest args

5 / 5 passed

Description tab

Real test runner

Live Sandpack editor

A real test runner

Edit Debounce and watch five live tests react.

Delete clearTimeout in the live editor below. The reset test will fail, and it will pass again when you restore the line.

Editable code

Type directly into the example and reset it whenever you want.

Tests in the browser

The suite runs in an isolated worker after each edit.

questions / debounce

Live editor loads as you scroll

debounce.js

function debounce(fn, wait) {
  let timer;

  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, wait);
  };
}

Tests

returns a function

waits before calling

resets after another call

uses the latest arguments

keeps the call context

Premium pricing

Unlock the full library. Choose how you pay.

Annual and Lifetime include every premium question, framework variant, test runner, and worked solution.

7-day money-back guaranteeTax included

FLASH SALE30% offUse codeat checkout· ends in...

Best subscription price

Annual

$99Final price

$59per year

$4.92/month equivalent

Renews annually. Cancel before your next renewal.

No renewal

Lifetime

$299Final price

$179one time

Premium access for life

One payment. Future premium questions included.

How practice works

From question to working answer, in the same workspace.

Write the code, check the tests, switch frameworks, and review the parts you missed. Each example below shows that part of the workflow.

Step 1 / Write and test

Write the answer and run the tests.

The prompt, editor, and test results stay in one workspace. Start from the provided files and see which case still fails before you submit.

Edit the real starter files
See every passing and failing test

UIReady / Step 1

Write the answer and run the tests.

Write and test

Product view

Debounce / JavaScript

All tests passed

debounce.jsEDITABLE

function debounce(fn, wait) {  let timer;  return function (...args) {    clearTimeout(timer);    timer = setTimeout(() => {      fn.apply(this, args);    }, wait);  };}

Test results

waits before calling

resets on another call

keeps latest arguments

All tests passed3 / 3

Step 2 / Switch frameworks

Change frameworks without changing the question.

Practice the same component in React, Vue, Angular, or plain JavaScript. Each variant has starter code written for that framework.

One prompt, four implementations
Separate saved progress for every variant

UIReady / Step 2

Change frameworks without changing the question.

Switch frameworks

Product view

Accordion questionpick your framework

React starterR

const [open, setOpen] = useState(false);

// Build the same behavior
toggleAccordion();

Live preview

HTML−

Gives the page structure and meaning.

CSS+

JavaScript+

Same task and tests. Framework-specific starter code.

Step 3 / Review the solution

See why your first answer missed an edge case.

Compare your code with the worked answer. The notes point to the failing case, the fix, and the reasoning you can explain in an interview.

Missed cases shown beside the code
Short implementation and complexity notes

UIReady / Step 3

See why your first answer missed an edge case.

Review the solution

Product view

Compare your attempt with the worked solution

Your attempt

function submit(value) {
  if (submitting) return;
  send(value);
}

Double click is blocked

4 tests passed

What the solution explains

The missed case

A fast second click starts another request.

The fix

Disable the action while the first request is pending.

Why it works

One guard prevents duplicate submissions.

Fixed answer4 / 4 tests pass

One prompt, four implementations

Edit one Accordion in four frameworks.

Switch frameworks without leaving the question. The code on the left and the preview on the right are both live. Your answer stays separate in every variant.

ReactVueAngularVanilla

Live preview loads as you scroll

App.tsx

import { useState } from 'react';

export default function Accordion() {
  const [openId, setOpenId] = useState('html');

  return sections.map((section) => (
    <section key={section.id}>
      <button
        aria-expanded={openId === section.id}
        onClick={() => setOpenId(section.id)}
      >
        {section.title}
      </button>
      {openId === section.id && <p>{section.body}</p>}
    </section>
  ));
}

Preview

Frontend foundations

HTML−

HTML gives the page its structure and meaning.

CSS+

JavaScript+

Study plans

Choose a 1-week, 1-month, or 3-month study plan.

The plan tells you what to practice next. You still write every answer and run every test yourself.

1 week

42 questions

A full-time 7-day crash course covering the highest-leverage JavaScript, algorithms, and UI patterns. Six focused questions a day, ordered from language fundamentals to practical component work.

1 month

150 questions

A full-time 30-day program from fundamentals to mid-level depth: five important questions a day across JavaScript, data structures and algorithms, DOM work, hooks, and production-style components.

3 months

360 questions

The comprehensive full-time track: twelve weeks and 360 carefully prioritized questions across JavaScript, algorithms, the DOM, hooks, accessibility, and UI system-design components.

Question bank

Browse frontend interview questions by topic and difficulty.

The catalog has 680+ JavaScript, UI, browser, algorithm, and system design questions. 480+ are free.

Browse the full catalog

01easy

Debounce

Implement a function that delays invoking another function until a specified period of inactivity has passed.

15 minOpen question

02easy

Accordion

Build an accordion component with stacked sections whose content panels expand and collapse on click.

20 minOpen question

03medium

Promise.all

Implement Promise.all so it resolves with an array of results or rejects on the first rejection.

25 minOpen question

04medium

Todo List

Build a Todo List component with add and delete actions, with focus on functionality over styling.

25 minOpen question

05medium

Image Carousel

Build an image carousel that lets you page through a sequence of images with previous and next controls.

25 minOpen question

06medium

Throttle

Implement a function that limits how often a wrapped function can be invoked within a time window.

15 minOpen question

Your next question is ready

Try a full question before you create an account.

The free question includes the prompt, editor, and tests. Sign in when you want UIReady to save your code and progress.

Open the question Create an account

FAQ

Answers before you start.

Everything you need to know before opening your first frontend interview question.

Can I try UIReady without paying?

480+ questions are free. The editor, tests, previews, and progress tracking all work on the free tier.

Which frameworks can I practice?

UI questions are available in React, Vue, Angular, and plain HTML, CSS, and JavaScript. Your work is saved separately for each variant.

Are the examples on this page real?

Yes. The Debounce example runs its test suite in an isolated browser worker, and the Accordion example compiles a real preview in the framework you pick.

What happens when I get stuck?

Open the worked solution after you have tried the problem. It covers the implementation, missed edge cases, complexity, and the reasoning an interviewer may ask you to explain.