Digital Crane Scheduling Platform

Challenge

A wind turbine manufacturer managed crane deployment scheduling through Excel spreadsheets. Installations, mobilisation phases, delays, and time buffers were tracked manually – increasingly error-prone and opaque as project counts grew. There was no centralised visual interface that surfaced dependencies and could serve as the input layer for automated cost optimisation in the backend.

Approach

The solution: a web-based scheduler built on Bryntum Scheduler – an enterprise timeline library for complex Gantt-style visualisations. The frontend uses Next.js 15 with the App Router and React 19. Bryntum, a client-only component, is loaded dynamically without SSR. TanStack React Query handles server-state caching, and Lingui provides full bilingual support.

My Role

I designed and implemented the entire frontend:

Scheduler core: The central configuration defines a week/month view preset with German calendar weeks, custom event rendering by type (installation, mobilisation, delay, buffer), and a hierarchical tree column for cranes with nested projects.

Custom event rendering: The renderer visually groups related events – first and last events receive rounded corners, and 1px gaps between events are removed. Each type shows minimal text: "T" for installation, "MB" for mobilisation, "D" for delay.

Interactive features: The context menu allows registering delays, adding buffers, and deleting slots. All subsequent events in the same resource lane are automatically shifted by one week – core scheduling logic that makes the impact of changes immediately visible.

Parent event calculation: Logic computes the time span for each crane from its child project time windows on data load and creates ResourceTimeRanges displayed as overview bars on the parent row.

Project info popup: Hovering a resource opens a draggable popup showing the project manager and a comment section loaded via React Query.

Technical Highlights

Bryntum integration in Next.js 15: Bryntum Scheduler requires browser APIs and is not SSR-compatible. The solution: dynamic import via next/dynamic with ssr: false, wrapped in a component that renders the scheduler instance client-side only. Styles were connected to the Tailwind colour system through CSS custom properties.

Event-shifting logic: When inserting or deleting an event (delay/buffer), all chronologically subsequent events in the same resource lane are selected and shifted by one week. This mirrors real scheduling logic: a delay affects everything downstream.

i18n with server/client split: The Lingui integration uses server-side locale detection via the Accept-Language header in Next.js middleware, static route generation per locale, and client-side translations via <Trans> macros.

Result

The frontend consolidates the entire crane deployment schedule into a single timeline view. The hierarchical tree structure makes crane-to-project assignments visible at a glance. Through a clean REST API integration, the interface serves as the input layer for backend optimisation that automatically minimises costs across all projects. Bilingual support enables use across international teams.