# 🔧 TECHNICAL SPECIFICATIONS

## WEBSITE ARCHITECTURE

### Frontend Stack
- **HTML5** - Semantic structure with accessibility features
- **CSS3** - Advanced styling with Grid, Flexbox, and animations
- **JavaScript ES6+** - Modern class-based architecture
- **Progressive Enhancement** - Works without JavaScript

### Performance Features
- **Optimized Assets** - Compressed images and minified code
- **Lazy Loading** - Images load as needed
- **Preloading** - Critical resources loaded first
- **Caching** - Browser caching optimizations

### Browser Support
- **Chrome** 70+
- **Firefox** 65+
- **Safari** 12+
- **Edge** 79+
- **Mobile browsers** - iOS Safari, Chrome Mobile

## FILE STRUCTURE

```
BuilderBee-Website/
├── index.html                 (Main website file)
├── css/
│   ├── styles.css            (Main styling)
│   └── advanced-styles.css   (Advanced features)
├── js/
│   ├── main.js              (Core functionality)
│   ├── chat.js              (Chat system)
│   └── advanced-features.js (Advanced features)
├── images/
│   ├── Kitchen.JPG          (Kitchen renovation photo)
│   ├── masterbathroom.JPG   (Bathroom renovation photo)
│   └── 26-web-or-mls-DSC02766.jpg (Living room photo)
└── docs/
    ├── README.md            (Main documentation)
    ├── DEPLOYMENT-GUIDE.md  (Deployment instructions)
    └── TECHNICAL-SPECIFICATIONS.md (This file)
```

## CHAT SYSTEM CONFIGURATION

### n8n Webhook Integration
- **URL**: `https://builderbee.app.n8n.cloud/webhook/f406671e-c954-4691-b39a-66c90aa2f103/chat`
- **Method**: POST
- **Content-Type**: application/json

### Payload Structure
```json
{
  "message": "User message text",
  "sessionId": "Unique session identifier",
  "timestamp": "ISO timestamp",
  "conversationHistory": "Last 5 messages for context",
  "userAgent": "Browser information",
  "referrer": "Previous page URL",
  "currentPage": "Current page URL"
}
```

### Fallback Responses
- **Kitchen Projects**: Custom responses for kitchen renovations
- **Bathroom Projects**: Bathroom remodel information
- **Home Additions**: Addition and expansion details
- **New Construction**: Custom home building information
- **General Inquiries**: Company information and contact

## RESPONSIVE DESIGN

### Breakpoints
- **Mobile**: 320px - 768px
- **Tablet**: 768px - 1024px
- **Desktop**: 1024px - 1440px
- **Large Desktop**: 1440px+

### Mobile Optimizations
- **Touch Targets**: Minimum 44px for accessibility
- **Viewport Meta**: Proper mobile scaling
- **Touch Gestures**: Swipe and tap optimizations
- **Performance**: Optimized for mobile networks

## SEO OPTIMIZATION

### Meta Tags
- **Title Tags**: Optimized for search engines
- **Meta Descriptions**: Compelling descriptions for each page
- **Open Graph**: Social media sharing optimization
- **Twitter Cards**: Twitter sharing optimization

### Structured Data
- **Schema.org**: Business and service markup
- **Local Business**: Location and contact information
- **Reviews**: Customer testimonial markup
- **Services**: Construction service descriptions

## SECURITY FEATURES

### Input Sanitization
- **XSS Protection**: All user inputs sanitized
- **CSRF Prevention**: Secure form submissions
- **Rate Limiting**: Prevents spam and abuse

### Privacy Compliance
- **GDPR Ready**: Privacy-focused design
- **Cookie Management**: Transparent data usage
- **Data Encryption**: Secure data transmission

## ANALYTICS INTEGRATION

### Google Analytics 4
```javascript
gtag('config', 'GA_MEASUREMENT_ID');
```

### Custom Events
- **Chat Interactions**: User engagement metrics
- **Button Clicks**: Conversion tracking
- **Scroll Depth**: Content engagement
- **Time on Page**: User behavior analysis

## PERFORMANCE METRICS

### Target Performance
- **First Contentful Paint**: < 1.5s
- **Largest Contentful Paint**: < 2.5s
- **Cumulative Layout Shift**: < 0.1
- **First Input Delay**: < 100ms

### Optimization Techniques
- **Image Compression**: WebP format when supported
- **Code Minification**: Reduced file sizes
- **Resource Preloading**: Critical resources loaded first
- **Lazy Loading**: Non-critical resources loaded as needed

## ACCESSIBILITY FEATURES

### WCAG 2.1 AA Compliance
- **Keyboard Navigation**: Full keyboard accessibility
- **Screen Reader Support**: Proper ARIA labels
- **Color Contrast**: Minimum 4.5:1 ratio
- **Focus Indicators**: Clear focus states

### Semantic HTML
- **Proper Headings**: H1-H6 hierarchy
- **Landmark Roles**: Navigation, main, footer
- **Alt Text**: Descriptive image alternatives
- **Form Labels**: Proper form accessibility

## HOSTING REQUIREMENTS

### Server Requirements
- **Web Server**: Apache, Nginx, or similar
- **PHP**: Not required (static files)
- **Database**: Not required (static files)
- **SSL Certificate**: Recommended for HTTPS

### Recommended Hosting
- **Shared Hosting**: Sufficient for most needs
- **CDN**: Recommended for performance
- **Backup**: Regular file backups
- **Monitoring**: Uptime monitoring

## MAINTENANCE

### Regular Updates
- **Content Updates**: Keep project photos current
- **Security Monitoring**: Check for vulnerabilities
- **Performance Monitoring**: Track loading speeds
- **Analytics Review**: Monitor user behavior

### Backup Strategy
- **File Backups**: Weekly website file backups
- **Version Control**: Track changes over time
- **Configuration Backups**: Save customization settings
- **Recovery Plan**: Quick restoration procedures

## SUPPORT CONTACTS

### Technical Support
- **Documentation**: Comprehensive guides included
- **Code Comments**: Well-documented codebase
- **Best Practices**: Industry-standard implementation
- **Troubleshooting**: Common issue solutions

### Emergency Contacts
- **Hosting Provider**: Your web hosting support
- **Domain Registrar**: Domain management support
- **SSL Provider**: Certificate support
- **Backup Service**: Data recovery support