Docking Tracker

Docking Tracker is a comprehensive, full-stack web application designed to streamline maritime operations. It provides a centralized, real-time dashboard for managing a fleet of vessels, tracking their operational status, and monitoring detailed docking progress. This project was built to solve the challenge of fragmented information in fleet management, replacing disconnected spreadsheets and manual updates with a single, intuitive source of truth.

Features

The application is packed with features designed to provide complete visibility and control over your fleet.

• Vessel Management: Effortlessly add, update, and manage your entire fleet. The system captures crucial vessel details—including IMO, MMSI, call signs, and flag state—providing a robust and centralized database for all your assets.

• Employee & Role Management: Maintain a comprehensive directory of employees. The application is built to handle key roles like 'Owner Superintendent,' allowing you to link personnel directly to the vessels they oversee, clarifying responsibilities and communication channels.

• Real-Time Status Tracking: Gain instant insights into vessel operations with a dynamic, color-coded status system. Track whether a vessel is Sailing, Docking, On Hire, Spot Charter, Idle or in Breakdown SOS at a glance. Statuses are updated in real-time across the application, reflecting the latest information from the field.

• Interactive Docking Monitoring: Go beyond simple status updates. The application provides a dedicated module to monitor the intricate details of docking procedures. Track key dates, log progress milestones, and manage maintenance schedules to ensure timely and efficient turnarounds.

• Responsive & Intuitive UI: Built with a mobile-first approach using Tailwind CSS, the user interface is designed for clarity and ease of use. Whether you're in the office on a desktop or on-site with a tablet, you get a seamless and consistent experience.

Tech Stack & Rationale

The technologies for this project were carefully selected to build a modern, scalable, and maintainable application.

• Framework: Next.js

  • Why? Chosen for its powerful hybrid rendering capabilities (Server-Side Rendering and Static Site Generation), simplified file-based routing, and exceptional developer experience. It provides the robust foundation needed for a high-performance application.

• Language: TypeScript

  • Why? To ensure type safety and code scalability, TypeScript was integrated from the ground up. It helps catch errors early in the development cycle and makes the codebase more maintainable and self-documenting.

• Database & Auth: Supabase (PostgreSQL)

  • Why? Selected as the Backend-as-a-Service (BaaS) for its powerful combination of a enterprise-grade PostgreSQL database, real-time subscriptions, authentication, and auto-generated APIs. Its real-time capabilities are the engine behind the live status tracking feature.

• Styling: Tailwind CSS

  • Why? Used for its utility-first approach to styling, which allows for the rapid development of a custom, responsive user interface without writing a single line of custom CSS. This keeps the design system consistent and easy to manage.

Project Goals

The primary goal of the Docking Tracker is to serve as a powerful demonstration of full-stack development skills, focusing on:

• Data Centralization: Creating a single source of truth for all vessel and employee information.
• Real-Time Visibility: Providing stakeholders with immediate, up-to-date information to enable proactive decision-making.
• User-Centric Design: Building an interface that is clean, intuitive, and requires minimal training.

Documentation

Here are screenshots of the app's features:

• Dashboard

• Docking

• Docking Details

• Vessels

• Vessel Details

• Employee

• Employee Details