Marine Vessel Tracking Application

A real-time marine vessel tracking application built with Vue + TypeScript for the front-end and Express/Socket.io for the back-end.

Features

• Pinia state management
• Track multiple vessels in real-time
• Interactive map display with Google Maps API
• Real-time updates with Socket.io
• Filter vessels by name
• Add, edit, and delete vessels
• Pan to vessel location on the map from sidebar

Project Structure

marine-vessel-app/
├── client/                 # Vue 3 frontend
│   ├── src/
│   │   ├── components/     # Vue components
│   │   │   ├── map/        # Map components
│   │   │   ├── sidebar/    # Sidebar components
│   │   │   └── ui/         # Reusable UI components
│   │   ├── composables/    # Vue composables
│   │   └── stores/         # Pinia stores
│   ├── tests/              # Frontend tests
│   └── ...
├── server/                 # Express.js backend
│   ├── src/
│   │   ├── controllers/    # API controllers
│   │   ├── models/         # Data models
│   │   ├── routes/         # API routes
│   │   ├── services/       # Business logic
│   │   └── socket/         # Socket.io handlers
│   ├── prisma/             # Prisma schema and migrations
│   ├── tests/              # Backend tests
│   └── ...
└── shared/                 # Shared code between client and server
    └── types/              # Shared TypeScript interfaces

Getting Started

Installation

Docker Setup (Recommended for Quick Start)

Prerequisites

• Docker

1. Clone the repository:

git clone https://github.com/georgeeburt/marine-vessel-app.git
cd marine-vessel-app

Create a .env.docker file in the root directory and populate with environment variables:

DATABASE_URL=your_db_url
VITE_API_URL=vite_api_url
VITE_GOOGLE_MAPS_MAP_ID=your_google_maps_map_id
VITE_GOOGLE_MAPS_API_KEY=your_google_maps_api_key

2. Start the containers with Docker Compose:

docker-compose up

Manual Installation

Prerequisites

• Node.js (v18+)
• pnpm (v10+)
• PostgreSQL

1. Clone the repository:

git clone https://github.com/georgeeburt/marine-vessel-app.git
cd marine-vessel-app`

---

2. Install dependencies:

Install root dependencies:

pnpm install

---

Install client dependencies:

cd client
pnpm install
cd ..

---

Install server dependencies:

cd server
pnpm install
cd ..

3. Set up environment variables

• Create a .env file in the /server directory and populate with environment variables:

DATABASE_URL=postgres_db_url
PORT=port_number

• Create a .env file in the /client directory and populate with environment variables:

VITE_API_URL=http://localhost:3000
VITE_GOOGLE_MAPS_API_KEY=your_google_maps_api_key
VITE_API_URL=backend_api_url

4. Set up and seed the database:

cd server
pnpm prisma migrate dev
pnpm seed

Running Tests

Back-end Tests

cd server
pnpm test

Front-end Tests

cd client
pnpm test

Scripts

Script/Command	Description
pnpm format:check	Runs format checking on the codebase.
pnpm format	Runs prettier formatter on the codebase.
pnpm lint	Runs ESLint linter on the codebase.
pnpm lint:fix	Fixes linting errors.