JR Logo
Encompass Travel
Updated Nov 2024Vue.js

Encompass Tours

Digital platform for NZ motorcycle tours using Vue, Supabase and server-side caching. Focused on performance and progressive enhancement.

A Vue-based tourism platform with server-side caching and Supabase backend. Handles tour bookings, user auth, and content management for a NZ motorcycle tour company.

Build Key Features

  1. 01

    Supabase Integration

    Full auth system with email/social login, role-based access, and secure session management. Uses Supabase tables with RLS policies for tour data, bookings and user profiles.

    Supabase Integration
  2. 02

    Server-side Caching

    Implemented Redis caching layer for tour data and static content. Significantly reduced database loads and improved response times from ~800ms to <100ms.

  3. 03

    Tour Management

    Dynamic tour catalog with real-time availability, booking system, and admin dashboard for managing schedules and capacity.

    Tour Management
  4. 04

    Content Pipeline

    Image optimization pipeline using Sharp.js, automated WebP conversion, and CDN delivery. Lazy loading and progressive enhancement for fast initial loads.

    Content Pipeline
  5. 05

    Interactive Maps

    Tour route visualization using Mapbox GL JS with custom styling. Cached route data and vector tiles for offline support.

Friction Challenges

  1. 1

    Performance at Scale

    Optimizing for high-traffic periods with potentially thousands of concurrent users checking tour availability. Solved through aggressive caching and DB query optimization.

  2. 2

    Complex Data Relations

    Managing relationships between tours, bookings, users and availability calendars. Used Supabase foreign keys and views for data integrity.

  3. 3

    Image Performance

    Handling large volumes of high-res tour photos while maintaining fast page loads. Implemented responsive images, WebP conversion and CDN caching.

Takeaways Learnings

Backend Architecture

  • Designed scalable data models with Supabase, including complex relations and RLS policies
  • Implemented efficient caching strategies using Redis and CDN edge caching

Frontend Optimization

  • Built responsive components with Vue Composition API and TypeScript
  • Learned advanced image optimization techniques for large media libraries

DevOps & Monitoring

  • Set up CI/CD pipelines with automated testing and deployment
  • Implemented error tracking and performance monitoring