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.
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.
Technical Stack
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
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.
Benefits
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].