All projects
FrontendField apps

Equipment rental: fleet, bookings, payment and signed contract

From booking to a contract signed on a tablet, with no risk of double bookings.

Key figures

applications
2
lines of code
~17,000
to ship the first wizard
5 days

Context

A distribution and services SME rents out equipment to its customers. It needs to know the state of its fleet, prevent a machine from being rented twice over the same period, calculate prices and track payments through to a signed contract.

My role

From design to deployment of both applications, fully autonomously.

Solution

The fleet management app covers machines, variants, accessories, maintenance, deposits and engine hours. Bookings block periods that are already rented and calculate the price: delivery, deposit, and accessories charged per day or at a flat rate. Online bookings come in from the store.

The handover app guides the rental on a tablet in 5 steps: identity, photos, contract, signature, completion. The PDF contract is generated in the browser, previewed, then sent by email. On the API side, payment requests go out with a bank transfer QR code.

Key features

  • Complete fleet view

    Machines, variants, accessories, maintenance, deposits and engine hours, all in one place.

  • No double bookings

    Periods already rented are blocked, so a machine cannot be booked twice for the same dates.

  • Built-in pricing

    Delivery, deposit, and accessories charged per day or at a flat rate are all factored in automatically.

  • 5-step customer handover

    Identity, photos, contract, signature and completion, on a tablet, in a guided wizard.

Engineering challenges

  1. 1

    A wizard that resumes at the right step

    An interrupted handover doesn't start over: the wizard reopens at the current step.

  2. 2

    PDF contract generated in the browser

    The contract is built client-side with @react-pdf and previewed on the tablet with pdf.js.

  3. 3

    Automated payments on the API side

    Payment requests with a bank transfer QR code, plus automatic reminders and cancellations.

  4. 4

    Unsaved changes warning

    An alert flags unsaved changes before they can be lost.

Tech stack

Frontend
React 18TypeScriptMUI 6AG GridRedux ToolkitFormikYup@hello-pangea/dnd
Integrations
@react-pdfpdf.js

A project of this scale?

Let's talk about your context: I'll tell you frankly what is feasible, and how long it takes.

Let's talk about your project
Request a quote