reactpractice.dev

Practice React Context by building a TextField component using composition

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 the Linkedin "Add experience" form

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

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

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 budget app dashboard

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,

reactpractice.dev © 2026