Question 1

Build a Notification Badge

Accepted Answer

This tutorial will guide you through building a Notification Badge component in React.

### Mental Model
The core idea is to have a parent `NotificationBadge` component that renders a bell icon and conditionally displays a smaller badge component with the unread count. The count will be managed via React state and updated by a button in the demo.

### Step 1 — Create the NotificationBadge component
Start by creating a functional component `NotificationBadge` that will house our bell icon and the

Question 2

Build an Avatar Group

Accepted Answer

## Building an Avatar Group in React

**Mental model:** An avatar group shows the first N avatars overlapping, then a "+X" bubble for the rest. The logic is pure slicing: `visible = users.slice(0, max)` and `overflow = users.length - max`. Overlap is just negative margin plus a ring so edges read clearly.

### Step 1 — Split visible vs overflow
```jsx
const visible = users.slice(0, max);
const overflow = Math.max(0, users.length - max);
```

### Step 2 — Overlap with negative margin
Each avatar

Question 3

Build a Dark Mode Toggle

Accepted Answer

A **dark mode toggle** is a controlled boolean that (1) flips a theme, (2) **persists** the choice, and (3) **applies** it to the page.

### The mental model

Hold one `dark` boolean. Derive colors from it and persist it to `localStorage` so a refresh remembers.

```jsx
const [dark, setDark] = useState(() => {
  try { return localStorage.getItem('theme') === 'dark'; } catch { return false; }
});
```

### Step 1 — Persist on change

```jsx
useEffect(() => {
  try { localStorage.setItem('theme', d

Question 4

Build a Like Button

Accepted Answer

## Building a Like Button in React

**Mental model:** A like button toggles a boolean and adjusts a count. The interesting version is *optimistic*: flip the UI immediately, fire the request, and roll back if it fails. Derive the displayed count from a base count plus the local liked state so the two never disagree.

### Step 1 — Liked + base count
Keep the server's count separate from the optimistic delta.

```jsx
const [liked, setLiked] = useState(false);
const [count, setCount] = useState(init

Question 5

Build a Counter component

Accepted Answer

## Building a Counter in React

**Mental model:** A counter is the simplest *controlled* component — the value lives in the parent and the counter only emits requests to change it. Add `min`/`max`/`step` clamping plus disabled-edge logic and it becomes a genuinely reusable primitive instead of a `useState(0)` toy.

### Step 1 — Make it controlled
Accept the current `value` and an `onChange` callback rather than holding state internally. The parent owns the truth.

```jsx
function Counter({ value

Question 6

Build a Progress Bar

Accepted Answer

The core idea is to use React state to manage the progress percentage and `useEffect` with `requestAnimationFrame` to smoothly animate the progress towards a target. We'll use CSS `transition` for the visual animation.

### Step 1 — Basic Component Structure
Start by creating a functional React component for the `ProgressBar` that accepts a `targetPercentage` prop. Initialize a local state `currentPercentage` to 0.
```jsx
import React, { useState, useEffect } from 'react';

const ProgressBar = (

Question 7

Build a Traffic Light

Accepted Answer

## Building a Traffic Light in React

This tutorial guides you through creating a simple traffic light component in React that automatically cycles through red, green, and yellow.

### Mental Model
The core idea is to use React's `useState` hook to manage the current light color and `useEffect` with `setTimeout` to trigger the color changes at set intervals. We'll define the sequence and timings, then render conditional styling based on the current state.

### Step 1 — Define Traffic Light State

Question 8

Build a Toggle Switch

Accepted Answer

Building a controlled toggle switch in React involves managing its `on` state and providing a way to update it. The core idea is to let a parent component dictate the toggle's state and handle state changes, making the toggle reusable and predictable.

### Step 1 — Define the Toggle Component Structure
Start by creating a functional component `ToggleSwitch` that accepts `isOn` (boolean) and `onToggle` (function) as props. This establishes the controlled component pattern.

```jsx
const ToggleSwi

Question 9

Build a Temperature Converter

Accepted Answer

## Temperature Converter Tutorial in React

**Mental Model:** The core idea is to have two input fields, one for Celsius and one for Fahrenheit. When a user types into one field, we convert that value and update the *other* field. We'll use React's `useState` hook to manage the input values and a `useEffect` hook to handle the conversion logic, ensuring that only valid numbers are processed.

### Step 1 — Basic Component Structure and State
Start by creating the `TemperatureConverter` component

Question 10

Build a Segmented Control

Accepted Answer

## Building a Segmented Control in React

**Mental Model:** The core idea is to render a group of buttons and a separate, absolutely positioned indicator. The indicator's position and width are dynamically updated based on the currently active button, using React state and `useRef` to measure button dimensions.

### Step 1 — Basic Structure and State
Start by creating the main container, individual buttons, and a state variable to track the currently active segment. We'll use `useState` to manag

Frontend Machine Coding Interview Library

Question Catalog

Build a Notification Badge

Build an Avatar Group

Build a Dark Mode Toggle

Build a Like Button

Build a Counter component

Build a Progress Bar

Build a Traffic Light

Build a Toggle Switch

Build a Temperature Converter

Build a Segmented Control

Build a Tabs component

Build a Typewriter Effect

Build a Breadcrumbs component

Build a Skeleton Loader

Build a Stopwatch

Build a Dropdown Menu

Build a Digital Clock

Build a Todo List

Build an Accordion component

Build a Color Picker

Build a Lazy-loaded Image

Build an Image Carousel

Build dependent (Country–State) dropdowns

Build a Search Bar with History

Build a Nested Comments widget

Build Tic-Tac-Toe

Build a Password Generator

Build a Tag / Chip Input

Build a debounced Search Bar

Build an Image Gallery with lightbox

Build an Autocomplete / Typeahead search

Build a File Explorer (tree view)

Build a Speed Dial Menu

Build a Star Rating component

Build an Analog Clock

Build a Poll / Voting widget

Build a Custom Multi-select Dropdown

Build a Toast Notification system

Build a Multi-step Form (wizard)

Build Infinite Scroll

Build a Form with validation

Build a Transfer List

Build a Modal dialog

Build a Pagination component

Build a Quiz App

Build a Collapsible Sidebar Menu

Build a Data Table with sorting and filtering

Build an OTP Input

Build a Tooltip

Build a Calculator

Build an E-commerce Product Filter grid

Build a Virtualized List

Build a Dual Range (price) Slider

Build Nested Checkboxes (tri-state)

Build a Calendar / Date Picker

Build a Kanban board with drag and drop

Build Connect Four

Build a Drag-and-drop file uploader with configurable chunk size

Build a Mini Spreadsheet (Excel)

Build a Canvas Drawing Board

Build a Sudoku board with validation

Build Whack-a-Mole

Build a Chat UI

Build a Memory (flip-card) Game

Build the Snake Game

Build a basic Rich Text Editor

Build a Combobox (search + select)

Difficulty Distribution

Tested Topics

Study Guide