React 19 brings a lot of new improvements to how we use forms. Practice using the new useActionState hook by refactoring a "Newsletter Subscribe" form. You'd be surprised how much code you end up removing! Fork the CodeSandbox and try it out: https://codesandbox.io/p/ ...
Build a React component that allows users to book a table at a restaurant. Users should be able to choose the number of persons they want to book for, the date and the time. Here is the user flow to guide your work: * initially, show just a button with the ...
Build a React app that allows users to track a Pomodoro cycle. Here's how a Pomodoro cycle works, in the words of Harry Guinness from the Zapier blog: You set a timer for 25 minutes, work until it's up, then take a five-minute break—and repeat ...
Build a React application that shows the national holidays for the current year, for a given country. You can retrieve a list of available countries and their holidays from the OpenHolidays API. By default, you should show the holidays for The Netherlands. ...
Build a login / register / logout flow using React and Supabase. Users should be able to create a new account with email and password. Once an account is created, they can use it to login and they can view a dummy "Dashboard" page. For the backend, create a simple ...
On the "Github Issues" page of a repository, you can filter the issues by Milestones, Projects and more. Build a generic Filter component that you could use for filtering milestones, authors and labels. * the component should have a button that when clicked opens the list of items * the ...
Start by displaying a list of 12 Pokémon. For each Pokémon, show its name and photo. As the user scrolls, when he reaches the end of the currently visible items, show a "Loading..." text message and start loading the next page. You can use the official Poke API ...
Given a sentence, display it with half a second delay between each character. Start showing nothing and then display characters one by one until the full sentence is displayed. No style is required. To get started, clone the starter repo: https://github.com/reactpractice-dev/typewriter-effect It comes with a TypewriterEffect ...
Build a React component that shows a list of 10 articles from the Hacker News API. * use the Hacker News "Top Articles" API * * for each article, display its score, title, url and author * do not display the article details until all the data is loaded * you'll ...
Build a Kanban-style to do list, where you can drag the cards from one column to the other to mark them as "To do", "In Progress" or "Done". * app should have three columns: "To do", "In progress", "Done" ...
Build a Google Keep inspired Notes app using React Query for fetching the data and json-server as the backend API. * Users can add notes with a title and text content * Notes are shown on top of each other, with the latest one on top * Users can "pin" notes; ...
Build a memory game in React. You start with 6 images that you will display as 12 cards. By default, they are "flipped" - you only get a placeholder instead of the image. As the user clicks a "card", flip it around, revealing the image. When ...
An Accordion component displays content as a list of headings that the user can click to collapse/expand the related content. One common use case for Accordions is the Frequently Asked Questions section - here's an example from Github's FAQ. Clicking on an item expands it, ...
Here's a simple shopping list app - https://codesandbox.io/p/sandbox/shopping-list-local-storage-76f46c. Right now if the user refreshes the page, all the data is lost. Improve the app by saving the data to local storage, so the user doesn't lose his items. Acceptance criteria: * When ...
It's common to see websites or applications that show lists of data with a "Load more" button. Usually, the page initially shows just 10-15 results and if the user presses "Load more", more results are loaded and merged into the initial set. Some examples ...
How would you evaluate your knowledge of JSX? Working with JSX is one of those fundamental skills when working with React that we don't even think about. But behind the surface, there's a lot of things to keep in mind and which make it different from ...
Try out test driven development by building a simple button component. For this exercise, you're given a set of failing unit tests. Get the tests to pass by implementing the Button component! You can clone this repo to run the test locally. If you haven't worked ...
Build a simple shopping cart using react-query to fetch the data. The app should have a simple layout, with the products available on the left side of the page and the shopping cart on the right side. Users should be able to: * see a list of products * see their shopping ...
You will start from an existing Todo List app (yes, another one!) built with React. It works great - users can add / remove items - but there is only one problem - every time the page is refreshed, all the items are lost. Your task will be to implement persistence ...
Create a simple Contact Book app that allows users to manage a collection of friends’ contact details. For each Person, the user should be able to save the name and city where they live. All contact details should be displayed on one page, as person “cards”. Next to each person, ...
