Self-service hotel check-in tablet kiosk — guest registration, dinner upselling, email capture, and car registration in a single touchscreen flow.
Screenshots • Tablet Flow • Features • Tech Stack • Architecture • Security
Hotel self check-in that actually works. Arrivo replaces the reception queue with a branded tablet kiosk — guests check in, book dinner, and share their email in under 60 seconds.
Free plan (1 tablet, 50 reservations/month) and Pro plan (unlimited tablets, unlimited reservations, custom branding, dinner upselling). Stripe-integrated billing with customer portal.
Firebase authentication with email/password. Hotel admin dashboard access for managing guests, reservations, analytics, and branding settings.
Hotel registration with instant onboarding. Create an account, configure branding, and deploy to a tablet in minutes.
Full-screen ambient display with hotel branding, live clock, weather, and promotional imagery. Cycles through content when idle. Guests tap anywhere to begin check-in.
Branded welcome screen with hotel name, evening greeting, and clear "CHECK IN" call-to-action. Secondary "RETURN TO LOBBY" option for guests who change their mind.
Guest types their surname or room number. Booking auto-matches instantly from the hotel's reservation database. No booking reference needed — just a name.
Pre-filled guest information with editable fields: vehicle registration and email (optional). 89% of guests provide their email when asked at this moment. Gold "Continue" CTA guides the flow.
Personalised dinner invitation using guest's first name. "Reserve a Table" gold CTA with "Maybe Later" secondary option. Elegant typography with decorative borders — designed for maximum conversion at the perfect moment.
Confirmation screen with heart icon, amenity icons (Free WiFi, 24/7 Service, Concierge), and auto-return countdown. Guest feels welcomed before they even reach their room.
Real-time dashboard with today's arrivals, check-in progress, dinner covers, and email capture stats. Live Activity feed shows check-ins as they happen. "Open Tablet" button for instant kiosk launch.
Full guest list with search, date filters, and status badges (Pending/Checked In). Room numbers, booking references, contact info, and export functionality. "Add Guest" for manual entries.
Dinner reservations captured from the tablet kiosk. Time slots, party sizes, and guest details. Staff can confirm, modify, or cancel reservations.
Create and manage upsell offers displayed on the tablet screensaver. Supports images and video. Active/inactive toggles with drag-to-reorder. Free plan: 2 offers, Pro: unlimited.
7-day and 30-day performance metrics: total guests, check-ins, dinner bookings, and conversion rate. Daily breakdown bar chart shows trends at a glance.
Choose from 8+ preset themes (Grand Noir, Château Blanc, Azure Resort, Midnight Jade, Velvet Amethyst, Sunset Terracotta) or create a custom theme. Dark and light modes available.
- Screensaver mode — ambient display with hotel branding, live clock, weather, and promotional content when idle
- Surname/room lookup — instant reservation matching without booking references
- Guest details capture — first name, last name, email, phone, car registration
- Pre-filled forms — data pulled from reservation system, guests just confirm
- Multi-step flow — welcome → find reservation → guest details → dinner upsell → confirmation
- Touch-optimised — large tap targets, clear typography, tablet-first design
- Auto-return — times out and returns to screensaver after inactivity
- Contextual prompt — "Join us for dinner tonight?" shown at the perfect moment during check-in
- Party size selection — tap to select number of guests
- Time slot picker — shows only available times
- 30-40% conversion — guests book when asked at this moment, before they even reach the room
- Revenue attribution — track how many dinner bookings come from the kiosk
- 89% email capture rate — guests willingly share email during check-in
- Direct booking promotion — confirmation screen includes hotel website and promo code
- OTA bypass — "Stop giving 20% to Booking.com" — encourage direct bookings for return visits
- Follow-up ready — captured emails feed into hotel marketing pipeline
- Guest management — view all checked-in guests, check-in status, dinner bookings
- Reservation management — dinner reservations with time slots and party sizes
- Offers management — create and manage upsell offers shown during check-in
- Analytics dashboard — check-in rates, email capture rates, dinner conversion metrics
- Email configuration — custom SMTP settings for hotel-branded emails
- Branding customisation — upload logos, set theme colours, choose typography
- Billing management — Stripe subscription portal for plan upgrades
- Hotel management — onboard, suspend, and manage all hotel accounts
- Lead finder — search and discover hotels via Serper.dev API
- Email campaigns — outreach campaigns with templates and tracking
- Subscription management — monitor plans, usage, and revenue across all hotels
- Campaign analytics — track outreach performance and conversion
- PWA — installable on tablets with offline support via service workers
- Multi-tenant — each hotel gets isolated data and custom branding
- Subscription tiers — Free (1 tablet, 50 reservations) and Pro (unlimited)
- Stripe Connect — automated billing, subscription management, and customer portal
- Real-time data — Firebase Firestore for instant reservation sync
| Technology | Purpose |
|---|---|
| React 18 | UI framework with hooks-based architecture |
| TypeScript | Type-safe development |
| Vite | Build tool with HMR and optimised bundling |
| Tailwind CSS | Utility-first responsive styling |
| React Router | Client-side routing (33 routes) |
| PWA + Workbox | Service workers for offline support and caching |
| Technology | Purpose |
|---|---|
| Express.js | Node.js server (port 3001) |
| Firebase Admin SDK | Firestore database and authentication |
| Stripe API | Subscription billing and webhook handling |
| Nodemailer | SMTP email via Microsoft 365 |
| Serper.dev API | Hotel discovery for lead generation |
| Font | Style | Use |
|---|---|---|
| Cormorant Garamond | Serif | Premium hotel headings |
| Playfair Display | Serif | Display titles |
| Cinzel | Serif | Elegant branding |
| Raleway | Sans-serif | Body text |
| DM Sans / Inter | Sans-serif | UI elements |
| Technology | Purpose |
|---|---|
| Firebase Firestore | NoSQL database (hotels, leads, campaigns) |
| Firebase Auth | Identity management |
| Stripe Webhooks | Subscription lifecycle (checkout, update, cancel, failed) |
| Service Workers | Offline tablet operation |
| Microsoft 365 SMTP | Transactional and campaign emails |
┌─────────────────────────────────────────────────────────────────┐
│ TABLET KIOSK (PWA) │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌───────────────┐ │
│ │ Screen- │ │ Find │ │ Guest │ │ Dinner │ │
│ │ saver │ │ Reserv. │ │ Details │ │ Upsell │ │
│ │ Ambient │ │ Surname │ │ Email │ │ Party Size │ │
│ │ Branding │ │ Room No. │ │ Car Reg │ │ Time Slot │ │
│ └────┬─────┘ └────┬─────┘ └────┬─────┘ └───────┬───────┘ │
│ └──────────────┼──────────────┼───────────────┘ │
│ │ Firestore + REST │
└──────────────────────┼───────────────────────────────────────────┘
│
┌──────────────────────┼───────────────────────────────────────────┐
│ HOTEL ADMIN DASHBOARD │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌───────────────┐ │
│ │ Guests │ │Reserva- │ │Analytics │ │ Settings │ │
│ │ Status │ │ tions │ │ Metrics │ │ Branding │ │
│ │ History │ │ Dinner │ │ Rates │ │ SMTP │ │
│ └──────────┘ └──────────┘ └──────────┘ └───────────────┘ │
└──────────────────────┼───────────────────────────────────────────┘
│
┌──────────────────────┼───────────────────────────────────────────┐
│ EXPRESS BACKEND (9 Endpoints) │
│ │ │
│ ┌───────────────────┴────────────────────┐ │
│ │ API Layer │ │
│ │ /api/create-checkout-session │ │
│ │ /api/create-portal-session │ │
│ │ /api/stripe-webhook │ │
│ │ /api/send-email │ │
│ │ /api/send-welcome-email │ │
│ │ /api/send-outreach-email │ │
│ │ /api/send-campaign-email │ │
│ │ /api/search-hotels │ │
│ │ /api/health │ │
│ └──┬───────┬────────┬────────┬──────────┘ │
│ │ │ │ │ │
│ ┌──┴──┐ ┌──┴───┐ ┌──┴──┐ ┌──┴──────┐ │
│ │Stripe│ │Email │ │Lead │ │Firebase │ │
│ │Subs. │ │SMTP │ │Finder│ │Admin │ │
│ │WebHk.│ │365 │ │Serp.│ │Firestor│ │
│ └──┬──┘ └──┬───┘ └──┬──┘ └──┬─────┘ │
│ └───────┴────────┴───────┘ │
└──────────────────────┼──────────────────────────────────────────┘
│
┌──────────────┼──────────────┐
│ │ │
┌────┴────┐ ┌────┴────┐ ┌────┴────────┐
│ Firebase │ │ Stripe │ │ External │
│Firestore │ │ Billing │ │ Services │
│ Auth │ │ Webhooks│ │ Serper.dev │
│ hotels │ │ Portal │ │ MS 365 SMTP │
│ leads │ │ Checkout│ │ Weather API │
│campaigns │ │ │ │ │
└─────────┘ └─────────┘ └─────────────┘
Guest taps tablet screen
│
▼
┌──────────┐ ┌──────────────┐ ┌─────────────────┐
│ Screensav│───▶│ Welcome │───▶│ Find Reservation │
│ → Tap │ │ CHECK IN │ │ Surname / Room │
└──────────┘ └──────────────┘ └────────┬────────┘
│
┌────────┴────────┐
│ Firestore │
│ Match booking │
└────────┬────────┘
│
┌────────────────┼────────────────┐
▼ ▼ ▼
┌───────────┐ ┌───────────┐ ┌──────────┐
│ Guest │ │ Dinner │ │ Confirm │
│ Details │ │ Upsell │ │ Complete │
│ + Email │ │ Party + │ │ Room Key │
│ + Car │ │ Time │ │ Wi-Fi │
└───────────┘ └───────────┘ └──────────┘
Hotel signs up (Free plan)
│
▼
┌──────────────┐ ┌──────────────┐ ┌─────────────────┐
│ Stripe │───▶│ Webhook │───▶│ Firestore │
│ Checkout │ │ checkout. │ │ Update hotel │
│ Session │ │ completed │ │ plan → Pro │
└──────────────┘ └──────────────┘ └─────────────────┘
│
┌──────────────┼──────────────┐
▼ ▼ ▼
┌───────────┐ ┌───────────┐ ┌──────────┐
│ sub. │ │ sub. │ │ invoice. │
│ updated │ │ deleted │ │ payment │
│ → sync │ │ → free │ │ _failed │
│ plan │ │ plan │ │ → notify │
└───────────┘ └───────────┘ └──────────┘
PWA-First Design — Built as a Progressive Web App for tablet deployment. Service workers enable offline check-in capability. Workbox handles caching strategies for static assets and API responses.
Multi-Tenant Isolation — Each hotel gets its own Firestore document with isolated guest data, reservation history, and branding settings. Tablet URL includes hotel ID (/tablet?hotel={id}) for tenant resolution.
Subscription Gating — Features are gated by subscription plan. Free plan limits tablets (1), reservations (50/month), and offers (2). Pro unlocks unlimited everything plus custom branding.
Webhook-Driven Billing — Stripe webhooks handle the entire subscription lifecycle: checkout completion upgrades the plan, subscription updates sync status, cancellation downgrades to free, and payment failures trigger past_due state.
Lead Generation Pipeline — Superadmin can search for hotels via Serper.dev API, manage leads in Firestore, and run email campaigns with templates — all from the dashboard.
Luxury Design System — Premium serif fonts (Cormorant Garamond, Playfair Display, Cinzel) paired with clean sans-serif (Raleway, DM Sans) create a luxury hotel aesthetic. Gold accent (#d4af37) with deep navy (#1e3a5f) backgrounds.
| Layer | Implementation |
|---|---|
| Authentication | Firebase Auth with email/password |
| Data Isolation | Per-hotel Firestore documents with tenant-scoped queries |
| Payment Security | Stripe webhook signature verification |
| API Protection | Express middleware with CORS and origin allowlisting |
| PWA Security | HTTPS-only service worker registration |
| Email Security | SMTP via Microsoft 365 with TLS encryption |
| Subscription Gating | Server-side plan validation on all premium features |
| Session Management | Firebase Auth tokens with automatic refresh |
arrivo/
├── index.html # Source HTML entry point
├── server.cjs # Express backend (Stripe, Email, Firebase)
├── package.json # Dependencies manifest
├── manifest.webmanifest # PWA manifest (standalone tablet mode)
├── registerSW.js # Service worker registration
├── sw.js # Service worker (offline support)
├── workbox-ec372ce3.js # Workbox caching library
├── favicon.svg # Branding asset
├── vite.svg # Vite logo
├── dist/ # Production build
│ ├── index.html # Built HTML
│ └── assets/ # Hashed JS/CSS bundles
│ ├── index-*.js # React app bundle (~1.2MB)
│ └── index-*.css # Tailwind styles (~114KB)
├── assets/ # Static assets & fonts
│ └── fonts/ # Google Fonts local copies
│ ├── Cormorant Garamond/ # Premium serif
│ ├── Playfair Display/ # Display titles
│ ├── Cinzel/ # Elegant branding
│ ├── Raleway/ # Body text
│ ├── DM Sans/ # UI elements
│ ├── Inter/ # System font
│ └── ... (12 font families)
└── node_modules/ # Dependencies
Public:
/— Landing page/login— Authentication/signup— Hotel registration/pricing— Plans and pricing
Tablet Kiosk:
/tablet?hotel={id}— Guest-facing check-in interface
Hotel Admin (/admin/*):
/admin— Dashboard/admin/guests— Guest management/admin/reservations— Dinner reservations/admin/offers— Upsell offer management/admin/analytics— Performance metrics/admin/emails— Email configuration/admin/billing— Subscription management/admin/settings— Hotel branding and config/admin/upload— Asset upload
Superadmin (/superadmin/*):
/superadmin— Platform dashboard/superadmin/hotels— Hotel account management/superadmin/leads— Lead management/superadmin/campaigns— Email campaigns/superadmin/lead-finder— Hotel discovery/superadmin/subscriptions— Billing overview
| Endpoint | Method | Purpose |
|---|---|---|
/api/create-checkout-session |
POST | Create Stripe checkout for subscription |
/api/create-portal-session |
POST | Open Stripe customer portal |
/api/stripe-webhook |
POST | Handle Stripe lifecycle events |
/api/send-welcome-email |
POST | Welcome email to new hotels |
/api/send-email |
POST | Custom email via hotel SMTP |
/api/send-outreach-email |
POST | Lead outreach email |
/api/send-campaign-email |
POST | Bulk campaign email |
/api/search-hotels |
POST | Hotel discovery via Serper.dev |
/api/health |
GET | API health check |
- PWA + Service Workers — offline-capable tablet operation with Workbox caching strategies
- Code splitting — Vite bundles with content-based hashing for optimal caching
- Firestore real-time — instant reservation sync without polling
- Touch-optimised — 60fps interactions with large tap targets and smooth transitions
- Font preloading — luxury fonts loaded from local assets, no external CDN latency
- Auto-return — idle timeout returns to screensaver, preventing UI stale states
Built by xelauvas.dev
This repository contains only documentation. Source code is proprietary.