PortShipmentsDashboard

Port Shipments Dashboard

---

Table of Contents

• Overview
• Instructions
  • API and Database setup
  • Running the API
  • Loading the Database
  • UI setup
    • Running the UI
  • Accessing the Application
• Pages
  • Shipments Data
  • Analytics Dashboard

Overview:

This is a full-stack application created using an ASP.NET back-end, React.js front-end, with additional technologies and frameworks. The application itself is a dashboard that displays data and analytics for international port shipments.

Instructions:

Getting this application running is seperated into two parts:

• Initializing the API and SQLite database
• Initializing the UI

API and Database Setup

Running the API

Run the dotnet API from the /api directory

cd api;
dotnet run;

Running the dotnet API for the first time should restore the dotnet package references, initialize the sqlite database, and run the database schema migrations.

Loading the Database

You can load the csv data into the database table by running the commands below.

sqlite3 myapp.db;
.read sql/loadCsvData.sql

Once the API is running and the database table has been loaded, the API endpoints should now be working.

UI Setup

Running the UI

Run the React UI from the /ui directory in a separate terminal.

cd ui;
npm run start;

Accessing the Application

Once the API and UI are both running, you should be able to access the webpage hosted by the React application.

Pages:

Shipment Data

Displayed in this page is the shipment data from the Shipments table.

Analytics Dashboard

Displayed in this page is analytics and displays for the shipment data.