Portfolio Project Cloudflare Workers Hospitality Full-Stack

Le National
de Montreux

A full-stack luxury apartment booking platform — real-time availability calendar, Stripe-powered checkout, and a fully digital multi-step guest check-in with signature capture and PDF generation.

View Live Site
Hosting
CF
Cloudflare Workers + Pages
Check-in Steps
4
fully digital, signature-gated
Languages
4
EN · FR · DE · IT
Payment
Stripe
server-side checkout
Overview

Built for a luxury apartment in Montreux

Le National de Montreux is a high-end vacation apartment on the shores of Lake Geneva. The brief was to replace a manual booking and check-in process with a fully digital platform — one that matched the property's luxury positioning while being simple enough for any guest to use on arrival.

The platform handles the full guest journey: browsing availability via a live iCal-synced calendar, booking and payment through Stripe Checkout, and completing check-in documents digitally with legally captured signatures and auto-generated PDF records.

Built with zero frameworks — vanilla HTML, CSS, and JavaScript on the frontend, a single Cloudflare Worker on the backend. Fast, secure, and with no monthly SaaS fees beyond Stripe transaction costs.
Core Features

Four systems, one seamless experience

01
Availability
Real-Time Calendar via iCal

Blocked dates are parsed live from an iCal feed, meaning the calendar always reflects actual availability without any manual updates. Date ranges are validated server-side before checkout is initiated, preventing double bookings.

02
Payment
Stripe Checkout — Server-Side

A Cloudflare Worker creates the Stripe Checkout session server-side, keeping the secret key out of the browser entirely. Dynamic pricing applies peak-season rates automatically. The guest is redirected to Stripe's hosted checkout page and back on completion.

03
Check-in
Digital Multi-Step Check-in with Signatures

A four-step password-gated check-in flow collects guest registration details, building rules acknowledgement, and wellness & SPA rules — each with a drawn signature captured via Canvas API. Validation prevents progression unless each step is fully completed and signed.

04
Documentation
Auto-Generated PDF on Completion

On completing the final step, jsPDF generates a formatted A4 document containing all registration data, acknowledgements, dates, and all three captured signatures — ready to download or print. The document is structured to meet Swiss rental administration requirements.

Interface Preview

Check-in flow — step 1 of 4

The check-in interface guides the guest through registration, building rules, and wellness rules — each requiring a drawn signature before advancing. The final screen generates and downloads the complete signed PDF.

lenationalmontreux.ch/checkin
✓
Registration
2
Building Rules
3
Wellness
4
Complete
Guest Name
Marie Dubois
Apartment
Le National — Suite 3
Arrival
2025-07-14
Departure
2025-07-21
Next Step →
Technical Build

Zero-dependency stack, production-grade security

Every architectural decision prioritised performance, security, and zero ongoing infrastructure cost. No Node.js server, no database, no CMS — just a Cloudflare Worker at the edge handling all dynamic logic.

Frontend
Vanilla HTML / CSS / JS
No frameworks, no build step, no dependencies. Canvas API for signature capture, jsPDF for client-side PDF generation. Fully responsive with fluid typography using clamp().
Canvas API jsPDF CSS Custom Properties clamp() scaling
Backend
Cloudflare Workers
A single Worker handles all dynamic routes: iCal calendar fetching, Stripe session creation, and email submission. All credentials stored as encrypted environment secrets — never exposed to the browser.
Cloudflare Workers Edge runtime Encrypted secrets CORS enforcement
Payments
Stripe Checkout
Server-side session creation with dynamic pricing — peak season (May–September) rates applied automatically. Stripe handles PCI compliance entirely; no card data ever touches the Worker.
Stripe Checkout Dynamic pricing CHF currency Webhook-ready
Security
Strict CSP + SRI
Content Security Policy locks down all asset sources. CORS whitelist restricts API access to the verified domain only. Password-gated check-in with session-based authentication prevents unauthorised access.
Content-Security-Policy CORS whitelist HSTS Session auth
Multi-language support: the entire interface — check-in flow, validation messages, document labels — is available in English, French, German, and Italian, driven by a single translations object with no external i18n library.
Work With Me

Need a platform
built for your property?

Whether you need a booking flow, a guest-facing digital check-in, or a complete web presence — I build fast, secure, and cost-efficient platforms tailored to hospitality operations.

Get in Touch View All Work

Remote · Switzerland-based · Available for new projects · EN / FR / TR / RU