Hazel and Loom

A lightweight, mobile-friendly e-commerce MVP that lets users browse products, manage their cart, and complete a simple checkout—all built with clean HTML, CSS, and JavaScript.

Tech Stack

• HTML5
• CSS3 (with CSS variables and media queries)
• Vanilla JavaScript (ES6)

MVP Goal

Build a responsive e-commerce MVP with:

• Shop Page (product listing, add to cart)
• Cart Page (view, update, remove items)
• Checkout Page (simple form – no real payments)

Features

• Responsive design using Flexbox/Grid
• Dynamic cart functionality (add/remove items)
• Clean, accessible HTML structure
• Reusable product card components
• Placeholder checkout form

Project Structure

• index.html
  Main entry point of the site (Shop, Cart, and Checkout functionality handled here)

• css/styles.css
  Central stylesheet that defines the global styles and design system (colors, typography, layout)

• js/scripts.js
  JavaScript file handling cart state, DOM manipulation, and user interactivity

• assets/icons/
  Folder containing SVG icons such as cart, search, etc.

• assets/images/
  Folder for product images and UI visuals (JPG, PNG, or WebP formats)

• README.md
  Project overview, features, setup instructions, and documentation

Getting Started

1. Clone the repository

   git clone <https://github.com/hello-rain/hazel-and-loom>

2. Open index.html in your browser

3. No build tools or server setup needed

Future Enhancements

• Integrate payment API
• Add product filters and categories
• User login and saved cart

License

MIT – Free to use and modify