Build a TextField component that allows users to add a Label and Input to a form: <TextField> <Label>First name</Label> <Input /> </TextField> This is inspired from the React-Aria TextField component and the Shadcn FormItem component. The component should link ...
Build a dynamic form inspired from Linkedin's "Add experience" form. This is an advanced challenge where you get to practice building dynamic forms and using Typescript. 0:00 /0:09 1× The form should have the following fields: * job title (required) * employment type * company (required) * whether ...
Build a Github Repositories search page, with sorting and pagination. You can use the Github REST Api /search/repository endpoint to query the data. The results should be paginated; by default, show 10 repositories per page Users should be able to: * search repositories by name * choose how many items to ...
Build a custom useFetch hook that encapsulates the logic for handling the loading and error states when fetching data: const { data, isLoading, error } = useFetch(SOME_URL, MAYBE_OPTIONS); The code should * return the response from the server * handle error and loading states * support custom headers through an options parameter * support ...
Build a dashboard for an expense tracking app. For a given month, it should show: * the transactions for that month * the total spent amount * a graph of expenditure per category as a pie chart Users should be able to navigate through the months. Show the transactions 5 at a time, ...
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. The main screen should show: * a dropdown with a list of countries * a list of public holidays for the selected country You can retrieve a list of available countries and their holidays from ...
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 ...
28 days of focused practice of increasing difficulty, going through everything from Fundamentals, Data fetching, Forms and using Intervals in React.
You will also get notified whenever a new challenge is published.
