In order to reproduce what a real login might look like, lets add a fake delay to the login form with loading indicator on the Sign In button and disable the text fields.

Initially, it could be a set time and later on it could be randomized between 1 and 5 seconds.

We want to be able to also submit the province of origin of a student, check if validation is needed or not using Zod

References

• https://mui.com/material-ui/react-autocomplete/
• https://stackoverflow.com/questions/69295842/error-validation-with-material-ui-autcomplete-react-hook-form

We should validate the following use cases to prevent the Sucess toast from displaying:

1. User deletes the entire date (goes into empty state or MM/DD/YYYY when they focus on the DatePicker)
2. User decides to write instead of using the widget
   • and enters an invalid date like 01/01/001
   • or enters a date that would make the Student's age less than 18 years old.

Reference

• https://mui.com/material-ui/react-app-bar/

We want another page that allows users to import a .csv file with a specific structure and data validation to import data about Contacts like a Smartphone app.

We want to track their

• id
• name
• phone
• email

Handle empty state.

All data should be locally stored, meaning, that if the user refreshes the page, all data will be lost.

Make sure to only allow a single .csv file at a time.

Allow users to clear all the data with a button.

References

1. https://chatgpt.com/c/9efccd60-f340-45f5-a3da-3e174eb6b4c1
2. https://www.papaparse.com/
3. https://react-papaparse.js.org/
4. https://mui.com/material-ui/react-table/

As of right now, the user has no way to know what kind of data can be uploaded in the .csv file.

They need to know that it should have:

1. id
2. name
3. phone
4. email

Submitting a form triggers a Modal to be shown to let the user know that their form submission was successful, we could replace it with a Toast using the Sonner package for a more elegant look.

https://sonner.emilkowal.ski/

• Users should be able to see a list of items
• Users should be able to add products to their cart
• Each addition to the cart should reflect somewhere else on the UI

Might need to use Zustand to keep track of that local state

We want to be able fakely submit data about a "student", like:

1. Full name
2. Phone number
3. Email
4. Gender (radio buttons)
5. Date of birth (date picker)