Background materials:

• https://react-hook-form.com/
• https://mui.com/material-ui/all-components/

Form Tasks

• Simple form: Create a form where a user can input their name and email. Display the entered data on the screen in real time.
• Text field validation: Expand the form so that the user must enter a password. The password must be at least 8 characters long and contain one uppercase letter, one lowercase letter, and one number.
• Select fields: Expand the form so that the user can select a country from a dropdown list. Use the backend server to get the countries.
• Checkbox fields: Expand the form so that the user can select multiple options. (Options are up to You)
• Radio button fields: Expand the form so that the user can select only one option. (Options are up to You)
• Dynamic forms: Expand the form so that the user can add new fields.
• File uploads: Expand the form so that the user can upload an image.
• API communication: Expand the form so that the user can enter a username, and the form calls the usernames API to check if the username exists.
• Async validation: Expand the form so that the user must enter a username, and the form asynchronously checks if the username is available.

MUI Tasks

• Create a simple button with a text label. Change the button's color and shape using props.
• Create a text field where the user can enter text. The text field should have a label and a placeholder.
• Create a card containing an image and a short description. Make the card clickable.
• Create a simple navigation bar with multiple tabs. Allow the user to switch between tabs.
• Create a dialog box that appears when a button is clicked. The dialog should contain a text and a close button.
• Create a simple form with a name and email field. Validate the form on submit.
• Implement a drag and drop feature that allows elements to be reordered in a list. (create a custom list)