VOLT — Next.js Padel & Squash Club Booking Template
A production-ready booking website for padel & squash clubs. Built with Next.js 15, Tailwind CSS v4, and the Opencals Storefront SDK.
View Live Demo →
A dark, technical club aesthetic — near-black surfaces, electric-orange accent, and a monospace display face — for a multi-club network: a club-first, full-screen court booking page (a live hall map of every court, or a courts × time grid) for rentals, and a classic coach-led training flow for lessons and group classes. Full storefront included — courts, trainings, coaches, checkout, customer accounts — wired up out of the box. MIT licensed: clone it, rebrand it, ship it.
Get Started in 3 Steps
1. Create an Opencals account
Sign up at app.opencals.com and create a Dev Store. When prompted for a dataset, choose the VOLT Padel & Squash preset — this seeds your store with four clubs (Madrid, Barcelona, Valencia, Málaga), their padel doubles, padel singles and squash courts, coaches, training classes and add-ons, so your template looks exactly like the demo.
2. Get your API key
Go to your User Account Settings in the Opencals dashboard and generate a private storefront key (spk_). The template calls the API from its server, so the key stays secret, and it forwards each visitor's IP (nextBuyerIp in lib/opencals.ts) so visitors get their own rate limits. If your server has fixed outgoing IPs you can restrict the key to them; on Vercel, leave the list empty. A public key (sfk_) also works, but then all visitors share your server's limits.
3. Deploy to Vercel
During deployment, Vercel will ask you to set environment variables:
| Variable | Value |
|---|
OPENCALS_API_KEY | Your private storefront key (starts with spk_) |
AUTH_SECRET | Any random string — used for session encryption |
That's it. Once deployed, you'll have the same fully functional booking site as the live demo.
The Storefront
A full-bleed, cinematic homepage with an "Our clubs" section (one card per club, straight into its courts), a two-mode intro (rent a court vs. train with a coach), sports with live court counts, a coaches teaser and a facility gallery, all driven by your Opencals data.
What's Included
Club-First Court Booking
The centerpiece, full screen. Players don't look for a court in four cities at once, so /book starts from one club: the one in the link, the one this browser remembers, or the nearest one ("Near me" uses the club coordinates from your store). New visitors pick from photo cards that show each club's soonest free court. The club's page then has two views over the same live data:
- Hall map. Every court from above, doubles wide and singles narrow, lit for one start time: orange = free for the whole game, a pulsing edge = free within the hour, dim = free later ("from 21:00"), hatched = taken for the day. Drag the time bar (its bars are the number of free courts per half hour) or tap a quick time; "Book 19:30" takes the best free court in one tap, and tapping a court lists its own free starts.
- Grid. Courts × half hours for the day, with a now-line. Tap a free cell, pick 30 / 60 / 90 / 120 minutes (hovering previews the spanned cells), confirm.
Pick a day (14 days ahead, sold-out days struck through), a sport (only the club's sports show) and a game length. Everything is in the URL (/book?club=volt-madrid&sport=padel&date=…&length=90&time=19:30&view=grid), so links to a club, a day or a time just work.
Fast by design. The page makes one request per club: /api/clubs/[id]/availability reads each court's free ranges for the whole booking window once (merged availability), caches each court for 60 seconds on the server, and the browser computes the map, the grid, the pulse and every "free from" locally. Switching day, length, sport or view never calls the API. A booking, cancel or reschedule invalidates the cached courts at once.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
