Skip to main content

​
Runtime Dependencies

LayerTechnologyVersionPurpose
FrameworkReact18.3.1Declarative UI with hooks and concurrent features
LanguageTypeScript~5.6.2Static typing across the entire codebase
BundlerVite^6.0.5Dev server with HMR + optimized production builds
StylesTailwind CSS^3.4.17Utility-first CSS with custom theme extensions
Server StateTanStack React Query^5.17.0Data fetching, caching, mutations, and background sync
Client StateZustand^5.0.11Lightweight global stores for cart and notifications
Backend / DBSupabase JS^2.39.0PostgreSQL client, Auth, Storage, and Realtime
RoutingReact Router DOM^6.22.0Client-side SPA routing
IconsLucide React^0.574.0SVG icon library with tree-shaking
SEOreact-helmet-async^2.0.5Dynamic <head> meta tags per page
Toastsreact-hot-toast^2.4.1Lightweight toast notification system
Monitoring@sentry/react^10.39.0Error tracking, tracing, and session replays
AnalyticsGoogle Analytics 4—E-commerce event tracking (view_item, add_to_cart, etc.)
Confetticanvas-confetti^1.9.4Celebration animations (loyalty milestones)
CSS Utilsclsx^2.1.0Conditional class name composition
HostingCloudflare Pages—Global CDN deployment
FontInter (Google Fonts)300–800Primary typeface

​
Dev Dependencies

PackagePurpose
@vitejs/plugin-reactBabel-based JSX transform for Vite
autoprefixer + postcssPostCSS pipeline for Tailwind
sharpBuild-time image optimization
eslint + typescript-eslintLinting with TypeScript-aware rules
dotenvLoads .env in Node scripts (e.g., sitemap generator)

​
Vite Build Configuration

vite.config.ts configures the build pipeline: 
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    port: 5173,
  },
  resolve: {
    alias: { '@': path.resolve(__dirname, './src') },
  },
  build: {
    sourcemap: 'hidden',   // Generates .map files for Sentry; browser never downloads them
    target: 'es2020',
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,    // Strips console.log in production
        drop_debugger: true,
      },
    },
  },
})

​
Key Build Options

OptionValueEffect
sourcemap'hidden'Maps uploaded to Sentry; not served to end users
target'es2020'Modern JS output; no IE11 support
minify'terser'Smaller bundles than esbuild default
drop_consoletrueRemoves all console.* calls from production builds

​
Path Alias

The @ alias maps to ./src, enabling clean absolute imports throughout the codebase: 
// vite.config.ts
resolve: {
  alias: { '@': path.resolve(__dirname, './src') },
}
Usage in source files: 
import { supabase } from '@/lib/supabase';
import type { Product } from '@/types/product';
import { useCartStore } from '@/stores/cart.store';
tsconfig.json must mirror this alias for the TypeScript language server: 
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

​
TypeScript Configuration

The project targets TypeScript ~5.6.2 with strict settings. Key conventions:
  • Codebase written in English (variable names, comments, service functions)
  • UI text and user-facing messages in Spanish (es-MX)
  • Components exported as named exports (e.g., export function ProductCard())
  • Services are plain exported async functions — no classes
  • Hooks are thin React Query wrappers over services
Run npm run typecheck (tsc --noEmit) to validate types without emitting files.

​
ESLint Configuration

Linting is configured in eslint.config.js using the flat config format with typescript-eslint. Run: 
npm run lint         # Check only
npm run lint:fix     # Auto-fix where possible

​
Tailwind Theme Extensions

tailwind.config.js extends the default theme with:
  • Custom color scales: vape-50 → vape-900 (blue), herbal-50 → herbal-900 (green)
  • Semantic tokens: bg-theme-primary, bg-theme-secondary, bg-theme-tertiary, text-theme-primary, text-theme-secondary, border-theme, bg-accent-primary, text-accent-primary
  • CSS variable bridge: Colors are defined as RGB channel triplets in index.css (:root for dark, .light for light mode) and consumed by Tailwind via rgb(var(--token) / <alpha>) syntax
  • 9 custom animations: fade-in, slide-up, slide-down, scale-in, shimmer, pulse-glow, float, aurora, spotlight, border-beam

Build docs developers (and LLMs) love

Get started for freeTalk to us