Project Specification: Medal Table
1. Overview
You are designing a web application for managing a medal table of medallists in this group project. This
application will include a user interface developed with Vue.js, a REST-style Web API, and a database where
the information is stored. The user interface will show the list items to users and allow users to manipulate
the list. The actions performed by users should send to the Web API, which will perform CRUD operations
in a sqlite database and return the results via HTTP response messages to the client side.
2. Definition of Medal Table
At least, a medal table should contain the following information:
1. A primary key to identify a medallist (pk; type: number)
2. A nationality of the medallist (nationality; type: string)
3. A name of the medallist (name; type: string)
4. Number fields to represent how many medals (gold, silver and bronze) a medallist obtained
(goldMedal, silverMedal and bronzeMedal; type: number)
A sample database with sample data is given to you (please refer to file db.sqlite)
3. Client-side Requirements
The user interface is expected to work in modern web browsers with a professional looking and should at
least provide the following functions. The file named App.vue should be the starting point of your
implementation.
1. Load the medal table from the Web API when the application is loaded
2. Allow users to add new record (medallist) and the obtained medals
3. Display the nationality, the name and the obtained medals of a medallist
4. Allow users to delete items
5. Calculate and display the total number of medals
6. Sort the list based on gold medals or total medals
7. Use fetch() to retrieve the table and send user actions to the server-side
8. Display error messages to inform users when things go wrong
4. Server-side Requirements
The server-side Web API should be in REST-style. It should be implemented in JavaScript and is expected
to be runnable on Node.js. The API should at least fulfil the following requirements. Your implementation
should be implemented in the file api.mjs, or imported to this file if you choose to write your program in
other files.
1. Follow the standard REST style that uses appropriate HTTP methods and suitable payload format
for sending responses or receiving requests
2. Use appropriate status codes and response bodies for communicating with the client-side
3. Handle potential errors appropriately
4. Check whether the inputs sent by the client is correct and appropriate
5. Provide an endpoint for the client to retrieve the medal table
6. Provide an endpoint for creating, updating, and deleting a medal table item
7. Store table changes to a database

Some sample screenshots are displayed below:

Medal Table User Interface User Interface for Adding New Items

5. Additional Notes
1. The sample screenshots are provided for reference only. You are allowed to design your own user
interface and use any approach to implement the user interface.
2. The above requirements are minimum requirements. That means you must fulfil these requirements.
However, you are also allowed to add additional features and functions to this web application as
long as they are deemed useful.
3. The database schema can also be adjusted by you when this is necessary.
4. A Git repository is provided to each group, and this must be used to build this project. You need to
use commit, push and branching throughout the project and these will be marked.