01
About
Client
Year
Scope of Work
View the live Laughlin River Jet Ski Rentals website
Cutting-edge App Router framework powering server-side rendering, locale-based routing, and ISR-cached data fetching. Running v16 with React 19 Server Components to minimize client-side JavaScript on a site built for phones in the desert.
Server Components handle the weather widget, product cards, and reservation banner. Client-side React ships only where interactivity is required: the hero, navigation, testimonials carousel, and booking form.
End-to-end type safety across the entire stack. Product definitions, form schemas, API route handlers, and i18n message keys are all statically typed, eliminating an entire class of runtime errors.
Utility-first styling with Tailwind v4's new @theme directive and oklch perceptual color space for the entire design token system. Custom 3xl breakpoint at 1920px for ultrawide displays.
Base component library providing accessible, unstyled primitives for the calendar, popover, dialog, drawer, tabs, and form inputs. Customized with the brand's electric yellow primary color.
Powers the sticky header show/hide transitions, mobile menu height animations, testimonials carousel, and section entrance animations. All animations are GPU-accelerated and respect prefers-reduced-motion.
Client-side form state management for the reservation system with field-level validation, auto-formatted phone inputs, calendar date picking, and passenger count controls.
Production-grade internationalization powering full EN/ES bilingual support. Locale-based routing with prefix-as-needed strategy, structured JSON translation files, and SEO parity via hreflang alternates.
Global smooth scroll engine providing buttery page scrolling, with intelligent iOS Safari detection that falls back to native scroll to avoid known WebKit rendering issues.
Transactional email delivery for the reservation pipeline and newsletter signups. Dual emails on every booking (admin + customer), plus contact list management for the footer newsletter.
Distributed rate limiting for the reservation API endpoint. A sliding window of 3 requests per 60 seconds per IP, enforced consistently across all serverless instances via Upstash's Redis-backed rate limiter.
All UI design, component specifications, and responsive breakpoint planning were produced in Figma before development, ensuring design intent translated cleanly into code.
Laughlin River Jet Ski Rentals had the fundamentals locked down. 4.9 stars across 929 Google reviews. Brand-new Yamaha WaveRunners. A Car Jet Boat, a Sea-Doo Speedster, and a Pontoon Boat out of the New Pioneer Casino dock. Private beach access. No security deposit. The on-water experience was already excellent.
The website was not. It was a Shopify store with a neon yellow background, decorative fonts that looked like they were set in 2005, and a third-party weather widget with a "POWR — Create your own for free!" watermark at the bottom. The reservation "system" was a basic contact form that sent an email and hoped for the best. No confirmation emails. No vessel selection. No mobile optimization for tourists browsing on their phones at the casino.
For a business pulling in five-star reviews, the website was actively working against them:


We scrapped the Shopify store entirely and rebuilt on a modern stack: Next.js 16, React 19, and Tailwind CSS v4. The first scroll does the selling. Bold design, electric yellow brand accents against dark backgrounds, and a curated fleet showcase immediately signal that this is a premium operation. Every element on the page is engineered to break down purchase objections: lowest price guarantee removes price anxiety, no deposit eliminates commitment risk, flexible scheduling and online booking capture intent around the clock, and a dedicated safety section with video reassures first-timers. Every section ends with a "Reserve Now" CTA. No dead ends.
The fleet is presented as a guided selling flow, not a product catalog. Each watercraft gets its own spotlight: the Yamaha WaveRunner leads as the premium flagship, the Car Jet Boat targets speed seekers, the Sea-Doo Speedster appeals to groups, and the Pontoon Boat serves families. Compare the old Shopify product listing to the new fleet showcase:


The reservation system is fully custom. No Shopify, no third-party plugin taking a percentage of each sale. Tourists can browse the fleet, pick a vessel, choose a date, and confirm their booking at midnight from their phone. Both the business and the customer receive instant email confirmations. The old Shopify form didn't even let you select which vessel you wanted.


Every piece of content exists in both English and Spanish, professionally localized rather than machine-translated. A live weather widget shows real-time Laughlin conditions with a 5-day forecast, replacing the old POWR embed and its free-tier watermark. An embedded Google Maps widget puts the dock location front and center with a contact card overlay. And the footer now includes a newsletter signup powered by Brevo, turning one-time visitors into a re-marketable audience for seasonal promotions.
The entire site was designed mobile-first with dedicated optimizations for both iOS Safari and Android Chrome. Smooth scrolling adapts to the device. The sticky navigation knows which direction you're scrolling and which section you're reading. Every interaction was built for a phone held in the Nevada sun, not a desktop in an office.




The old site lived on a myshopify.com subdomain. Swapping it for a custom domain meant risking the search rankings the business had built over years. We handled the transition in two phases: first, we migrated the domain and pointed it to the existing Shopify store, monitoring Google Search Console to confirm Google re-indexed under the new URL and preserved existing rankings. Only once rankings were stable did we swap the Shopify store for the new custom-built site. The result: zero ranking loss, and a new site architecture that's built to climb. Structured data, hreflang alternates, and proper Googlebot directives give Google far richer signals than the Shopify store ever could.
This wasn't a redesign for the sake of redesign. Every decision, from the 24/7 booking system to the bilingual SEO to the objection-breaking UX, was made to convert visitors into confirmed reservations.
The math is straightforward: one extra booking per week pays for the entire website within the first season. Everything after that is pure return on investment.
01
02
03
04
A closer look at the engineering decisions behind this project, from the reservation pipeline to the zero-downtime SEO migration.
Built on Next.js 16 with React 19 Server Components. The weather widget, product sections, reservation banner, and about section are all async server components. Client-side React ships only where interactivity is required: navigation, testimonials carousel, and booking form. Styling via Tailwind CSS v4 with the oklch perceptual color space for the design token system, shadcn/ui (base-vega variant) for accessible primitives, and a custom 3xl breakpoint at 1920px for ultrawide displays.
The booking form runs on TanStack Form with field-level validation: name, email, 10-digit phone (auto-formatted), date (calendar picker, past dates disabled), passenger count (1 to 20), hotel name, optional message, and vessel selection. Server-side validation runs independently. Product names resolve from a typed registry, not user input. Brevo handles dual transactional emails (admin + customer). Upstash Redis provides distributed rate limiting (3 req/60s/IP) across serverless instances.
Full EN/ES support via next-intl with localePrefix: 'as-needed' routing. English has no URL prefix; Spanish routes through /es/. Locale-specific og:locale and hreflang alternates. Zero hardcoded text in components.
Specific optimizations per browser engine:
backdrop-blur replaced with solid rgba, will-change stripped, video play debounced.content-visibility optimizations, GPU-accelerated animations.use-lenis-scroll, use-scroll-direction, use-scroll-spy.Server-rendered widget fetching from OpenWeather API with 10-minute ISR cache. Processes 3-hour forecast intervals into daily min/max values. Six weather condition categories each map to unique gradient backgrounds. Wind direction calculated to 16-point compass resolution, fully translated for Spanish. Replaces the old POWR third-party embed.
Locale-aware Google Maps iframe with lazy loading. The hl parameter switches between en and es based on active locale. Contact information overlay card with phone, email, and address. React Suspense with skeleton fallback for zero-layout-shift loading.
Brevo-powered email capture in the footer. In-memory sliding-window rate limiting (3 req/min/IP), disposable email domain blocking, and canvas-confetti brand-colored burst on success.
Two-phase migration from *.myshopify.com to custom domain:
hreflang alternates provided Google richer signals than Shopify ever could.Two JSON-LD schemas injected in the layout:
Googlebot directives: max-video-preview: -1, max-image-preview: "large", max-snippet: -1. Full hreflang alternates for EN/ES with locale-specific og:locale values.