3. Feature Descriptions
3.1 A start page with an empty contact list
user starts the application for the first time, it shows an empty list of contacts and two
buttons (or icons) allowing the use to list contacts or to create a new contact.
3.2 New contact page
When a user clicks the "New" button, it shows a form to let the user type in contact
All fields are required and the email has a pattern "[email protected]" pattern. The
phone number must be 10 digits not started with 0 and 1. When the user clicks submit with
valid data, it saves the data to the backend REST API. The web page then displays a details page.
3.3 Details Page
Once added, a details page is displayed as the following.
A user can edit or delete this newly created contact.
3.4 Contact list allowing update, edit and delete
If a user clicks the index button, it shows all created contacts with buttons allowing the user to
see details, edit or delete it. When a user accesses the site with saved data, it shows the list too.
3.5 The edit page
It's like the new page filled with data from the selected contact.
The user should be able to change any field. And valid changes are written to the backend when
the user submits the change.
3.6 The Delete
If the user clicks the delete button, it shows a confirmation dialog. If the user cancels, nothing
happen. Otherwise, the contact is deleted from the backend and is removed from the web