`DEPLOYMENT.md`

434 lines
# OMEGA WATCHES - LUXURY EDITION DEPLOYMENT GUIDE

## Quick Start

### 1. Switch to Luxury Mode

Edit `/root/Projects/watches/src/config/luxury.config.js`:
```javascript
export const luxuryConfig = {
  enabled: true,  // Set to false for standard mode
  // ... rest of config
};
```

### 2. Build the Application

```bash
cd /root/Projects/watches
npm run build
```

### 3. Restart the Server

```bash
pm2 restart omega-watches
# or
pm2 stop omega-watches && pm2 start server.js --name omega-watches
```

### 4. Access the Application

```
http://45.61.58.125:7600
```

## Deployment Steps

### Full Deployment Process

```bash
# 1. Navigate to project
cd /root/Projects/watches

# 2. Install dependencies (if needed)
npm install

# 3. Build production bundle
npm run build

# 4. Check PM2 status
pm2 status

# 5. Restart the service
pm2 restart omega-watches

# 6. Verify deployment
pm2 logs omega-watches --lines 50

# 7. Test the application
curl -I http://45.61.58.125:7600
```

## Configuration Options

### Luxury Features Toggle

In `src/config/luxury.config.js`, you can toggle individual features:

```javascript
features: {
  heroParticles: true,        // Floating gold particles
  card3D: true,               // 3D card tilt effects
  cardParallax: true,         // Parallax layers in cards
  swipeNavigation: true,      // Touch gestures
  glassMorphism: true,        // Frosted glass effects
  backgroundEffects: true,    // Animated backgrounds
  premiumLoader: true,        // Luxury loading screen
}
```

### Animation Speed

Adjust animation speeds (in seconds):

```javascript
animations: {
  float: 6,           // Floating elements
  shimmer: 2,         // Gold shimmer effect
  pulseGlow: 3,       // Pulsing glow
  tickTock: 4,        // Watch rotation
  pageTransition: 0.6,// Page transitions
}
```

### Color Customization

Override luxury colors:

```javascript
colors: {
  gold: '#D4AF37',        // Primary luxury accent
  roseGold: '#B76E79',    // Rose gold accent
  platinum: '#E5E4E2',    // Platinum accent
  omegaRed: '#C8102E',    // Omega brand red
  omegaNavy: '#1A1A2E',   // Omega brand navy
}
```

## File Structure

```
/root/Projects/watches/
├── src/
│   ├── components/
│   │   ├── LuxuryHero.jsx          ⭐ Cinematic hero section
│   │   ├── LuxuryWatchCard.jsx     ⭐ 3D card with parallax
│   │   ├── ParallaxSection.jsx     ⭐ Scroll parallax
│   │   ├── GestureControls.jsx     ⭐ Touch/keyboard nav
│   │   ├── PremiumLoader.jsx       ⭐ Luxury loader
│   │   └── [existing components]
│   ├── config/
│   │   └── luxury.config.js        ⭐ Feature toggles
│   ├── App.jsx                     📄 Standard version
│   ├── App.luxury.jsx              ⭐ Luxury version
│   ├── index.css                   ⭐ Luxury styles
│   └── main.jsx                    🔄 Version selector
├── tailwind.config.js              ⭐ Luxury theme
├── server.js                       🚀 Backend server
├── LUXURY_FEATURES.md              📖 Feature documentation
└── DEPLOYMENT.md                   📖 This file
```

## Performance Optimization

### Build Optimizations

The build process includes:

1. **Terser Minification**: Aggressive code minification
2. **Code Splitting**: React, Charts, Animations in separate chunks
3. **CSS Optimization**: Tailwind purging unused styles
4. **Asset Optimization**: Images and fonts optimized
5. **Compression**: Brotli + Gzip for all assets

### Runtime Optimizations

1. **GPU Acceleration**: All animations use `transform` properties
2. **Lazy Loading**: Viewport-triggered animations
3. **Reduced Motion**: Respects user preferences
4. **Debounced Scroll**: 50ms debounce on scroll handlers
5. **Will-Change**: Optimized transform properties

### Cache Strategy

The service worker caches:
- Static assets: 1 year
- API responses: 5-10 minutes
- Fonts: 1 year
- Images: On-demand with fallback

## Testing

### Local Development

```bash
# Start dev server
npm run dev

# Access at http://localhost:5173
# API proxied to http://localhost:7600
```

### Production Testing

```bash
# Build and preview
npm run build
npm run preview

# Or test production build directly
cd dist
python3 -m http.server 8080
```

### Browser Testing

**Desktop**:
- Chrome DevTools: Lighthouse audit
- Firefox Developer Tools: Performance profiling
- Safari Web Inspector: Memory usage

**Mobile**:
- Chrome Remote Debugging
- iOS Safari with macOS Safari
- BrowserStack for device testing

### Performance Metrics

Run Lighthouse audit:
```bash
# Install lighthouse globally
npm install -g lighthouse

# Run audit
lighthouse http://45.61.58.125:7600 --view

# Target scores:
# Performance: 90+
# Accessibility: 95+
# Best Practices: 90+
# SEO: 95+
```

## Monitoring

### PM2 Monitoring

```bash
# View logs
pm2 logs omega-watches

# Monitor resources
pm2 monit

# Detailed info
pm2 info omega-watches

# Restart if needed
pm2 restart omega-watches

# View error logs only
pm2 logs omega-watches --err
```

### Server Health

```bash
# Check server status
curl http://45.61.58.125:7600/api/health

# Check watch data
curl http://45.61.58.125:7600/api/watches | jq

# Check statistics
curl http://45.61.58.125:7600/api/statistics | jq
```

## Troubleshooting

### Build Fails

```bash
# Clear node modules and reinstall
rm -rf node_modules package-lock.json
npm install

# Clear build cache
rm -rf dist
npm run build
```

### Server Not Starting

```bash
# Check port availability
lsof -ti:7600

# Kill existing process
lsof -ti:7600 | xargs kill -9

# Restart PM2
pm2 delete omega-watches
pm2 start server.js --name omega-watches

# Check firewall
sudo ufw status
sudo ufw allow 7600/tcp
```

### Styles Not Loading

```bash
# Rebuild Tailwind
npx tailwindcss -i ./src/index.css -o ./dist/output.css --minify

# Clear browser cache
# Hard refresh: Ctrl+Shift+R (Linux/Win) or Cmd+Shift+R (Mac)
```

### Animations Not Working

1. Check browser compatibility (Chrome 90+, Firefox 88+, Safari 14+)
2. Check console for errors
3. Verify luxury mode is enabled in config
4. Check for `prefers-reduced-motion` setting

### Missing Components

If you see "Cannot find module" errors:

```bash
# Verify all luxury components exist
ls -la src/components/Luxury*.jsx
ls -la src/components/Parallax*.jsx
ls -la src/components/Gesture*.jsx
ls -la src/components/Premium*.jsx

# Verify config file
ls -la src/config/luxury.config.js
```

## Rollback Plan

### Revert to Standard Version

```bash
# Option 1: Edit config
nano /root/Projects/watches/src/config/luxury.config.js
# Set enabled: false

# Option 2: Edit main.jsx directly
nano /root/Projects/watches/src/main.jsx
# Change: import App from './App.luxury';
# To:     import App from './App';

# Rebuild
npm run build
pm2 restart omega-watches
```

### Emergency Rollback

```bash
# Stop service
pm2 stop omega-watches

# Restore from backup (if exists)
cp -r /root/Projects/watches.backup/* /root/Projects/watches/

# Or use git if repository exists
cd /root/Projects/watches
git reset --hard HEAD
git clean -fd

# Rebuild and restart
npm install
npm run build
pm2 start server.js --name omega-watches
```

## Backup Strategy

### Create Backup Before Deployment

```bash
# Full backup
tar -czf /root/backups/watches-$(date +%Y%m%d-%H%M%S).tar.gz \
  /root/Projects/watches

# Quick backup (code only)
cp -r /root/Projects/watches /root/Projects/watches.backup
```

### Automated Backups

Add to crontab:
```bash
# Backup every day at 2 AM
0 2 * * * tar -czf /root/backups/watches-$(date +\%Y\%m\%d).tar.gz /root/Projects/watches
```

## Support & Debugging

### Enable Debug Mode

```javascript
// In luxury.config.js
export const luxuryConfig = {
  debug: true,  // Enable console logging
  // ...
};
```

### Check Bundle Size

```bash
# After build
du -sh dist/*
ls -lh dist/assets/

# Analyze bundle
npm run build -- --mode analyze
```

### Verify All Features

Open browser console and check:
```javascript
// Should log: "Running in LUXURY mode"
// Check config is loaded
import('./src/config/luxury.config.js').then(console.log)
```

## Production Checklist

- [ ] Luxury mode enabled in config
- [ ] All components created (Hero, Card, Parallax, Gesture, Loader)
- [ ] Tailwind config updated with luxury colors
- [ ] index.css includes luxury animations
- [ ] main.jsx configured for luxury mode
- [ ] Build completed successfully (`npm run build`)
- [ ] PM2 service restarted
- [ ] Server accessible at http://45.61.58.125:7600
- [ ] Lighthouse audit passed (90+ scores)
- [ ] Tested on Chrome, Firefox, Safari
- [ ] Tested on mobile devices
- [ ] Backup created before deployment
- [ ] Monitoring configured (PM2 logs)

## Version Information

- **Standard Version**: Original Omega watch tracker
- **Luxury Version**: Ultra-premium edition with 3D effects
- **Current Mode**: Configured in `luxury.config.js`
- **Server**: http://45.61.58.125:7600
- **Port**: 7600
- **PM2 Name**: omega-watches

---

**Last Updated**: 2024
**Maintained By**: Luxury UX Team
**Contact**: Server 45.61.58.125