https://github.com/dimplektech/brews-bites-cafe
https://github.com/dimplektech/brews-bites-cafe
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/dimplektech/brews-bites-cafe
- Owner: Dimplektech
- Created: 2025-05-14T20:44:54.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-20T14:37:39.000Z (about 1 year ago)
- Last Synced: 2025-07-01T17:44:04.022Z (12 months ago)
- Language: HTML
- Size: 28.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Brews & Bites Cafe Website
## Live Demo
[Visit Brews & Bites Cafe Website](https://dimplektech.github.io/Brews-Bites-Cafe/)
## Table of Contents
- [Overview](#overview)
- [Features](#features)
- [Home Page](#home-page)
- [Menu Page](#menu-page)
- [Cart System](#cart-system)
- [Checkout Process](#checkout-process)
- [Weather-Based Drink Suggestions](#weather-based-drink-suggestions)
- [Responsive Design](#responsive-design)
- [Performance Optimizations](#performance-optimizations)
- [Technologies Used](#technologies-used)
- [Testing](#testing)
- [Project Structure](#project-structure)
- [Setup and Installation](#setup-and-installation)
- [Browser Compatibility](#browser-compatibility)
- [Future Enhancements](#future-enhancements)
- [License](#license)
- [Credits](#credits)
## Overview
Brews & Bites is a responsive, feature-rich website for a modern coffee shop and cafe. Built with HTML, CSS, and JavaScript, this project provides a complete online presence for a cafe business, featuring menu exploration, cart functionality, and a seamless checkout experience. A standout feature is the innovative weather-based drink suggestion system that uses the Open-Meteo API and browser geolocation to recommend personalized beverage choices based on local weather conditions, temperature, and time of day.
## Features
### Weather-Based Drink Suggestions
- Real-time weather detection using geolocation
- Personalized drink recommendations based on:
- Current temperature (hot/cold weather options)
- Weather conditions (rainy, sunny, cloudy, etc.)
- Time of day (morning, afternoon, evening options)
- Direct links to recommended items in the menu
- Graceful fallbacks when geolocation is unavailable
### Theme Toggle
- Dark and light mode options for user preference
- Persistent theme selection using localStorage
- Automatic color scheme adjustments for all UI elements
- Toggle button with animated sun/moon icon transition
- System preference detection for initial theme setting
### Home Page
- Responsive hero section with captivating imagery
- Featured items section highlighting special menu offerings
- Contact information with location details
- Weather-based drink recommendations
### Menu Page
- Categorized menu items (Coffee, Tea, Pastries, Sandwiches, Desserts)
- Navigation tabs for easy category switching
- Search functionality to find specific items
- Item cards with images, descriptions, and prices
- Add to cart functionality with visual confirmation
- Dark/Light mode toggle for improved user experience
### Cart System
- Real-time cart updates with localStorage persistence
- Add, increase, decrease, and remove items
- Quantity controls with dynamic price calculation
- Subtotal, tax, and total price calculations
- Empty cart handling with redirect to menu
### Checkout Process
- Customer information collection
- Payment form (simulated)
- Order summary and confirmation
- Detailed receipt generation with:
- Customer details
- Itemized purchase list
- Price breakdown
- Print receipt functionality
### Responsive Design
- Mobile-first approach
- Works on all device sizes (phones, tablets, desktops)
- Hamburger menu for mobile navigation
- Flexible layouts using CSS Grid and Flexbox
## Performance Optimizations
### Loading Speed
- **Image Optimization**: All images compressed and served in appropriate sizes for different devices
- **Responsive Images**: Multiple resolution variants for hero banners to reduce bandwidth on mobile devices
- **Lazy Loading**: Images below the fold load only when needed to improve initial page load time
- **Minified Assets**: CSS and JavaScript files minified to reduce file size
### Progressive Enhancement
- **Weather-Based Recommendations**: Falls back gracefully when geolocation is unavailable
- **Custom Font Loading**: Uses system fonts during loading to prevent text flicker
- **No-JavaScript Experience**: Core content and navigation remain functional without JavaScript
### Accessibility
- **Semantic HTML**: Properly structured content for screen readers
- **Keyboard Navigation**: Full site navigation possible using only keyboard
- **Color Contrast**: All text meets minimum contrast ratios for readability
## Technologies Used
- **HTML5**: Semantic markup for structure
- **CSS3**: Styling with variables for theming, animations, and responsive design
- **JavaScript**: Interactive features, cart functionality, form handling
- **LocalStorage API**: Client-side data persistence for cart
- **Font Awesome**: Icons for enhanced UI elements
- **Open-Meteo API**: Weather data for personalized drink suggestions
- **Geolocation API**: User location detection for weather-based features
## Testing
### ✅ HTML Validation
### ✅ CSS Validation
### ✅ JavaScript Debugging – Console logging & error fixing.
### ✅ Lighthouse Performance
Performance testing with Google Lighthouse:
### ✅ Responsive Testing- Tested on mobile, tablet, and desktop.
## 🚀 Deployment
### Deployed via GitHub Pages
The site is live at: [📌 Brews & Bites Cafe](https://dimplektech.github.io/Brews-Bites-Cafe/)
## Setup and Installation
1. Clone the repository or download the ZIP file
2. Extract the files to your desired location
3. Open `index.html` in your web browser
No server or build process is required as this is a static website.
## Future Enhancements
- User accounts and login system
- Order history tracking
- Online ordering with real payment processing
- Admin panel for menu management
- Customer reviews and ratings
- Newsletter subscription
- Expanded weather API integration with seasonal specials
## License
This project is licensed under the MIT License - see the LICENSE file for details.
## Credits
- Images: [Unsplash](https://unsplash.com)
- Icons: [Font Awesome](https://fontawesome.com)
- Fonts: Google Fonts
- Weather Data: [Open-Meteo API](https://open-meteo.com)