6 / 24

Build a URL shortener frontend

EasyP3Build

Build the frontend of a URL shortener in React: a form that submits a long URL to an API and lists the short links created.

Time box: 45 to 60 minutes. Mock the API with a function that returns a short code after a delay.

Requirements

0 / 6

A URL field validates input (must parse with new URL() and use http or https) and shows an inline error before any request is made
Submitting calls the API, disables the button and shows a loading state; the resulting short link appears at the top of a history list
Each history item has a Copy button that uses navigator.clipboard.writeText, shows brief "Copied" feedback, and falls back gracefully if the clipboard is unavailable
History is persisted in localStorage (try/catch) and can be cleared, and an item can be removed
API errors (network failure, server rejection, duplicate or invalid alias) show a message without losing the entered text, and a retry works
Optional custom alias field with its own validation (length and allowed characters)

0 / 3

Only after every requirement works.

Your files are saved in this browser as you type.

When every requirement works, mark it complete to count it as solved.

How a strong candidate structures it, and what interviewers check.

Your notesSaved automatically