Feature 01
Dadi Rent BoatWeb Booking Platform20244 Months
Dadi Rent Boat — Online Boat & Dinghy Rental Platform
Online booking platform for an Italian boat and dinghy rental fleet — vessel catalog, availability calendar, secure deposits, and multilingual UX. Services: Web Development, Backend, Booking System, DevOps
ReactNodejsMongodbJenkinsGithub
Section 01 · Overview
Overview
Dadi Rent Boat is a full-featured online booking platform for an Italian boat and dinghy rental operator on the Adriatic coast. We rebuilt their digital storefront from a static brochure into a live booking engine: travellers browse the available fleet, check real-time availability, reserve a vessel for the dates they want, pay the deposit online, and receive an instant confirmation in their language. The web app is powered by a React.js frontend, a Node.js + MongoDB backend, and ships to a hardened VPS via Jenkins on every push to main, so the team can update fleet copy and seasonal pricing without ever touching a server.
Feature 02
Multilingual UX (Italian + English) optimized for European holiday traffic.
Feature 03
Secure online deposits with instant booking confirmation emails.
Feature 04
Mobile-first booking flow — most reservations come from phones at the marina.
The Challenge · Problem Statement
Problem Statement
The previous Dadi Rent site was a static brochure: customers had to call or WhatsApp the office to check whether a boat was free, then drive to the marina to leave a deposit in cash. Out-of-region travellers and English-speaking tourists frequently dropped off mid-funnel, the team lost weekends to phone tag, and double-bookings were a real risk during peak season.
User Painpoints
No Online Availability
Customers had no way to see whether a vessel was free for their travel dates without calling the office during business hours.
Phone-Heavy Operations
The owner was answering 30+ calls a day during peak season just to confirm dates, blocking time for actual on-the-water service.
Manual Deposit Collection
Deposits were collected in person at the marina, which lost bookings from tourists who wanted to confirm before flying in.
Language Barrier
An Italian-only site filtered out the German, French, and English-speaking holidaymakers that make up the majority of summer demand.
How We Build · Design Process
Design Process
Our proven 4-step approach to delivering products that actually ship.
- Step 01
Discover
User research, stakeholder interviews, and competitive analysis to ground every decision in evidence.
- Step 02
Define
Product hypothesis, user stories, and a prioritized scope we can all sign off on before a pixel is drawn.
- Step 03
Design
Style guide, high-fidelity wireframes, and clickable prototypes validated with real target users.
- Step 04
Deliver
Production-grade UI, component libraries, and a fully documented system your engineers can ship fast.
Section 04 · Our Solution
Our Solution
How we solved each pain point — with outcomes, not ambiguity.
- Flagship Solution · 01
Live Availability Engine
MongoDB-backed calendar shows real-time vessel availability with conflict-aware date-range selection — no more phone tag.
- Solution 02
Online Deposits
Customers pay a secure deposit at booking, lock in the vessel instantly, and receive a confirmation email with their reservation reference.
- Solution 03
Bilingual Storefront
Italian and English UX with locale-aware date formats and currency, opening the funnel to the EU tourist market.
- Solution 04
Owner Dashboard
A simple admin console lets the owner publish new vessels, adjust seasonal pricing, mark maintenance windows, and export bookings as CSV.
- Solution 05
One-Click Deploys
Jenkins on the VPS picks up every push to main, runs tests, builds the React bundle, restarts the Node process, and pings the team in Slack — zero-touch releases.
Section 06 · Visual System
Color Palette & Typography
The visual language guiding every pixel.
Color Palette
Sea Navy
#0B1F3A
Adriatic Blue
#1F60A8
Sky Cyan
#7DC8E8
Sand
#F4E9D8
Pure White
#FFFFFF
Typography
Typography
Poppins
Bold · Semi Bold · Medium · Regular · Light
Aa Bb Cc · 0 1 2 3 4 5 6 7 8 9
Tech Stack
Technology Stack
The production-grade stack we used to ship this product — and exactly how each piece pulls its weight.
Frontend
How We Use
Component-driven storefront with a vessel catalog, availability calendar, locale switcher, and booking checkout — all client-side rendered for instant interactions.
Benefit
Fast, app-like browsing on mobile so summer travellers book on their phones from the marina with no friction.
Backend
How We Use
Express + TypeScript API powers the booking engine, availability checks, deposit confirmations, locale routing, and the admin dashboard.
Benefit
Lightweight, non-blocking I/O keeps the booking flow snappy even when summer traffic spikes 10× overnight.
Database
How We Use
Stores vessels, availability windows, reservations, customer profiles, and audit trails. Compound indexes on vessel + date keep conflict checks under 5 ms.
Benefit
Flexible schema lets us add new vessel attributes (extras, pricing rules) without painful migrations during peak season.
CI / CD
How We Use
Self-hosted Jenkins on the VPS picks up every commit to main, runs the test suite, builds the React bundle, deploys the Node API, and notifies the team — all hands-off.
Benefit
Releases that used to require a developer logging into the server now ship in 2 minutes, end-to-end.
Infrastructure
How We Use
Hardened Linux VPS running Nginx as a reverse proxy in front of the Node app, with Let's Encrypt for HTTPS and daily MongoDB backups to off-box storage.
Benefit
Predictable monthly cost, full control over the stack, and a single SSH session away from anything we need to debug.
DevOps
How We Use
Branch-based workflow with PR reviews, branch protection on main, and a Jenkins webhook so every merge triggers an automatic deploy.
Benefit
Every change is peer-reviewed and traceable — critical for a live booking platform handling real customer deposits.
Outcomes · Results & Impact
Results & Impact
What Dadi Rent Boat shipped — and what it delivered.
0%
Online Booking Coverage
0
Languages Supported (IT + EN)
0/7
Self-Serve Reservations
Zero-Touch
Deploys via Jenkins
