Client-Webanwendung für das Schiffsüberwachungs- und Tracking-System. Das Projekt wurde mit React entwickelt und bietet eine Schnittstelle zur Visualisierung von Daten über Schiffspositionen, Bewegungen, Scans und Zwischenfälle.
- Framework: React 19
- Build-Tool: Vite 7
- HTTP-Client: Axios
- Styling: CSS (modulare Struktur)
- Linting: ESLint
- Schiffskarte: Visuelle Darstellung von Schiffen und deren Bewegungen.
- Suche: Suchleiste zum schnellen Finden bestimmter Schiffe (
SearchPanel). - Schiffsinformationen: Detailansicht der Eigenschaften und des Status eines ausgewählten Schiffes (
ShipInfo). - Statusleiste: Anzeige des Gesamtzustands des Systems (
StatusPanel). - API-Integration:
- Abrufen einer Liste aller Schiffe.
- Daten zu Bewegungspfaden (
moves). - Informationen über Unfälle und Kollisionen (
crashes). - Radar- und Scandaten (
radars,scans).
Stellen Sie sicher, dass Node.js (Version 18+) und ein Paketmanager (npm oder yarn) installiert sind.
-
Repository klonen:
git clone <repository-url> cd ShipBaseClient
-
Abhängigkeiten installieren:
npm install
-
Entwicklungsserver starten:
npm run dev
Die Anwendung wird unter
http://localhost:5173(oder einem anderen in der Konsole angegebenen Port) verfügbar sein. -
API-Konfiguration: Standardmäßig erwartet der Client die API unter
http://localhost:8080/. Wenn Ihr Server auf einem anderen Port läuft, ändern Sie den Wert vonAPI_BASEin der Dateisrc/api/shipApi.js.
src/api/— Axios-Konfiguration und Methoden für die Interaktion mit dem Backend.src/components/— React-Komponenten (Karte, Suche, Informationen usw.).src/styles/— Style-Dateien der Komponenten.public/— Statische Ressourcen.
npm run dev— Start im Entwicklungsmodus.npm run build— Projekt für die Produktion erstellen.npm run lint— Code-Überprüfung mit dem Linter.npm run preview— Vorschau des erstellten Projekts.
Das Projekt ist Teil des ShipBase-Systems.