Portfolio Project Next.js 15 Hospitality Full-Stack

Montreux
Apartment Rental

A modern multi-property booking platform for 7 luxury apartments on Lake Geneva — real-time availability, Stripe checkout in CHF, and a bilingual French/English experience, built on Next.js 15 and deployed to Cloudflare Pages.

View Live Site
Properties
7
luxury apartments & villas
Framework
Next
Next.js 15 · App Router
Languages
2
French · English
Payment
CHF
Stripe · Swiss francs
Overview

Built for a portfolio of luxury Lake Geneva properties

Montreux Apartment Rental is a short-term rental platform showcasing seven high-end properties in the Montreux-Clarens region of Switzerland — from lake-view studios to a private villa with pool and jacuzzi. The client needed a single platform where guests could browse all properties, check live availability, and book directly without relying on Airbnb or Booking.com as intermediaries.

The platform covers the full booking journey: browsing all seven properties with individual detail pages, checking live availability via synced iCal feeds from Airbnb and Booking.com, calculating pricing automatically including city tax and guest-count discounts, and completing payment securely through Stripe Checkout in CHF.

Built with Next.js 15 App Router, TypeScript, Tailwind CSS v4, and edge-runtime API routes — deployed to Cloudflare Pages. A configuration-driven architecture means all seven apartments share a single ApartmentPage component, making the platform easy to extend as the property portfolio grows.

Core Features

Five systems, one seamless platform

01
Availability
Live iCal Sync from Airbnb & Booking.com

Each property's availability is pulled in real time from its existing Airbnb and Booking.com iCal feeds via an edge-cached API route. Booked dates are parsed and blocked automatically in the calendar — no manual updates required and no double bookings possible. Cache revalidates every hour to stay current without hammering external APIs.

02
Booking
Smart Pricing with Automatic Discounts

The booking widget calculates the total price dynamically as guests select dates and guest count — including nightly rate, city tax (CHF 6/night/adult), and a 20% discount for two-person bookings on larger apartments. Minimum stay rules are enforced per property. All of this logic lives in the frontend without a separate pricing service.

03
Payment
Stripe Checkout — Edge-Side Session Creation

A Next.js edge API route creates the Stripe Checkout session server-side, keeping the secret key out of the browser. The session includes dynamic line items — nightly accommodation and city tax shown separately for transparency. Stripe handles PCI compliance entirely; no card data is ever processed by the application.

04
Email
Contact & Inquiry Emails via Resend

A bilingual contact form collects guest enquiries and routes them through the Resend API, sent from a verified custom domain address. The form includes validation, loading state feedback, and graceful error handling — all without a third-party form service or backend server.

05
SEO
Structured Data & Bilingual SEO

Each property page includes JSON-LD structured data (LodgingBusiness + Apartment schemas), Open Graph and Twitter Card meta tags, canonical URLs, and bilingual hreflang alternates for French and English. A generated sitemap and robots.txt complete the technical SEO setup for local search in the Montreux region.


Interface Preview

Property selection — live pricing widget

Guests browse all seven apartments from a single landing page, then select dates and guest count on the property detail page to see an instant price breakdown before proceeding to Stripe checkout.

montreuxapartrental.ch
Grand Studio
CHF 220
1 room · 2 guests
Spa Luxury
CHF 650
3.5 rooms · private spa
Villa Bossonnens
CHF 1,250
Pool · jacuzzi · 12 guests
Check-in
14 July 2025
Check-out
21 July 2025
Guests
2 adults · 0 children
7 nights · city tax included
CHF 3,692
Book with Stripe →

Technical Build

Modern React stack, edge-deployed

The platform uses the Next.js 15 App Router with React 19 and TypeScript throughout. All backend logic runs on the Cloudflare edge via edge-runtime API routes — no Node.js server, no persistent infra. A configuration-driven data layer in /data/apartments.ts drives all seven property pages from a single typed schema.

Frontend
Next.js 15 · React 19 · TypeScript
App Router with server and client components, Tailwind CSS v4 for utility-first styling, Motion (Framer Motion successor) for scroll animations, sparkle effects, and staggered text reveals. Lucide icons, react-day-picker for calendar UI, date-fns for locale-aware date formatting.
Next.js 15 React 19 TypeScript Tailwind CSS v4 Motion date-fns
Backend
Cloudflare Pages · Edge Runtime
Next.js API routes compiled for Cloudflare Pages via @cloudflare/next-on-pages. Three edge functions handle iCal parsing (with 1-hour cache), Stripe session creation, and Resend email delivery — all running at the edge with no cold-start penalty.
Cloudflare Pages Edge Runtime iCal parsing Edge caching
Payments & Email
Stripe · Resend
Stripe Checkout sessions created server-side with dynamic CHF pricing, separate line items for nightly rate and city tax, and metadata for booking tracking. Contact emails sent via Resend from a verified custom domain with no third-party form service.
Stripe Checkout CHF pricing Resend Custom domain email
Data & SEO
Config-Driven · JSON-LD Schemas
All seven apartments defined in a single typed TypeScript configuration file — adding a new property requires one data entry, not a new page. Each property page generates JSON-LD structured data, Open Graph tags, Twitter Cards, and bilingual hreflang links automatically at build time.
JSON-LD Open Graph Sitemap hreflang
Bilingual from the ground up: every UI string, date format, and CTA is available in French and English — toggled client-side with no page reload. French is the primary language for the Montreux region; English serves international guests. Calendar headers, pricing labels, and form validation messages all respect the active locale.
Work With Me

Need a booking platform
for your properties?

Whether you manage one apartment or a portfolio of properties, I build fast, secure, and conversion-focused booking platforms — without the ongoing fees of third-party booking services.

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