Create read-only web interface for contactor application

Cloud-Based Web Application

Objective 1: To combine what you`ve learnt in labs into a complete web application
Objective 2: To provide you with a reference web applicaton for future projects

In this assignment, you will create a simple web application that consists of frontend and backend (API and DB) to keep and maintain all of your contacts. The architecture of the application is shown below.

The application has the following functionalities:

• Add new a contact name
• Add new phone numbers
• List all contact names and phone numbers
• Remove a phone number from a contact
• Remove a contact name and all of the phone numbers
• Display the statistics of the data

The application is created in a docker container with microservices con?guration. The example of fully working application is shown below.

To add a new contact, you could put your name in the name component and click "Create Contact"

To add a new contact phone number, you could click the name and provide the contact type and the phone number.

To delete a phone number, click the "Delete" buton on a phone number row.

To delete a contact name, click the "Delete" buton on a name block.

To show the statistic, click the "Show Stats" link (CSE5006 Only)

TASK 1 - MICROSERVICES

Provide the connections among all of the microservices

SPECIFICATIONS

The project has several microservices that are connected to each other. These microservices are NGINX, Frontend, Backend and Database. The microservices architecture of the application is shown below:

• Update the docker-compose.yml to provide the connections as shown in the microservice architecture

TASK 2 - BACKEND API

Create the backend database and REST API for the Contactor application.

SPECIFICATIONS

The database shall have two tables, one for contacts called Contacts and one for phone numbers called
Phones. You can test these endpoints using HTTPie

• Records from the Contactor table shall contain the ?elds id (number, Primary Key), name (string)
• Records from the Phones table shall contain the ?elds id (number, Primary Key), name (string), number (string), and contactId (number, Foreign Key)
• Foreign keys shall follow the camel-case naming convention (eg a foreign key to the Contacts table would be called contactId). Specify the foreign key name explicitly in associations, as in Lab 07 (there we did foreignKey: `postId`).
• Each phone number shall belong to one contact, but a single contact can have many phone numbers.
• Two Sequelize models shall be de?ned - Contact and Phone. These models shall have the correct associations.
• The backend shall expose the following REST API:

TASK 3 - FRONTEND INTERFACE

TASK 3.1

Create a read-only web interface for the Contactor application which displays contacts and phone numbers.

SPECIFICATIONS
• There shall be a view which lists the names of all the contacts.
• Clicking on a contact shall display a list of all of the phone numbers within that contact.

TASK 3.2

Allow users to create and delete phone numbers and contacts via the web interface.

SPECIFICATIONS
• Users shall be able to create and delete phone numbers and contacts.
• Modi?cations to contacts and phone numbers shall be persisted in the backend database via the REST
API. Therefore changes should survive a page refresh.
• You do not need to implement the ability to edit contacts or phone numbers, only to create and delete them

TASK 3.3

Make the interface prety and nice to use. The Internet is a great place to ?nd inspiration for styles and small snippets of CSS which you can incorporate into your design. It is acceptable for you to use CSS libraries such as Tailwind if you like. It is not acceptable to use component libraries such as Chakra-ui.

TASK 4 -PRESENTATION VIDEO

TASK 4.1
Create a 5-minute (maximum) presentation video that explains how you solved/addressed the tasks and demonstrates how the complete project runs.

SPECIFICATIONS
• Your video should not be longer than 5 minutes.
• Use Zoom to record your video in mp4 format. Make sure you show your face when recording the video.
• Make sure you explain how to address the challenges in each tasks, including your program ?ow.
• Demonstrate how to run the project and how all tasks have been covered.
• Compressed the video together with your project folder.