Skip to content
Blueprint

React Machine Coding

32 topics · Stage 4

Complete

Machine Coding32

  • 01Toast NotificationsShow stacked toast messages that close on their own after 5 seconds or on the close button, with one timer per toast kept in a ref.3 min
  • 02PaginationFetch a list from an API page by page and render numbered page controls with previous and next buttons.2 min
  • 03ModalBuild a modal that opens from a button and closes on its Close button or a mousedown outside the box, using a reusable useClickOutside hook.3 min
  • 04Image CarouselCycle through images with previous and next buttons, wrap around at both ends, and auto-advance on a timer that pauses on hover.2 min
  • 05Search Bar with TypeaheadSearch products as the user types, wait 1 second before each request, cancel stale requests, and cache the last 10 queries in a ref.2 min
  • 06AccordionRender a list of questions where clicking one shows its answer, with each item holding its own open or closed state.6 min
  • 07TabsRender tab buttons from data and show the content of the active tab, keeping the active index in state.1 min
  • 08Persisting State in localStorageKeep React state in localStorage with a typed usePersistedState hook, including JSON parsing and safe fallbacks.2 min
  • 09useTimeout HookWrite a useTimeout hook that restarts when the delay changes but not when the callback changes, using a ref for the latest callback.1 min
  • 10Lite Excel SheetBuild a small spreadsheet grid with editable cells, add rows and columns, and keep the grid as a 2D array in state.1 min
  • 11Drag and Drop BoardMove tasks between columns with the native HTML drag and drop events, tracking the dragged item in a ref.2 min
  • 12Traffic LightCycle green, yellow and red lights every 2 seconds with one setInterval and a modulo on the active index.3 min
  • 13Day View CalendarRender a 24 hour day view with hourly slots and place each event block by its start and end time, at 5rem per hour.2 min
  • 14Virtualized ListRender only the rows that are visible in a long list by computing the window from scroll position and row height.2 min
  • 15StepperShow numbered steps joined by lines, highlight every step up to the current one, and move between steps with Back and Continue buttons.2 min
  • 16Todo ListAdd, complete and delete todos, and keep the list in localStorage so it survives a refresh.6 min
  • 17Controlled TabsA tabs component that tells its parent which tab is active through an onTabChange callback.3 min
  • 18File Upload with ProgressPick or drop a file, upload it with axios, and show progress, success and error states in TypeScript.3 min
  • 19Memory GameFlip numbered cards on a 6 by 6 grid to find matching pairs, lock the board while two cards are open, and flip mismatches back after 3 seconds.2 min
  • 20Progress BarAnimate a progress bar to a given percentage with a CSS transform, and expose the value to screen readers.3 min
  • 21File ExplorerRender a recursive folder tree where folders expand and collapse, and files and folders can be added or deleted.6 min
  • 22Trello BoardA Trello style board where you add lists and cards, archive a list, and drag a card onto another list, with board data kept in a Redux store.9 min
  • 23Real-Time ChatChat in rooms with a Socket.IO server that relays messages and a React client that keeps login, room and messages in Redux Toolkit.4 min
  • 24Movie Seat SelectionPick cinema seats on a generated layout with seat categories, booked seats and a running total, built in TypeScript.5 min
  • 25Transfer ListMove checked items between two lists with buttons for selected items and for all items.3 min
  • 26Job BoardLoad job posts from the Hacker News API six at a time with a Load more button, fetching details for each id.4 min
  • 27Nested CheckboxesA checkbox tree where checking a parent checks all children and a parent becomes checked once all its children are.3 min
  • 28Typing EffectType a sentence one character at a time with a blinking cursor, using a timer that cleans up after itself.2 min
  • 29Chips InputTurn typed text into chips on Enter, ignoring empty input, and remove a single chip with its X button.3 min
  • 30Instagram StoriesUpload images as stories that expire after 15 seconds, view them in a modal, and release object URLs to avoid leaks.3 min
  • 31Star RatingA reusable star rating with hover preview, half stars, keyboard support and read-only mode.3 min
  • 32Nested CommentsA Reddit style comment tree with replies at any depth, delete, and relative timestamps, using recursive components.3 min