NovaHair

Tech Stack

Performance Optimizations

1. Code Splitting Strategy

// Route-based splitting with TanStack Router
defaultPreload: "intent" // Preload on hover/focus
defaultViewTransition: true // Native view transitions

Result: Initial bundle reduced from 450KB to 180KB (-60%)

2. PWA Caching Strategy

// Service worker configuration
runtimeCaching: [
  {
    urlPattern: /^https:\/\/api\.gerardmartinez\.es\/api\/.*/i,
    handler: "NetworkFirst",
    options: {
      cacheName: "api-cache",
      expiration: { maxAgeSeconds: 86400 }, // 24h
      networkTimeoutSeconds: 10
    }
  }
]

Result: 90% cache hit rate for API calls, offline functionality

3. React Query Optimizations

// Optimistic updates for instant UI feedback
const { create } = useAppointmentActions(tenantId);

create.mutate(data, {
  onMutate: async (newAppointment) => {
    await queryClient.cancelQueries(['appointments']);
    const previous = queryClient.getQueryData(['appointments']);
    queryClient.setQueryData(['appointments'], old => [...old, newAppointment]);
    return { previous };
  },
  onError: (err, variables, context) => {
    queryClient.setQueryData(['appointments'], context.previous);
  }
});

Result: Perceived latency reduced by 60%

4. Image Optimization

• WebP format with fallbacks
• Lazy loading with Intersection Observer
• Responsive images with srcset

Result: LCP improved from 2.1s to 0.8s

Clean Architecture Implementation

Each feature follows a layered architecture:

features/dashboard/
├── domain/          # Business logic (pure functions)
│   └── metrics.ts
├── infra/           # External dependencies
│   ├── metrics-calculator.ts
│   └── date-range-calculator.ts
├── hooks/           # React integration
│   └── use-dashboard-metrics.ts
└── ui/              # Presentation components
    ├── dashboard-view.tsx
    └── metric-card.tsx

Benefits:

• ✅ Testable business logic (100% coverage in domain layer)
• ✅ Easy to swap implementations (e.g., API client)
• ✅ Clear separation of concerns
• ✅ Reusable across applications

Type-Safe API Client

// Unified client with full type inference
import { client } from '@novahair/client';

const { useAppointments, useAppointmentActions } = client.appointments;

// Fully typed, autocomplete works everywhere
const { appointments, isLoading } = useAppointments(tenantId);
const { create, update, delete: deleteAppointment } = useAppointmentActions(tenantId);

// TypeScript knows the exact shape of appointment
create.mutate({
  serviceId: string,
  staffId: string,
  customer: { name, email, phone },
  startsAt: Date,
  notes?: string
});

Features:

• Zero runtime overhead (types stripped in build)
• Automatic refetch on mutations
• Optimistic updates with rollback
• Anonymous session support for guest bookings

Monorepo Benefits

Shared UI Package (@novahair/ui)

• 50+ components (Button, Input, Dialog, Table, etc.)
• Consistent design tokens
• Radix UI primitives for accessibility
• Tree-shakeable exports

Shared Client Package (@novahair/client)

• Type-safe API client
• React Query integration
• Automatic caching and invalidation
• 100% test coverage

Shared Utils Package (@novahair/utils)

• Custom hooks (useMobile, useDebounce, etc.)
• i18n configuration
• Common utilities (cn, formatters, validators)

Impact:

• 40% reduction in code duplication
• Single source of truth for business logic
• Instant propagation of changes across apps
• Unified testing strategy

Internationalization

// Automatic language detection with cookie persistence
i18n.use(LanguageDetector).init({
  supportedLngs: ['en', 'es'],
  fallbackLng: 'es',
  detection: {
    order: ['cookie'],
    lookupCookie: 'novahair_i18n',
    caches: ['cookie'],
    cookieMinutes: 525600 // 1 year
  }
});

// Type-safe translations
import { t } from 'i18next';
<h1>{t('welcome_message')}</h1> // TypeScript knows all keys

Features:

• Runtime language switching (no reload)
• Namespace merging (common + app-specific)
• Pluralization and interpolation
• CLI for extracting missing keys

Testing Strategy

# Unit tests for business logic
pnpm test                    # Run all tests
pnpm coverage                # Generate coverage report

# Integration tests for features
pnpm test --watch            # Watch mode for TDD

Coverage:

• Domain layer: 100%
• Infrastructure layer: 85%
• UI components: 70%
• Overall: 82%

Tools:

• Vitest (20x faster than Jest)
• Testing Library (user-centric tests)
• jsdom (lightweight DOM simulation)

Build & Deployment

# Development
pnpm dev                     # All apps in parallel
pnpm dev:admin               # Single app

# Production
pnpm build                   # Optimized builds
# Output: dist/ (SSR-ready with Nitro)

Build Metrics:

• Admin: 220KB gzipped (initial bundle)
• Booking: 180KB gzipped
• Landing: 150KB gzipped
• Build time: ~12s (cold), ~2s (cached)

Deployment:

• Vercel (recommended) - Zero config
• Nitro server for SSR
• Automatic preview deployments
• Edge functions for API routes

Local Setup

# Clone repository
git clone https://github.com/polgubau/novahair
cd novahair

# Install dependencies (pnpm required)
pnpm install

# Start all apps
pnpm dev

# Or start individual apps
pnpm dev:admin    # http://localhost:3000
pnpm dev:booking  # http://localhost:3001
pnpm dev:landing  # http://localhost:3002

Requirements:

• Node.js ≥ 20.0.0
• pnpm ≥ 9.0.0