Skip to content

Commit 481efe7

Browse files
Davedev0Davedev0
authored
Update README.md
1 parent b733e68 commit 481efe7

1 file changed

Lines changed: 331 additions & 1 deletion

File tree

‎README.md‎

Lines changed: 331 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,331 @@
1-
# MasterBakery
1+
# 🍞 Master Baker - Filipino Bakery
2+
3+
![Master Baker](https://img.shields.io/badge/Master-Baker-gold) ![Filipino Bakery](https://img.shields.io/badge/Filipino-Bakery-orange) ![Responsive Design](https://img.shields.io/badge/Responsive-Design-green)
4+
5+
## 📋 Table of Contents
6+
- [Project Overview](#-project-overview)
7+
- [✨ Features](#-features)
8+
- [👨‍💻 Development Team](#-development-team)
9+
- [🛠️ System Architecture](#️-system-architecture)
10+
- [🚀 Installation & Setup](#-installation--setup)
11+
- [📱 System Management](#-system-management)
12+
- [🎨 Design System](#-design-system)
13+
- [🔧 Technical Implementation](#-technical-implementation)
14+
- [📞 Support](#-support)
15+
16+
## 🏢 Project Overview
17+
18+
**Master Baker** is a sophisticated e-commerce platform for an authentic Filipino bakery, showcasing traditional breads and pastries with modern web technologies. The system combines elegant design with robust functionality to deliver an exceptional user experience.
19+
20+
### 🌟 Key Highlights
21+
- **Traditional Filipino Breads**: Pandesal, Ensaymada, Pan de Coco, and more
22+
- **Modern E-commerce**: Shopping cart, user authentication, and contact forms
23+
- **Responsive Design**: Optimized for all devices
24+
- **Professional Branding**: Cohesive visual identity and user experience
25+
26+
## ✨ Features
27+
28+
### 🎯 Core Functionality
29+
| Feature | Description | Status |
30+
|---------|-------------|---------|
31+
| **Product Catalog** | Showcase 11+ traditional Filipino breads | ✅ Live |
32+
| **Shopping Cart** | Add, remove, and manage items with real-time updates | ✅ Live |
33+
| **User Authentication** | Login/Register modal system | ✅ Live |
34+
| **Contact Integration** | EmailJS-powered contact forms | ✅ Live |
35+
| **Responsive Design** | Mobile-first approach | ✅ Live |
36+
37+
### 🎨 User Experience
38+
- **Smooth Animations**: CSS transitions and keyframe animations
39+
- **Interactive Elements**: Hover effects, modal systems, and dynamic content
40+
- **Professional Typography**: Google Fonts integration (Poppins, Dancing Script)
41+
- **Visual Hierarchy**: Clear section organization and intuitive navigation
42+
43+
44+
### 🎖️ Project Lead & Web Developer
45+
**Dave Fuentes**
46+
- Role: Head Developer & System Architect
47+
- Contributions: Core architecture, JavaScript functionality, project management
48+
- Expertise: Frontend development, UX/UI design, system integration
49+
50+
### 👥 Development Team Members
51+
BORQUETA, KARL
52+
DOMINGUEZ, ANDY RAFAEL
53+
TOLEDO, CHRISTIAN DAVID
54+
55+
### 🏆 Team Philosophy
56+
Our team combines traditional Filipino baking heritage with modern web development practices, creating a digital experience that honors culinary traditions while embracing technological innovation.
57+
58+
## 🛠️ System Architecture
59+
60+
### 📁 Project Structure
61+
```
62+
MasterBakery/
63+
├── 📄 index.html # Landing/Intro page
64+
├── 🏠 home.html # Main application
65+
├── 🎨 style.css # Comprehensive styling
66+
├── ⚡ script.js # Core functionality
67+
├── 📧 emailjs-init.js # Email service integration
68+
├── 📸 assets/ # Images and media files
69+
└── 📋 README.md # Project documentation
70+
```
71+
72+
### 🔌 Technology Stack
73+
| Layer | Technology | Purpose |
74+
|-------|------------|---------|
75+
| **Frontend** | HTML5, CSS3, JavaScript | User interface and interactions |
76+
| **Styling** | CSS Grid, Flexbox, CSS Variables | Responsive layout and design system |
77+
| **Fonts** | Google Fonts (Poppins, Dancing Script) | Typography and brand identity |
78+
| **Icons** | Font Awesome 6.4.0 | UI icons and visual elements |
79+
| **Email Service** | EmailJS | Contact form functionality |
80+
| **Maps** | Google Maps Embed API | Location display |
81+
82+
## 🚀 Installation & Setup
83+
84+
### 📥 Prerequisites
85+
- Modern web browser (Chrome, Firefox, Safari, Edge)
86+
- Web server for local development (optional)
87+
- Basic understanding of HTML/CSS/JavaScript
88+
89+
### 🛠️ Local Development Setup
90+
91+
1. **Clone Repository**
92+
```bash
93+
git clone https://github.com/your-username/MasterBakery.git
94+
cd MasterBakery
95+
```
96+
97+
2. **File Structure Verification**
98+
Ensure all required files are present:
99+
- `index.html` - Landing page
100+
- `home.html` - Main application
101+
- `style.css` - Styling
102+
- `script.js` - Functionality
103+
- `emailjs-init.js` - Email services
104+
105+
3. **Local Server Setup** (Recommended)
106+
```bash
107+
# Using Python
108+
python -m http.server 8000
109+
110+
# Using Node.js
111+
npx http-server
112+
113+
# Using PHP
114+
php -S localhost:8000
115+
```
116+
117+
4. **Access Application**
118+
Open `http://localhost:8000` in your browser
119+
120+
### ⚙️ Configuration
121+
122+
#### EmailJS Setup (For Contact Forms)
123+
1. Create EmailJS account at [https://www.emailjs.com/](https://www.emailjs.com/)
124+
2. Update credentials in `emailjs-init.js`:
125+
```javascript
126+
emailjs.init("YOUR_PUBLIC_KEY");
127+
emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', formData);
128+
```
129+
130+
## 📱 System Management
131+
132+
### 🗂️ Content Management
133+
134+
#### Product Management
135+
```javascript
136+
// Adding new products - Update in home.html
137+
<div class="delight-card">
138+
<div class="delight-image-container">
139+
<img src="new_bread.jpg" alt="New Bread" class="delight-image">
140+
</div>
141+
<div class="delight-content">
142+
<h3>New Bread Name</h3>
143+
<p>Product description...</p>
144+
<div class="card-footer">
145+
<div class="price-rating">
146+
<p class="price">12.50</p>
147+
<div class="rating">
148+
<!-- Star ratings -->
149+
</div>
150+
</div>
151+
<div class="action-buttons">
152+
<button class="buy-now">Buy Now</button>
153+
<button class="add-to-cart" data-id="12" data-name="New Bread"
154+
data-price="12.50" data-image="new_bread.jpg">
155+
Add to Cart
156+
</button>
157+
</div>
158+
</div>
159+
</div>
160+
</div>
161+
```
162+
163+
#### Team Management
164+
Update team members in the About section:
165+
```html
166+
<div class="team-member">
167+
<div class="member-image" onclick="this.classList.toggle('active')">
168+
<img src="new_member.jpg" class="default-image">
169+
<img src="new_member_hover.jpg" class="hover-image">
170+
</div>
171+
<h3>New Team Member</h3>
172+
<p class="member-role">Position</p>
173+
<p>Description...</p>
174+
</div>
175+
```
176+
177+
### 🎨 Styling Management
178+
179+
#### Color System
180+
Update CSS variables in `:root`:
181+
```css
182+
:root {
183+
--gold: #e6c200;
184+
--gold-light: #f8e98c;
185+
--gold-dark: #d4b000;
186+
--charcoal: #2a2a2a;
187+
/* Add new colors as needed */
188+
}
189+
```
190+
191+
#### Responsive Breakpoints
192+
```css
193+
/* Mobile First Approach */
194+
@media (min-width: 768px) { /* Tablet */ }
195+
@media (min-width: 992px) { /* Desktop */ }
196+
@media (min-width: 1200px) { /* Large Desktop */ }
197+
```
198+
199+
### 🔧 Functional Management
200+
201+
#### Cart System
202+
The shopping cart uses localStorage-like functionality:
203+
```javascript
204+
// Cart operations
205+
addToCartButtons.forEach(button => {
206+
button.addEventListener('click', () => {
207+
// Add item to cart array
208+
// Update cart display
209+
// Persist cart state
210+
});
211+
});
212+
```
213+
214+
#### Modal Management
215+
```javascript
216+
// Opening modals
217+
userIcon.addEventListener('click', () => {
218+
loginModal.classList.add('active');
219+
});
220+
221+
// Closing modals
222+
closeModalButtons.forEach(button => {
223+
button.addEventListener('click', () => {
224+
modal.classList.remove('active');
225+
});
226+
});
227+
```
228+
229+
## 🎨 Design System
230+
231+
### 🎯 Brand Identity
232+
- **Primary Color**: Gold (#e6c200) - Represents warmth and quality
233+
- **Secondary Color**: Charcoal (#2a2a2a) - Professional and elegant
234+
- **Accent Colors**: Warm beige and cream tones
235+
- **Typography**: Poppins (body), Dancing Script (headings)
236+
237+
### 📐 Layout Principles
238+
- **Grid Systems**: CSS Grid for product layouts
239+
- **Flexbox**: Component alignment and responsive behavior
240+
- **Spacing**: Consistent padding and margin system
241+
- **Shadows**: Layered shadow system for depth
242+
243+
### 🔄 Animations & Interactions
244+
```css
245+
/* Standard transition */
246+
--transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
247+
248+
/* Hover effects */
249+
.card:hover {
250+
transform: translateY(-8px);
251+
box-shadow: var(--shadow-hover);
252+
}
253+
```
254+
255+
## 🔧 Technical Implementation
256+
257+
### 🏗️ Component Architecture
258+
259+
#### Product Cards
260+
- **Image Container**: Responsive image handling with hover effects
261+
- **Content Area**: Product information and pricing
262+
- **Action Buttons**: Buy Now and Add to Cart functionality
263+
- **Rating System**: Star-based rating display
264+
265+
#### Navigation System
266+
- **Sticky Header**: Becomes compact on scroll
267+
- **Mobile Menu**: Hamburger menu for mobile devices
268+
- **Smooth Scrolling**: Anchor link navigation
269+
270+
### 📧 Email Integration
271+
```javascript
272+
// Contact form handling
273+
document.getElementById('contact-form').addEventListener('submit', function(e) {
274+
e.preventDefault();
275+
const formData = {
276+
from_name: document.getElementById('contact-name').value,
277+
from_email: document.getElementById('contact-email').value,
278+
subject: document.getElementById('contact-subject').value,
279+
message: document.getElementById('contact-message').value
280+
};
281+
282+
emailjs.send('service_id', 'template_id', formData)
283+
.then(function(response) {
284+
alert('Message sent successfully!');
285+
});
286+
});
287+
```
288+
289+
### 🛒 E-commerce Features
290+
291+
#### Cart Management
292+
- **Add Items**: Product data attributes for easy cart addition
293+
- **Quantity Control**: Increase/decrease item quantities
294+
- **Remove Items**: Individual item removal with confirmation
295+
- **Total Calculation**: Real-time price updates
296+
297+
#### User Experience
298+
- **Instant Feedback**: Alert messages for user actions
299+
- **Confirmation Dialogs**: Important action confirmations
300+
- **Loading States**: Smooth transitions and animations
301+
302+
## 📞 Support
303+
304+
### 🐛 Issue Reporting
305+
For technical issues or feature requests, please contact:
306+
- **Dave Fuentes**: Lead Developer
307+
- **Email**: [Your contact email]
308+
- **Response Time**: 24-48 hours
309+
310+
### 📚 Documentation
311+
- This README file
312+
- Inline code comments
313+
- CSS variable documentation in style.css
314+
315+
### 🔄 Updates & Maintenance
316+
- Regular security updates
317+
- Browser compatibility testing
318+
- Performance optimization
319+
- Feature enhancements based on user feedback
320+
321+
---
322+
323+
<div align="center">
324+
325+
**🍞 Crafted with Passion, Baked with Excellence**
326+
*Master Baker - Bringing Filipino Baking Traditions to the Digital World*
327+
328+
*Last Updated: March 2025*
329+
*Version: 1.0.0*
330+
331+
</div>

0 commit comments

Comments
 (0)