Case Study — Booking & Payment System

LSERSA (the London & South Eastern Regional Snowsports Association) wanted a website re-design.

What they had was really a mix of two different sites — a pre-2016 site available as an "archive", and a post-2016 site that was regularly updated. In total there were circa 50 pages across the two sites, all hand-written and -maintained.

LSERSA also wanted to move their booking and payment for weekly training sessions online, replacing the "spreadsheets and emails" approach they were using.

Design & Structure

LSERSA wanted to combine their existing sites, making the archived content more discoverable. We agreed a new design approach for the website, with a bold modern style. Archived content from the pre-2016 site was incorporated into the new design ensuring no information was lost.

Re-designed LSERSA website homepage
Re-designed LSERSA website local slopes

Booking & Payments

LSERSA previously tried Teamer for bookings, but dropped it as being too cumbersome. After that experience they were keen to have a bespoke system, easy to use and administer, but low-cost to maintain.

Whilst this was not a complicated system, it still needed to provide the following:

  • email-based accounts including sign-up, verification and account recovery
  • account recovery
  • role-based access control
  • user access to create racers and book sessions
  • payment integration with checkout and failure/success callbacks
  • admin access to approve user account and racer requests
  • admin access to to create and edit training sessions
  • admin access to review, edit and delete users and racers

We worked with LSERSA to sketch out a workflow and structure that would meet their needs.

Booking system workflow diagram

Technical Stack

Stack design for booking system

The final system design was:

  • website written in React and statically generated using Gatsby.js
  • data-heavy elements (eg race calendar/results) generated from structured data (JSON and YAML)
  • back-end elements of the booking system written as Gatsby (serverless) functions
  • whole website hosted on Netlify (linked to a GitHub repo for automated builds)
  • database hosted at Supabase
  • integrated with Stripe for payments, using Stripe's checkout

LSERSA booking system - booking panel

LSERSA booking system - racer management panel

LSERSA booking system - emails panel

LSERSA booking system - session management panel

Authentication & Access Control

Normally user authentication would happen on the server, but we don't have one. Instead, the LSERSA system uses JSON web tokens (JWTs), a type of browser cookie.

When a user signs in, a serverless function checks username and password, and after validation a JWT is stored in the browser. The JWT is encoded, and includes an identifier that can be checked against the database. It's also given an expiry date — a week in this case.

Whenever the booking page is revisited, or a request is made, the system checks  that a valid JWT is present. If not, any JWT will be deleted and the user will be shown the log-in screen. Logging out also deletes the JWT — meaning the log-in screen will be shown again.


The benefits of this solution are:

  • Most of the website is statically generated, served by Netlify's Content Delivery Network (CDN). This means very quick load times and low hosting costs.
  • No server required. The booking system uses serverless functions to provide an API. We can still provide interaction, database access and full user-authentication.
  • Database is provided by Supabase (a Database-as-a-Service).
  • Low running costs ...

Running Costs

We selected service providers and engineered the system to be efficient to keep running costs down.

Service Provider Cost
Code Repository GitHub Free
Hosting Netlify Free Tier
Database Supabase Free Tier available

While Supabase has a generous free tier, we recommend using the first paid tier which has the benefit of automated backups and doesn't pause the database if there are period of inactivity. Costs for a service like the LSERSA booking system are very low.

The only remaining running costs are for domain registration and email. LSERSA already paid for these, although for a new system we would suggest using Hover for domain and email. Their typical combined annual costs are around $40 / £35 for both, and they have an excellent reputation.

For more information or to discuss a project, please email [email protected].