Skip to main content

Curie Destination Site

The Curie Destination Site is a modern React-based e-commerce platform that allows users to browse and purchase shoes through stunning 3D visualizations. Built with cutting-edge web technologies, it provides an immersive shopping experience that bridges the gap between online and physical retail.

Overview​

The destination site serves as the primary consumer-facing application of the Curie ecosystem, offering:

  • 3D Product Visualization: Interactive 3D models with realistic materials and lighting
  • WebXR/VR Support: Full immersive experiences for Meta Quest and other VR devices
  • Cross-Platform Compatibility: Seamless experiences across desktop, mobile, and VR headsets
  • Real-Time Shopping Cart: Synchronized cart state with live updates
  • Affiliate Integration: Direct purchasing through trusted retail partners

Architecture​

Technology Stack​

Frontend Framework

  • React 18 with TypeScript for type safety and modern development
  • Vite for fast builds and excellent developer experience
  • Redux Toolkit for predictable state management

3D Rendering & Visualization

  • @google/model-viewer for WebXR-enabled 3D product display
  • Three.js integration for custom 3D interactions
  • WebXR APIs for VR/AR experiences on compatible devices

UI & Styling

  • Tailwind CSS for responsive, utility-first styling
  • Material-UI (MUI) components for consistent design system
  • Framer Motion for smooth animations and transitions

Performance & Features

  • React Helmet for dynamic SEO optimization
  • React GA4 and Microsoft Clarity for analytics
  • Service Worker support for offline capabilities

Key Features​

3D Product Experience​

  • Model Viewer Integration: High-quality 3D models with WebXR support
  • Interactive Controls: Zoom, rotate, and examine products from all angles
  • Realistic Materials: Proper lighting and material properties for authentic visualization
  • VR Mode: Immersive product examination in virtual reality

Shopping Functionality​

  • Product Catalog: Browse extensive shoe collections with filtering and search
  • Dynamic Pricing: Real-time pricing from multiple retail partners
  • Affiliate Links: Direct purchasing through trusted marketplace partners
  • Shopping Cart: Persistent cart state with item management

User Experience​

  • Responsive Design: Optimized for all screen sizes and devices
  • Progressive Web App: App-like experience with offline support
  • Accessibility: WCAG-compliant design for inclusive user experience
  • Performance: Optimized loading with lazy loading and code splitting

Project Structure​

curie-destination-site/
├── src/
│   ├── components/          # React components
│   │   ├── ProductPage.tsx  # Main product display
│   │   ├── NavBar.tsx       # Navigation components
│   │   ├── Cart.tsx         # Shopping cart functionality
│   │   └── SEO.tsx          # Search engine optimization
│   ├── redux/               # State management
│   │   ├── store.ts         # Redux store configuration
│   │   ├── productsSlice.ts # Product data management
│   │   └── selectors.ts     # Data selectors
│   ├── utils/               # Utility functions
│   │   ├── analytics.ts     # Google Analytics & Clarity
│   │   └── cookieConsent.ts # GDPR compliance
│   └── assets/              # Static assets
│       ├── models/          # 3D models (GLB/USDZ)
│       └── images/          # Product images
├── public/                  # Public static files
│   ├── manifest.webmanifest # PWA manifest
│   ├── robots.txt          # SEO configuration
│   └── sitemap.xml         # Site structure
└── styles/                  # Global styles and themes

Development Setup​

Prerequisites​

  • Node.js ≥18.0.0
  • npm or pnpm package manager
  • Git for version control

Quick Start​

  1. Clone the repository

    git clone https://github.com/curievision/curie-destination-site.git
    cd curie/curie-destination-site

  2. Install dependencies

    npm install
    # or
    pnpm install

  3. Start development server

    npm run dev
    # or
    pnpm dev

  4. Open in browser Navigate to http://localhost:3000 to see the application

Environment Variables​

The application supports different environment configurations:

# .env.local
VITE_API_BASE_URL=https://api.curie.app
VITE_ANALYTICS_ID=your-ga4-id
VITE_CLARITY_ID=your-clarity-id

Build for Production​

# Create optimized production build
npm run build

# Preview production build locally
npm run preview

Key Components​

ProductPage Component​

The main product display component that handles:

  • 3D model loading and rendering
  • Product information display
  • Price comparison across retailers
  • Add to cart functionality
  • WebXR/VR mode activation
// Example usage
<ProductPage 
  productId={productId}
  enableVR={true}
  showPriceComparison={true}
/>

3D Model Viewer​

Integration with Google's model-viewer for WebXR-enabled 3D display:

<model-viewer
  src={modelUrl}
  ar
  ar-modes="webxr scene-viewer quick-look"
  camera-controls
  environment-image="neutral"
  poster={posterUrl}
  shadow-intensity="1"
/>

Shopping Cart System​

Redux-based cart management with persistence:

// Cart state structure
interface CartState {
  items: CartItem[];
  totalPrice: number;
  isOpen: boolean;
  lastUpdated: string;
}

Deployment​

Production Deployment​

The application is deployed using modern CI/CD practices:

  1. Build Process: Vite creates optimized bundles with tree shaking
  2. Asset Optimization: Images and 3D models are compressed and CDN-delivered
  3. Progressive Enhancement: Core functionality works without JavaScript
  4. Monitoring: Real-time performance monitoring with analytics

CDN & Performance​

  • CloudFront for global content delivery
  • WebP/AVIF images for optimal loading
  • Resource hints for critical resource preloading
  • Service Worker for offline-first experience

SEO & Analytics​

Search Engine Optimization​

  • Dynamic meta tags for each product page
  • Structured data with JSON-LD schema
  • Sitemap generation for search engine discovery
  • Open Graph and Twitter Card support

Analytics Integration​

// Google Analytics 4 tracking
trackEvent('product_view', {
  product_id: productId,
  product_name: productName,
  product_category: 'footwear'
});

// Microsoft Clarity heatmaps
clarity.track('product_interaction', {
  type: '3d_rotation',
  duration: interactionTime
});

Browser Compatibility​

Supported Browsers​

  • Chrome 90+ (full WebXR support)
  • Firefox 85+ (3D viewing only)
  • Safari 14+ (iOS AR Quick Look)
  • Edge 90+ (full feature support)

Progressive Enhancement​

  • Core functionality works in all browsers
  • 3D features gracefully degrade to 2D images
  • WebXR/VR requires compatible hardware and browsers

API Integration​

The destination site integrates with the Curie Shopping API for:

Product Data​

// Fetch product catalog
GET /api/products?category=shoes&limit=50

// Get product details
GET /api/products/{id}

// Related products
GET /api/products/{id}/related

3D Models​

// 3D model metadata
interface Product3DModel {
  modelUrl: string;        // GLB/GLTF model file
  posterUrl: string;       // Preview image
  hasProductionModel: boolean;
  vrSupported: boolean;
}

Performance Considerations​

Loading Optimization​

  • Lazy loading for 3D models and non-critical assets
  • Code splitting at route and component levels
  • Prefetching for likely user interactions
  • Progressive image loading with blur placeholders

3D Model Optimization​

  • GLB compression for smaller file sizes
  • Level of detail (LOD) for different viewing distances
  • Texture optimization with appropriate resolutions
  • Culling for off-screen models

Security & Privacy​

Data Protection​

  • GDPR compliance with cookie consent management
  • No personal data storage without user consent
  • Secure HTTPS connections for all communications
  • Content Security Policy headers for XSS protection

Analytics Privacy​

  • Opt-in analytics with clear user consent
  • Data anonymization for user behavior tracking
  • Cookie-less tracking options where available

Testing​

Test Coverage​

  • Unit tests for React components with Jest
  • Integration tests for Redux state management
  • E2E tests for critical user flows with Playwright
  • Visual regression tests for UI consistency

3D Feature Testing​

  • WebXR compatibility testing across devices
  • Model loading performance and error handling
  • Cross-browser 3D rendering validation

Contributing​

Development Workflow​

  1. Create feature branch from main
  2. Follow TypeScript and React best practices
  3. Add tests for new functionality
  4. Update documentation as needed
  5. Submit pull request with clear description

Code Standards​

  • TypeScript for type safety
  • ESLint and Prettier for code formatting
  • Conventional commits for clear git history
  • Component documentation with Storybook

Ready to start developing? Explore the API Documentation to integrate with the Curie backend services.