React Coding Challenges

Build a fully functional expandable dropdown menu in React. The menu should allow users to click on a button (or label) to reveal the contents of the section.

Requirements All sections should be collapsed by default. Clicking on a section will toggle the visibility of the contents.

Bonus Opening a section will close the other sections such that only one section is open at a time. Although the focus is not on CSS, implement smooth opening/closing if you have time and want an extra challenge.

View Solution Guide

Your task is to build a small app where clicking an "Add" button creates a new progress bar on the page. Each progress bar should start filling automatically as soon as it appears, and smoothly reach 100% in about 2 seconds.

Requirements

Clicking the "Add" button should create a new progress bar. Each progress bar should fill up from 0% to 100% automatically. The fill animation should take approximately 2000ms for each bar. Multiple progress bars can be on the screen at the same time, each with its own independent animation.

Bonus (Optional)

Make the animation speed configurable. Make the animation bar fill up smoothly. Display the percentage value inside each progress bar as it fills.

Your task is to build a paginated list that allows the user to navigate through a dataset using "Previous" and "Next" buttons.

Requirements

• You are given an array of users
• Show only a subset of users per page (default: 5 users per page).
• Add "Previous" and "Next" buttons to navigate between pages.
• Disable the "Previous" button on the first page and "Next" on the last page.
• Display "Page X of Y" between the buttons.

Bonus

• Add a dropdown selector to choose the number of users per page (5, 10, or 20). Changing the selection should reset to page 1.
• The table should update dynamically when the page changes or the number of items per page changes.

View Solution