A modern, fully dynamic website for Mystic, a coffee farmer who grows and sells artisan coffee. Built with HTML5, CSS3, JavaScript, Node.js, Express, and SQLite.
coffee/
├── index.html # Home page
├── server.js # Backend server (Express.js)
├── package.json # Dependencies
├── products.json # Product data
├── database.js # Database initialization
├── README.md # Documentation
│
├── css/
│ └── styles.css # All styles (CSS3)
│
├── js/
│ └── script.js # Frontend JavaScript (ES6+)
│
├── pages/
│ ├── about.html # About page
│ ├── shop.html # Products listing
│ ├── product.html # Product detail
│ ├── cart.html # Shopping cart
│ ├── checkout.html # Checkout page
│ └── contact.html # Contact page
│
└── assets/ # Images and assets
# Install dependencies
npm install
# Start the server
npm start
# Open in browser
# http://localhost:3000| Page | File | Description |
|---|---|---|
| Home | index.html |
Landing page with hero, products, testimonials |
| About | pages/about.html |
Story, values, journey timeline |
| Shop | pages/shop.html |
Product listing with filters |
| Product | pages/product.html |
Single product view |
| Cart | pages/cart.html |
Shopping cart |
| Checkout | pages/checkout.html |
Order form |
| Contact | pages/contact.html |
Contact form with FAQ |
- Dark/Light Mode Toggle - 🌙/☀️ button in navigation
- Responsive Design - Works on all devices
- Shopping Cart - Add/remove items, quantity controls
- Product Filters - Filter by category and roast level
- Toast Notifications - Real-time feedback
- Smooth Animations - Scroll reveal, hover effects
- RESTful API - Complete CRUD operations
- SQLite Database - Persistent data storage
- Newsletter - Subscribe/unsubscribe
- Contact Form - Message submission
- Reviews - Customer reviews
- Statistics - Real-time stats
| Color | Light Mode | Dark Mode |
|---|---|---|
| Primary | #2D1810 | #E8D5C4 |
| Secondary | #C4956A | #D4A882 |
| Background | #FAF7F2 | #0F0D0B |
| Text | #2D1810 | #E8DFD8 |
| Device | Min Width |
|---|---|
| Mobile | - |
| Tablet | 768px |
| Desktop | 1024px |
| Large | 1400px |
| XL | 1920px |
- HTML5 - Semantic markup
- CSS3 - Custom properties, Flexbox, Grid, Animations
- JavaScript - Vanilla JS, async/await, localStorage
- Node.js - JavaScript runtime
- Express.js - Web framework
- SQLite - Database (better-sqlite3)
© 2024 Mystic Coffee. All rights reserved.
Made with ☕ and ❤️