initial
This commit is contained in:
345
README.md
Normal file
345
README.md
Normal file
@@ -0,0 +1,345 @@
|
||||
# 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**
|
||||
```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.
|
||||
Reference in New Issue
Block a user