Jake Baker

Golf Tournament Event Series

Premium Event Registration Platform for a Major Automotive Client.

Golf Tournament Event Series

Project Overview

A sophisticated, enterprise-grade registration platform built with Vue.js/Nuxt for the Client’s premium golf tournament series. This application demonstrates advanced event management expertise through complex multi-step registration flows, real-time capacity management, and golf-specific business logic.

Why This Project Showcases Event Tech Excellence:

This project proves the ability to build production-ready event platforms that handle both technical complexity and nuanced event management requirements.

Top 3 Technical Decisions

1. Smart State Machine for Registration Flow Management

Most event platforms struggle with rigid registration flows. This project demonstrates the understanding that different event types need different registration journeys and shows the ability to build flexible systems that scale across event variations.

// State machine approach for complex registration flows
const views = ['open', 'choice', 'confirming', 'confirmed', 'cancelling', 'cancelled', 'waitlisted']

// Dynamic step calculation based on event type
computed: {
  steps() {
    const disabled = []
    if (!this.guestlistData.custom_5) disabled.push(5) // Hide guest management
    if (this.event.category === 'trophy') disabled.push(2) // Skip vehicle info
    return viewSteps.confirming.filter(s => !disabled.includes(s.id))
  }
}

Why This Matters: It allows for a highly dynamic user experience where the application adapts to the specific needs of each tournament type (e.g., some require vehicle information, others don’t) without code duplication or fragile if/else chains scattered throughout the templates.

2. Pessimistic Concurrency Control for High-Demand Events

Shows understanding of race conditions in event registration - a critical problem when thousands try to register simultaneously for limited spots. Most developers haven’t thought about overselling prevention in this depth.

// Real-time capacity management with waitlist fallback
async confirmRsvp() {
  const { extended } = await this.getGuestlistData(this.guestlistUid)
  const waitlist_enabled = extended.waitlist_enabled[this.rsvp.custom_1]

  let newStatus = 'confirmed'
  if (waitlist_enabled && !['confirmed'].includes(rsvpData.rsvp.status)) {
    newStatus = 'waitlisted' // Graceful degradation to prevent overselling
  }
}

Why This Matters: In high-stakes events, overselling is a customer service nightmare. This implementation ensures that the system fails safe—if a spot is taken while a user is filling out the form, they are automatically and gracefully moved to a waitlist, rather than being told “success” and then having to be cancelled later.

3. Domain-Specific Validation Architecture

Demonstrates ability to understand and implement complex domain requirements beyond generic form validation. Event companies need developers who can translate business rules into robust technical solutions.

// Custom validation for golf handicaps
extend('between_decimal', {
	validate(value, { min, max }) {
		if (value.split('.').length > 1) return false // Max 1 decimal place
		value = value.replace(',', '.') // Handle European number format
		return Number(min) <= value && Number(max) >= value
	}
})

Why This Matters: Golf handicaps have very specific rules (e.g., specific decimal precision, negative values). Standard number validators are insufficient. This custom validator ensures data integrity at the source, reducing the need for manual data cleaning by event organizers.

Challenges & Solutions: Hardest Technical Problems

Challenge 1: Multi-Step Form State Persistence Across Browser Sessions

Problem: Golf tournament registration requires extensive information collection (personal details, golf handicaps, accommodation preferences, guest information) but users often need to complete registration across multiple sessions or devices.

Technical Complexity:

Solution Implemented: A sophisticated state persistence strategy using Vuex and localStorage.

// Sophisticated state persistence strategy
export const mutations = {
  updateRsvpData(state, newRsvpData) {
    state.rsvpData = newRsvpData
    localStorage.setItem(rsvpDataLocalStorageKey, JSON.stringify(newRsvpData))
  }
}

// Smart form hydration on mount
async mounted() {
  await this.getRsvpData(this.rsvpCode)
  const status = this.rsvpData.rsvp.status

  if (status === 'requested') {
    this.handleFormView('confirming')
    this.currentStep.confirming = this.steps.confirming.slice(-1)[0].id // Resume at last step
  }
  this.prepareRsvpFrom() // Clean and prepare data for display
}

Business Impact: Enables seamless form resumption across sessions, addressing a critical pain point in complex registration flows. This significantly reduces drop-off rates for long forms.

Challenge 2: Race Condition Prevention in High-Demand Event Registration

Problem: Premium tournaments have limited spots (often 50-100 participants) but receive hundreds of simultaneous registration attempts. Standard database transactions aren’t sufficient when dealing with complex business rules around waitlists, guest limits, and tournament categories.

Technical Complexity:

Solution Implemented: Pessimistic locking with intelligent fallback. The system checks capacity immediately before the final commit.

// Pessimistic locking with intelligent fallback
async confirmRsvp() {
  // Get fresh capacity data before each registration attempt
  const { extended } = await this.getGuestlistData(this.guestlistUid)
  const waitlist_enabled = extended.waitlist_enabled[this.rsvp.custom_1]

  // Atomic status determination
  let newStatus = 'confirmed'
  if (waitlist_enabled && !['confirmed'].includes(rsvpData.rsvp.status)) {
    newStatus = 'waitlisted'
  }

  rsvpData.rsvp.status = newStatus
  rsvpData.guests.map(guest => guest.rsvp.status = newStatus) // Cascade to guests

  // Single atomic update to prevent partial state
  const returnedRsvpData = await this.$airlst.updateRsvpByCode(this.rsvpCode, rsvpData)
}

Business Impact: Designed to prevent overselling through pessimistic concurrency control while maximizing capacity utilization via intelligent waitlist management.

Challenge 3: Complex Domain Validation for Golf-Specific Business Rules

Problem: Golf tournaments have intricate validation requirements that generic form libraries can’t handle:

Technical Complexity:

Solution Implemented: A custom validation ecosystem extending VeeValidate.

// Custom validation ecosystem
extend('between_decimal', {
  validate(value, { min, max }) {
    if (value.split('.').length > 1) return false // Enforce decimal constraint
    value = value.replace(',', '.') // Handle European decimal separator
    value = Number(value)
    return Number(min) <= value && Number(max) >= value
  },
  params: ['min', 'max'],
})

// Dynamic options with search
computed: {
  options() {
    const custom11 = Object.keys(this.guestlistData.fields.rsvp.custom_11.enum).map(k => ({
      label: k,
      value: k,
    }))

    custom11.unshift({ // Add fallback option
      label: 'Sonstiger Club',
      value: 'Sonstiger Club',
    })

    return { custom_11: custom11 }
  }
}

Business Impact: Front-end validation prevents invalid golf data from entering the system, designed to reduce post-registration cleanup and manual verification overhead.

Technical Assessment - Vue Specific

Vue Version: Nuxt 2.15.4 (Vue 2.x) with Options API pattern.

Component Architecture:

State Management: Vuex store with localStorage persistence handles the complex registration state across multi-step forms.

// Vuex store with localStorage persistence
export const state = () => ({
	rsvpCode: localStorage.getItem(rsvpCodeLocalStorageKey) || null,
	rsvpData: localStorage.getItem(rsvpDataLocalStorageKey)
		? JSON.parse(localStorage.getItem(rsvpDataLocalStorageKey))
		: null,
	guestlistData: null,
	formView: 'choice' // State machine for registration flow
})

Form Validation: VeeValidate 3.4.5 integration with custom validation rules.

Vue Best Practices Demonstrated:

Real-time Features:

Performance Optimizations:

Event Management Domain Expertise

Registration Flow UX: The application features a 6-step guided registration process:

  1. Personal Information: Contact details with country-specific validation.
  2. Vehicle Information: Transportation preferences (optional based on event type).
  3. Golf Details: Handicap validation and golf club selection with autocomplete.
  4. Tournament Participation: Accommodation and dietary requirements.
  5. Guest Management: Add/remove tournament guests.
  6. Review & Consent: Data privacy and media consent with legal document links.

Advanced UX Features:

Capacity Management: Real-time waitlist logic ensures that if an event fills up while a user is registering, they are seamlessly handled.

// Real-time waitlist logic
let newStatus = 'confirmed'
if (waitlist_enabled && !['confirmed'].includes(rsvpData.rsvp.status)) {
	newStatus = 'waitlisted'
}

Payment & Registration States:

Admin/Organizer Tools:

Portfolio Positioning

Key Metrics & Business Impact:

Technical Challenges Overcome:

Scalability Demonstration:

This case study demonstrates production-ready Vue development with enterprise-level event management domain expertise, making it an excellent portfolio piece for event tech companies or high-end event management platforms.