Vertically stacked set of interactive headings that each reveal an associated section of content.

Accordion

Build a bar chart component that fetches and renders color-coded bars with heights proportional to department ticket counts.

Bar Chart I

Extend the bar chart with sorting functionality to reorder bars by ticket count in ascending or descending order.

Bar Chart II

Generalize the bar chart to accept data of any shape, plus discussion on representing extreme values and Canvas vs SVG trade-offs.

Bar Chart III

Application that allows users to perform basic arithmetic operations, such as addition, subtraction, multiplication, and division.

Calculator

Build a card deck component that generates a standard 52-card deck and renders it in toggleable list and grid layouts.

Card Deck I

Add flip functionality to the card deck, allowing users to toggle each card between face-up and face-down states.

Card Deck II

Add swap and mark functionality to the card deck, allowing users to shuffle card positions and mark individual cards.

Card Deck III

Build a city search component with a text input that dynamically fetches and displays matching city suggestions from an API.

City Search I

Add result caching to the city search so previously searched terms return instantly without redundant API calls.

City Search II

Implement debouncing in the city search to reduce excessive API calls while the user is actively typing.

City Search III

Build a color palette where users can select a color and copy its hex value to the clipboard.

Color Swatch

Build a configurable text transformer that applies a chain of operations like uppercase, lowercase, capitalize vowels, and character replacement.

Configurable Text Transformer

Build a Connect Four game with gravity based disc dropping, turn handling, and four in a row win detection.

Connect Four

Build an interactive matching game where players pair countries with their capitals.

Country Capital Game

Build a data table with column sorting, a text filter, and pagination, deriving the visible rows from one filter then sort then paginate pipeline.

Data Table

Simulates dealing a hand of cards from a standard deck, displaying the drawn cards to the user.

Deal a Hand

Build a sortable list where items can be reordered by dragging and dropping.

Drag and Drop Sortable List

Generate a table based on the number of rows and columns entered by the user.

Dynamic Table Generator

Component that simulates a basic elevator system.

Elevator System

Component that allows users to submit feedback through a simple form with validation and accessibility features.

Feedback Form

Build a file upload component with a live progress bar, upload speed and time remaining, and pause, resume, and cancel controls, powered by a reusable custom hook.

File Upload

Build a product table with live search filtering by name and a checkbox to show only in-stock products.

Filterable Table I

Style the filterable product table to match a provided design, focusing on layout, colors, and component styling.

Filterable Table II

Login form with client-side validations for name, email, and password fields.

Form Validations

Render a heatmap of a values matrix on an HTML canvas: map each value to a colour, draw a crisp grid on high-density screens, and show a tooltip for the cell under the pointer.

Heatmap Canvas

Holy Grail Layout

A reusable image carousel component that allows users to navigate through a collection of images with smooth transitions and intuitive controls.

Image Carousel

Build an image gallery: a grid of thumbnails that open a lightbox with previous and next navigation and full keyboard control.

Image Gallery

Build a pannable, zoomable canvas like a design tool: drag to pan, scroll to zoom toward the cursor, with shapes drawn in world coordinates through a single view transform.

Infinite Canvas

Build a scrollable list that automatically loads more items as the user reaches the bottom.

Infinite Scroll

A reusable kanban board component that allows users to organize and move cards between columns, demonstrating state management and user interaction in React.

Kanban Board

Build a like/dislike button component that sends an API request on each interaction and updates the UI to reflect the new reaction state.

Like Dislike I

Extend the like/dislike button with optimistic UI updates: immediately reflect the interaction and roll back the state if the API request fails.

Like Dislike II

Build a live markdown editor: type markdown on the left and see it rendered to HTML on the right, with a small parser that stays safe against injection.

Markdown Editor

Create a beautiful masonry grid layout using modern CSS techniques. ✨

Masonry Layout

Build a dynamic medical report form with labeled text areas driven by a predefined sections array, featuring a stepper UI and structured log output on submit.

Medical Report Form

Build a mini spreadsheet with a 5×5 grid where cells support formula references like =a1+b1 that update live as values change.

Mini Spreadsheet

Build a modal window component with a dark backdrop and close button that opens on user action.

Modal Window I

Enhance the modal window with Escape key support, body scroll lock, and smooth CSS transitions.

Modal Window II

Make the modal fully accessible with focus trapping, ARIA attributes, and return-focus on close.

Modal Window III

Build a multi-screen signup form that collects user information across 4 steps with navigation between screens.

Multi Step Signup

Build a modal on the native HTML dialog element, driving showModal and close from React, dismissing on backdrop click, and returning a result.

Native Dialog

Build a nested checkbox tree where checking a parent checks its children and a partly checked parent shows an indeterminate state.

Nested Checkboxes

Nested commenting system that visually distinguishes between comment levels, akin to Reddit or Twitter discussions.

Nested Comments

Interactive grid where users toggle node colors. Upon activating all nodes, the system automatically reverts them sequentially to their initial state.

Node Unwinder

Build an NxN Tic Tac Toe game where the board size is configurable and winning lines are generated automatically for any board size.

NxN Tic Tac Toe

Build an OTP input component with auto-focus management, keyboard navigation, and paste support.

OTP Input

Build a dynamic interface where clicking on a canvas places circles that change color when they overlap.

Overlapping Circles

Build a paginated data table with a page-size selector and Prev/Next navigation.

Pagination

Build a LinkedIn-style "People You May Know" component with HTML and CSS 👥

People You May Know

Reusable React component that formats a phone number input field in real-time.

Phone Number Input

Recursively render a hierarchical portfolio as a collapsible tree, where each node shows its name, value, and percentage of the total.

Portfolio Visualizer I

Make the portfolio tree editable: normalize it into a flat map, validate edits against budget constraints, and show the unallocated cash at each level.

Portfolio Visualizer II

Create a reusable progress bar component that visually represents a percentage value with customizable max value.

Progress Bar I

Add smooth CSS transitions and animations to the progress bar for a polished filling effect.

Progress Bar II

Enhance the progress bar with proper ARIA attributes and accessibility roles for screen reader support.

Progress Bar III

Build a grid of randomly colored cells that can be regenerated and recolored on click.

Random Color Matrix

Beep boop! Program a virtual Roomba vaccum to clean the floor in this hands-on coding challenge.

Roomba

Component displays a list of selectable options when clicked and returns the selected value to the parent component.

Select Menu

Build a sliding tile puzzle where numbered tiles slide into the empty space, with move validation, win detection, and a new game button.

Sliding Puzzle

The tiny animations brings a lot of joy to the user experience. ✨

Spinner with CSS

Build an editable spreadsheet grid on top of a formula engine: edit a cell to see its formula, blur to see the value, and watch dependent cells update through event delegation and imperative DOM writes.

Spreadsheet UI

Component that allows users to rate items by selecting a number of stars out of a maximum value.

Star Widget

Component that tracks elapsed time with precision, providing start/stop/reset functionality and lap recording.

Stopwatch

Build a ChatGPT style chat where the assistant reply streams in a little at a time, the input locks while it streams, a Stop button ends it mid way, and the view auto scrolls to the bottom.

Streaming Chat

Generate a hierarchical table of contents from a HTML document.

Tabs (Vanilla JS)

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

Tabs

Build a temperature converter with live two-way conversion between Celsius and Fahrenheit.

Temperature Converter

Build a 3x3 Tic Tac Toe board with alternating X and O turns, game status display, and a restart button.

Tic Tac Toe I

Add winner detection logic to the Tic Tac Toe game by checking rows, columns, and diagonals for three matching marks.

Tic Tac Toe II

Integrate async request handling into the Tic Tac Toe game to send game results to a server endpoint.

Tic Tac Toe III

Build a Toast component in React that renders a variant-based icon, a message, and a dismissible close button at the bottom right of the screen.

Toast I

Make the Toast provider manage state so that submitting the form adds a new toast and clicking the close button dismisses that specific toast.

Toast II

Let users dismiss every visible toast at once by pressing the Escape key, using a reusable custom hook.

Toast III

Todo list enables users to seamlessly add, edit, delete tasks, and mark completion for efficient task management.

Todo List

Build a tooltip component that appears on hover, centered above the trigger element using getBoundingClientRect for precise positioning.

Tooltip

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

Traffic Light

Build a transaction list that fetches financial data, displays transactions, calculates totals, and supports text-based filtering.

Transaction Filtering I

Style the transaction filtering UI to match a provided design using custom CSS variables for positive and negative amounts.

Transaction Filtering II

A transfer list is a UI component for moving items between two lists, often used to manage and organize multiple selections.

Transfer List

Build a page tree navigation that fetches hierarchical JSON data and renders it as a nested tree structure.

Tree Navigation I

Auto-expand the ancestor path of the current page on load by lifting the expand state into each navigation list.

Tree Navigation II

Show a hover-only child-count badge on each tree node using a pure CSS visibility toggle.

Tree Navigation III

Build an autocomplete input backed by a Trie: type a prefix to see matching words, navigate the dropdown with the keyboard, and select with Enter or click.

Trie Typeahead

Build a counter application with undo and redo functionality that tracks operation history and allows users to navigate through past states.

Undo Redo

React component for efficiently rendering large lists and tabular data.

Virtualized List

Wordle is a five-letter word puzzle with color-coded feedback for each guess, green (correct), yellow (misplaced), and gray (absent).

Wordle

Create a smooth image zoom effect that enhances user engagement. ✨

User Interface