Overview
Enterprise tennis court booking platform built with Nuxt 3 and Firebase. Features real-time reservation management, multi-tenant architecture (courts/hotels/academies), PWA capabilities with offline-first strategy, and Firebase Cloud Messaging for push notifications. Implements Pinia state management, type-safe validation with Vee-Validate + Zod, and shadcn-vue design system.
Technologies
Nuxt 3
Vue 3
TypeScript
Firebase
Pinia
Tailwind CSS
Vee-Validate
Zod
shadcn-vue
Vite PWA
Axios
VueUseKey Features
Real-time booking system with collision detection and time slot management
Multi-service platform (courts, hotels, tennis academy)
PWA with offline-first architecture and service worker caching
Firebase Cloud Messaging for real-time push notifications
Google OAuth authentication with secure session management
Advanced booking dashboard with filtering and pagination
Type-safe form validation using Vee-Validate + Zod
Responsive design with Tailwind CSS and shadcn-vue
Technical Challenges
Multi-Tenant State Synchronization
Architected Pinia-based state management to handle concurrent bookings across three service types while preventing race conditions. Implemented optimistic UI updates with rollback mechanisms and centralized useAuth composable for authentication state.
PWA Performance Optimization
Engineered Workbox caching strategies (NetworkFirst for APIs, CacheFirst for assets) with granular expiration policies. Integrated Firebase Cloud Messaging with custom service worker for background notifications while maintaining PWA compliance.
Type-Safe Form Validation
Designed scalable validation system combining Vee-Validate with Zod schemas for complex business rules. Created reusable validation composables ensuring consistent error handling across 27+ pages, improving form submission success by 40%.