OVERVIEW
FIG_02 // PROTOCOLSResQ-Desk replaces scattered spreadsheets, paper lists and group chats with a single interface built specifically for water rescue operations. As an active water rescuer and first responder at DLRG Nordhardt, I built this to solve real problems I encounter during operations and station duties.
The frontend is a Nuxt 4 / Vue 3 SPA with Capacitor for iOS and Android. The backend is a Go REST API with cookie-based JWT authentication and TOTP two-factor auth. One codebase, three platforms.
CORE_MODULES
VEHICLES & FLEET
Full CRUD fleet management for cars, boats and trailers. Each vehicle is tracked by callsign, license plate, manufacturer/model, year, location and real-time status (S2 Ready / Active / S6 Out of service). Maintenance scheduling with automatic due-date detection, vehicle notes, document linking, driver qualifications and vehicle linking (e.g. tow vehicle with trailer). Vehicle types are freely configurable.
MATERIAL INVENTORY
Inventory system with hierarchical storage locations (Room > Shelf > Box). Materials tracked by category, status, condition and maintenance interval with automatic overdue flagging. Tagging system for flexible assignment, per-material responsibilities, image upload, document management and material linking. Advanced search with filters. Batch label printing with QR codes in A5/A6 layouts.
FAHRTENBUCH
Digital vehicle logbook replacing legally required paper documentation. Records trips with start/end odometer (auto-filled from previous entry), driver and passengers (with fuzzy person search), route, purpose, refueling, damage reports and digital signature capture. Special trips with emergency lights are tracked separately.
BOOTSTAGEBUCH
Extended boat logbook with crew management including role-based hour tracking in quarter-hour steps. Operating hour counter, weather conditions via visual multi-select icons, wind strength on the Beaufort scale, temperature from weather data, exercise and rescue logging. Crew roles: captain, additional crew, boat guests.
CALENDAR
Google Calendar integration via server proxy with multi-calendar support. Month view with color-coded categories (General, Exercises, Duties, Youth), multi-day events as bars, day selection with event list, and grouped "upcoming events" view. HTML rendering in event descriptions. Responsive mobile view with compact calendar grid.
WEATHER & WATER
Live weather via DWD (German Weather Service) with current conditions, UV index, sunrise/sunset, wind speed and humidity. Automatic risk assessment for thunderstorm, high wind and low visibility. Rhine water level widget for monitoring. Weather data can be directly adopted into boat logbook entries.
DASHBOARD & KIOSK
Real-time dashboard with configurable widgets: vehicle status overview, maintenance preview, calendar widget, weather header, Divera integration and water level. Kiosk mode with idle detection (30s) for wall-mounted displays in rescue stations — auto-hides navigation, deactivates on mobile.
ADMIN & SECURITY
Full RBAC with 50+ granular permissions across admin, materials, vehicles, protocols, calendar and weather. Two-factor auth (TOTP) with backup codes, forced password change on first login. Admin panel for user/role/permission management, integration config (Divera 24/7, broadcasts), module toggles via feature flags.
IMPRESSIONS
FIG_03 // CALENDAR
FIG_04 // WEATHER
FIG_05 // ADMIN_RBACSPECIAL_FEATURES
DLRG UI LIBRARY
Custom component library with ~40 components built on the DLRG design system. Form primitives (Input, Select, Checkbox, DateTimePicker, SearchBar), layout (FormGrid, Card, Tabs), feedback (Button with 6 variants, Badge with 11 variants) and domain-specific components (SignaturePad, WeatherSelector, CrewTable, PermissionGate).
CUSTOM DATE PICKER
Fully custom mobile-first datetime picker. Step-based flow (date first, then time), quick-actions (Now/Today/Yesterday), collapsible calendar, time presets and future-date warnings. Built because no existing component matched the workflow.
PERSON SEARCH
Fuzzy-scored person search across all registered members with match highlighting, keyboard navigation (arrow keys + Enter), avatar initials and inline creation of external persons. Used across all logbook forms.
LABEL DESIGNER
Label designer with predefined and custom categories, QR code generation, color schemes, text customization and batch printing in A5/A6 formats. Used for tagging physical inventory items with scannable codes.
BROADCAST SYSTEM
WebSocket-based alert system (Socket.IO) for real-time notifications. Supports DLRG and NFH (neighborhood assistance) alarms with optional audio playback, auto-reconnect and alarm history. Can instantly activate a wall-mounted display.
FEATURE FLAGS
Every module can be toggled via environment variables or the admin panel. Disabled features show a clean "unavailable" page. User preferences are stored locally. Enables gradual rollout per station.
TECH_STACK
ARCHITECTURE
SERVICE LAYER
Factory-based service layer for backend communication with unified error handling (parseBackendResponse), cookie auth and consistent API binding. Services: auth, vehicle, material, admin, permission, calendar, weather, dashboard. Mock variants for offline development.
COMPOSABLES
Reactive state management via Vue composables: useAuth, usePermissions, useFeatures, useMaterial, useProtocols, useWeather, useBroadcast, useSidebar, useKioskMode, useTheme, useDashboard, useAdminState, useSystemSettings.
MIDDLEWARE CHAIN
Layered middleware: system init > auto-login > global auth > feature gates > route-level permissions. Each layer handles a specific cross-cutting concern.
TYPE SYSTEM
End-to-end TypeScript typing across all domains with backend-conformant DTOs (string IDs), frontend interfaces and strict type consistency between the service layer and UI components.
DISCLAIMER: This project is closed-source and built exclusively for DLRG Nordhardt e.V. All data shown in screenshots and demos on this page is AI-generated mock data. It does not reflect any live, real or correct data from the organization or any of its members. No personal, operational or organizational information is disclosed.