W-MAKE
← All products

Technical variant · React frontend

W-Make Batch · React

A standalone Next.js frontend for the existing Express/SQLite core of W-Make Batch.

My role
Frontend architecture, migration strategy and technical quality.
Technology
Next.js 16 · React 19 · TypeScript · Tailwind CSS · SWR · Playwright
Status
Live · frontend modernisation
Who it is for
A controlled change of interface: the backend API stays stable.

Situation

The interface of a production system cannot be swapped like a marketing page. Postings, roles and the API have to stay the same during the migration.

The Express/SQLite core therefore remains the authoritative source. The React frontend reaches it through a server proxy, and business logic stays out of the browser.

Key decisions

  1. 01

    App Router and components renew the interface, and the domain posting path stays unchanged.

  2. 02

    API access runs through the server. The browser gets no direct access to the database or secrets.

  3. 03

    Falling back to the old interface is a narrow emergency route and not a second product.

  4. 04

    Route, role and smoke tests make the change verifiable.

A look inside

A look at the application.

The instance is a standalone React delivery, with the W-Make Batch backend on the internal container network. Access is available on request.

The raw material database of the React interface, demo site „Beispielwerk“ with anonymised master data.
The raw material database of the React interface, demo site „Beispielwerk“ with anonymised master data.
The same database on a phone.
The same database on a phone.

The process at a glance.

  1. 01

    Backend API

    The existing domain core stays responsible for sign-in, roles and postings.

  2. 02

    Server proxy

    The Next.js application relays API calls and keeps backend details out of the browser.

  3. 03

    React interface

    Modules are renewed one at a time as verifiable routes and components.

  4. 04

    Emergency route

    A narrow fallback path stays separate from the normal React bundle.

What carries over

Modernisation is safe when the domain boundary stays stable. A new client must not change production rules along the way.

Password-protected. Temporary access is available on request.

First call · 30 minutes · free

Tell me where your process gets stuck.

A few sentences about the process are enough: what runs in lists or side calculations today, and who works with it. Within two working days you get a reply and a clear view of whether I am the right person for it.

Arrange a callAssess your own process →