EcoCatch Tours - 95545

Kanban style boat management system that allows drag and drop of boat card between docked, inbound, outbound and maintenance swim lanes.

The system aims to solve the following two user stories:

• As a user, they can view a list of boat statuses so they know at a glance what status each boat is in
• As a boat operator, be able to create boat card to describe the status and be able to move them between swim lanes

Assumptions

The following assumptions were used while building the system:

• The boats can be created and removed at any time. There is no limitation on the number of boats that can be on the board at any moment.
• Even though the company might have a finite amount of boats, there is no logic to limit creation to this number.
• There is no need to edit boat names or operators as they can just be deleted and re-created.
• Operators can be assigned to any boat
• Boats use names/nicknames to uniquely identify them on the board, nevertheless boats can have the same name. It is assumed the boat names meaning are known by the operators.
• At a glance provide the number of boats by status to quickly get an overview without having to use the board.
• No authentication/authorization or registration is required. The users all share one system.

Backend

The backend is built with Node.JS + Express.JS using TypeScript and follows a RESTful API approach. The endpoints are used using a versioned approach, for example /boats/v1/

The backend is connected to a mongoDB database for persisting boats.

The following endpoints are available once deployed

GET All

Property	Description
Endpoint	GET /boats/v1
Purpose	Retrieve all boats stored in the database
Request parameters	None
Response	A list of all boats stored in the database
Error handling	If there is an error during the retrieval operation, a "500 Internal Server Error" message will be sent in the response

GET One

The endpoint is currently not used by the frontend. It was implemented for full and future functionality.

Property	Description
Endpoint	GET /boats/v1/:id
Purpose	Retrieve a single boat from the database by its id
Request parameters	id - the id of the boat to retrieve
Response	The boat with the specified id
Error handling	404 - If the boat with the given id is not found in the database, a "Boat not found" message will be sent in the response.
Error handling	500 - If there is an error during the retrieval operation, a "500 Internal Server Error" message will be sent in the response.

POST

Property	Description
Endpoint	POST /boats/v1
Purpose	Create a new boat
Request parameters	operator and boat name - the operator and name for the new boat
Response	The inserted id of the new boat
Error handling	400 - If the operator or boat name is missing in the request body, a "Bad Request" message will be sent in the response.
Error handling	500 - If there is an error during the creation operation, a "500 Internal Server Error" message will be sent in the response.

PUT

Property	Description
Endpoint	PUT /boats/v1/:id
Purpose	Update a boat's information
Request parameters	id - the id of the boat to update; name, operator, status - the new information for the boat
Response	The id of the updated boat
Error handling	400 - If either name, operator, or status is not provided in the request body, a "Bad Request" message will be sent in the response.
Error handling	500 - If there is an error during the update operation, a "500 Internal Server Error" message will be sent in the response.

DELETE

Property	Description
Endpoint	DELETE /boats/v1/:id
Purpose	Delete a boat
Request parameters	id - the id of the boat to delete
Response	The id of the deleted boat
Error handling	400 - If the boat failed to delete, a "Bad Request" message will be sent in the response.
Error handling	404 - If the boat with the given id is not found in the database, a "Boat not found" message will be sent in the response.
Error handling	500 - If there is an error during the deletion operation, a "500 Internal Server Error" message will be sent in the response.

Frontend

The frontend is built with Vite + React using TypeScript. It is mobile-friendly and uses Bootstrap as the CSS framework.

The frontend provides two routes:

• / which is the landing page as well as an overview page of boat statuses.
• /boatStatus which is the Kanban board style page where boats can be created and managed.

Testing

Backend

Backend testing uses Jest, a code coverage summary generated by it is shown below. In short, the backend has a 90% code coverage on statements.

View Code Coverage

File	% Stmts	% Branch	% Funcs	% Lines	Uncovered Line #s
All files	90.16	72.54	95	87.09
controllers	100	95	100	100
boats.controller.ts	100	95	100	100	67
db	58.33	50	0	58.33
db.ts	58.33	50	0	58.33	16-21
services	86.27	60	100	81.08
boats.service.ts	86.27	60	100	81.08	11,24,41,59,71-74

Frontend

The frontend does not currently have any automated testing. Nevertheless, the following tests can be considered for each story:

User Story 1

Pre-requisite: Create a boat, status will default to docked.

1. Visit the home page
2. Navigate to the boat status page
3. Assert outbound, inbound, and maintenance columns are empty.
4. Assert one item in docked column.
5. End Test

User Story 2

Pre-requisite: Create a boat and move it to the outbound lane.

1. Visit the home page
2. Navigate to the boat status page
3. Click Add Boat button
4. Fill Boat Name as Story2 and Operator Name as John
5. Click Create Boat
6. Assert one item in the docked column.
7. Assert no items in the inbound column.
8. Assert one item in the outbound column.
9. Drag boat named Story2 into the maintenance column.
10. Assert one item in the maintenance lane.
11. Assert no items in the docked lane.
12. Trigger page refresh.
13. Assert no items in the docked column.
14. Assert no items in the inbound column.
15. Assert one item in the outbound column.
16. Assert one item in the maintenance column.
17. End Test

CI/CD Pipeline

A CI/CD Pipeline has been implemented using GitHub Actions and is part of this repository. The pipeline tests, builds, configures, and triggers a deployment into Digital Ocean.

A high level representation of the pipeline:

Pipeline deployment assumptions

The pipeline assumes a mongoDB database has already been deployed on a cloud provider and a connection string is available to be used by the API. A deployment and configuration of a database is considered out of scope.

Running locally

To run this repository locally follow these steps:

1. Deploy a mongoDB

Deploy a mongoDB locally either using docker or a database install. Take note of your port, username, and password.

2. Clone this repo
3. From a terminal at the top level of the repo run npm install this should install all required dependencies. Tested on Node v16 and v18.
4. Create a .env file under packages/api/ as follows:

Replace {VARIABLE} with your mongo specific values

DB_CONNECTION_STRING="mongodb://{YOUR_MONGO_USER}:{YOUR_MONGO_PASS}@{MONGO_HOST}:{YOUR_MONGO_PORT}"
DB_NAME="boats"
COLLECTION_NAME="boats"

5. Create a .env file under packages/frontend/ as follows:

Note: assumes API will run on port 8000

VITE_API_BASE_URL="http://{YOUR_HOST}:8000/boats/v1"

6. Start the api by running nodemon or npm start if running with the later you might need to build first by running npm build
7. Start the frontend by running npm dev
8. Done!