Using ReactJS, build a simple CRUD application that is able to accomplish the following requirements.
The user should be able to enter multiple entries from a form with the following data: • Name: • Email: • Phone Number: • DOB: • Address: o City o District o Province – Choices of 1 to 7 provinces as options o Country – Nepal by default • Profile Picture (User needs to add/upload a image here. )
Following are the validations that are needed in the form: ● Name, email and phone number is required. They must be given a symbol. ● Email must be in email format i.e. name@example.com ● Phone number must be only number and at least 7 digits ● Users must only be able to add ‘png’ only. ● BONUS POINT: Implementation of real-time validation i.e. showing error or success labels while the user is filling out the form. The user can enter as many records as they like. After they’ve added the records, they will be able to see it on a table below the form. Users must be able to perform CRUD operations.
● There should be two action buttons which can delete and edit the data from the table respectively. ● Add pagination functionality in the table. If there are more than 5 data, a next page button should be shown. Each page needs to have at most 5 rows. There should be a button below the table. The button must navigate users to another page with “Profiles” as the heading title; where all the lists from the table should be displayed.
Store everything locally i.e. browser’s local storage
https://ui.shadcn.com/docs/components/data-table#prerequisites