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.

🌟 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

# 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
2. Update the configuration in script.js:

   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

# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

# Then visit: http://localhost:8000

Option B: Node.js HTTP Server

# 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 for detailed setup instructions.

Color Customization

Update CSS variables in styles.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:

<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
2. Automatic HTTPS and CDN included
3. Custom domain support available

Vercel

1. Sign up at 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 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.