# Sweet Dreams Bakery - E-Commerce Website

A professional, fully-featured bakery e-commerce website built with pure HTML, CSS, and JavaScript. Features CSV-based product management, EmailJS integration for order processing, and a complete shopping cart system.

![Sweet Dreams Bakery](images/hero-cake.jpg)

## 🌟 Features

### **Frontend-Only Architecture**
- Pure HTML5, CSS3, and JavaScript (ES6+)
- No backend required - runs entirely in the browser
- CSV-based product inventory for easy management
- EmailJS integration for professional order processing
- Local storage for cart persistence

### **E-Commerce Functionality**
- ✅ Dynamic product catalog loaded from CSV
- ✅ Advanced product filtering and search
- ✅ Shopping cart with quantity management
- ✅ Professional checkout process
- ✅ Email order confirmation system
- ✅ Stock quantity tracking
- ✅ Custom product options support

### **Professional Design**
- ✅ Bakery-themed color palette and typography
- ✅ Responsive design (mobile-first approach)
- ✅ Smooth animations and transitions
- ✅ Professional product photography integration
- ✅ Accessible and SEO-friendly structure

### **Business Features**
- ✅ Custom cake consultation forms
- ✅ Wedding cake specialization
- ✅ Dietary options support (gluten-free, vegan)
- ✅ Event date scheduling
- ✅ Pickup and delivery options
- ✅ Baker portfolio and process showcase

## 🚀 Quick Start

### **1. Download and Setup**
```bash
# Clone or download the repository
git clone <repository-url> sweet-dreams-bakery
cd sweet-dreams-bakery

# Or simply download and extract the ZIP file
```

### **2. Configure EmailJS (Optional)**
1. Follow the detailed guide in [`EMAILJS_SETUP.md`](EMAILJS_SETUP.md)
2. Update the configuration in `script.js`:
   ```javascript
   const emailJSConfig = {
       serviceID: 'your_service_id',
       templateID: 'your_template_id', 
       userID: 'your_user_id'
   };
   ```

### **3. Start Local Server**
Choose one of these methods to run the website locally:

**Option A: Python HTTP Server**
```bash
# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

# Then visit: http://localhost:8000
```

**Option B: Node.js HTTP Server**
```bash
# Install http-server globally
npm install -g http-server

# Run server
http-server -p 8000

# Then visit: http://localhost:8000
```

**Option C: VS Code Live Server**
1. Install "Live Server" extension in VS Code
2. Right-click `index.html` → "Open with Live Server"

## 📁 Project Structure

```
sweet-dreams-bakery/
├── index.html              # Main website file
├── styles.css              # Complete responsive styling
├── script.js               # All interactive functionality
├── cake_inventory.csv      # Product database (20 sample cakes)
├── images/                 # Product images directory
│   ├── hero-cake.jpg       # Main hero image
│   ├── baker-portrait.jpg  # About section image
│   ├── gallery-*.jpg       # Portfolio gallery images
│   └── product-*.jpg       # Individual product images
├── README.md               # This file
├── EMAILJS_SETUP.md        # EmailJS configuration guide
├── EMAILJS_TEMPLATES.md    # Email template code
└── sw.js                   # Service worker (optional)
```

## 🛍️ Product Management

### **Adding New Products**
Edit `cake_inventory.csv` with the following columns:

| Column | Description | Example |
|--------|-------------|---------|
| `id` | Unique product ID | `21` |
| `name` | Product name | `"Summer Berry Tart"` |
| `description` | Product description | `"Fresh seasonal berries..."` |
| `price` | Price in dollars | `45.99` |
| `category` | Product category | `"Specialty Desserts"` |
| `size_inches` | Cake diameter | `8` |
| `serves_people` | Number of servings | `10` |
| `weight_kg` | Weight in kilograms | `1.5` |
| `flavor` | Primary flavor | `"Mixed Berry"` |
| `image_url` | Image path/URL | `"images/berry-tart.jpg"` |
| `image_alt` | Alt text for accessibility | `"Fresh berry tart with cream"` |
| `stock_quantity` | Available quantity | `5` |
| `featured` | Featured product flag | `true/false` |
| `custom_available` | Custom orders available | `true/false` |
| `dietary_options` | Special dietary info | `"gluten-free available"` |
| `baker_name` | Baker who creates it | `"Sarah Mitchell"` |
| `date_created` | Creation date | `"2024-01-15"` |
| `sku` | Stock keeping unit | `"BERRY-TART-021"` |
| `occasion_type` | Suitable occasions | `"summer, birthday"` |

### **Product Categories**
- Wedding Cakes
- Birthday Cakes  
- Celebration Cakes
- Cupcakes & Minis
- Specialty Desserts
- Seasonal Items

### **Image Requirements**
- **Recommended size**: 1000x1000px minimum
- **Format**: JPG, PNG, or WebP
- **Aspect ratio**: Square (1:1) preferred
- **File naming**: Descriptive names (e.g., `chocolate-wedding-cake.jpg`)
- **Alt text**: Always include descriptive alt text for accessibility

## ⚙️ Configuration

### **EmailJS Configuration**
See [`EMAILJS_SETUP.md`](EMAILJS_SETUP.md) for detailed setup instructions.

### **Color Customization**
Update CSS variables in `styles.css`:
```css
:root {
  --color-primary: #F4B8C3;        /* Soft pink frosting */
  --color-secondary: #FFF5E6;      /* Cream/vanilla */
  --color-accent: #8B4B73;         /* Rich berry */
  --color-chocolate: #4A2C2A;      /* Dark chocolate */
  /* ... more variables */
}
```

### **Typography Customization**
Change fonts by updating the Google Fonts import in `index.html`:
```html
<link href="https://fonts.googleapis.com/css2?family=YourFont:wght@400;500;600;700&display=swap" rel="stylesheet">
```

## 🎨 Customization Guide

### **Branding**
1. **Logo**: Replace the cake icon in the header with your logo
2. **Business Name**: Update "Sweet Dreams Bakery" throughout the site
3. **Contact Information**: Update phone, email, and address in the contact section
4. **Social Media**: Add your social media links in the footer

### **Content**
1. **About Section**: Replace baker information and story
2. **Hero Message**: Update the main headline and description
3. **Process Steps**: Customize the 4-step process description
4. **Gallery Images**: Add photos of your actual work

### **Functionality**
1. **Payment Processing**: The system uses a "pay later" approach - collect orders first, then arrange payment
2. **Delivery Areas**: Customize delivery options in the checkout form
3. **Lead Times**: Adjust minimum order advance notice requirements
4. **Business Hours**: Update operating hours in the contact section

## 📱 Responsive Design

The website is fully responsive with breakpoints at:
- **Mobile**: 480px and below
- **Tablet**: 768px and below  
- **Desktop**: 1024px and above
- **Large screens**: 1200px and above

## 🔧 Browser Compatibility

**Supported Browsers:**
- Chrome 60+ ✅
- Firefox 55+ ✅
- Safari 12+ ✅
- Edge 79+ ✅

**Required Features:**
- CSS Grid and Flexbox
- JavaScript ES6+ (arrow functions, async/await)
- Local Storage API
- Fetch API

## 🚀 Deployment Options

### **Static Hosting Services**
Perfect for this frontend-only website:

**Netlify (Recommended)**
1. Drag and drop your project folder to [netlify.com](https://netlify.com)
2. Automatic HTTPS and CDN included
3. Custom domain support available

**Vercel**
1. Sign up at [vercel.com](https://vercel.com)
2. Import from Git or upload files
3. Instant deployment with preview URLs

**GitHub Pages**
1. Create a GitHub repository
2. Enable GitHub Pages in repository settings
3. Upload your files to the repository

### **Traditional Web Hosting**
Upload all files to your web hosting provider's public directory (usually `public_html` or `www`).

## 🛡️ Security & Privacy

### **Data Handling**
- All form data is processed client-side
- Cart data stored in browser's local storage
- No personal data stored on servers
- EmailJS handles email transmission securely

### **HTTPS Requirements**
- Required for production deployment
- Most static hosting services provide this automatically
- Necessary for some browser features to work properly

## 🐛 Troubleshooting

### **Products Not Loading**
1. Check browser console for errors
2. Ensure `cake_inventory.csv` is in the root directory
3. Verify CSV format matches expected columns
4. Check file permissions and CORS settings

### **EmailJS Not Working**
1. Verify EmailJS configuration in `script.js`
2. Check EmailJS dashboard for service status
3. Ensure email templates are properly configured
4. Review browser console for API errors

### **Images Not Displaying**
1. Check image file paths in CSV
2. Verify images exist in the `images/` directory
3. Ensure proper file extensions (.jpg, .png, .webp)
4. Check browser console for 404 errors

### **Cart Not Persisting**
1. Ensure local storage is enabled in browser
2. Check for JavaScript errors in console
3. Verify domain consistency (don't mix http/https)

## 📈 Performance Optimization

### **Image Optimization**
1. Compress images before uploading
2. Use appropriate formats (WebP when supported)
3. Implement lazy loading (already included)
4. Consider using a CDN for images

### **Code Optimization**
1. Minify CSS and JavaScript for production
2. Enable gzip compression on server
3. Use browser caching headers
4. Consider implementing a service worker

## 🔄 Updates & Maintenance

### **Regular Tasks**
1. **Update Product Inventory**: Modify `cake_inventory.csv` as needed
2. **Add New Images**: Upload to `images/` directory
3. **Update Content**: Modify HTML content for seasonal changes
4. **Monitor Orders**: Check EmailJS dashboard regularly

### **Seasonal Updates**
1. Update featured products for holidays
2. Add seasonal items to inventory
3. Update hero images for special occasions
4. Modify color scheme for seasonal themes

## 📧 Email Templates

See [`EMAILJS_TEMPLATES.md`](EMAILJS_TEMPLATES.md) for:
- Customer order confirmation template
- Business notification template  
- Newsletter subscription template
- Contact form auto-reply template

## 🤝 Support & Contribution

### **Getting Help**
1. Check this README first
2. Review browser console for errors
3. Verify EmailJS configuration
4. Check CSV file format

### **Feature Requests**
This is a complete, production-ready bakery website. Common customization requests:
- Online payment integration
- Inventory management system
- Customer account system
- Advanced booking calendar

## 📄 License

This project is provided as-is for educational and commercial use. You may modify and distribute it according to your needs.

## 🎯 Credits

- **Design**: Custom bakery-themed design system
- **Icons**: Font Awesome 6.4.0
- **Fonts**: Google Fonts (Playfair Display + Inter)
- **Images**: Unsplash (placeholder images)
- **Email Service**: EmailJS

---

**Made with ❤️ for Sweet Dreams Bakery**

For questions or support, please refer to the documentation files included in this project.