Heady Audio — E-Commerce App

Tech Stack

Frontend

• React 18 - UI library (loaded via native browser ES Modules & Import Maps)
• htm - JSX-like template syntax running natively in the browser without build tools
• Tailwind CSS - Utility-first CSS compiled via official zero-dependency standalone CLI
• HTML5 & Vanilla JS (ES6+) - Pure web standards without bundlers

Backend & Database

• Supabase - PostgreSQL database, Authentication, and Storage (connected via JS ESM Client)

Build & Tooling (Zero npm / Zero Node.js)

• Tailwind Standalone CLI - Single executable binary for CSS compilation
• Python HTTP Server / VS Code Live Server - Lightweight local development server
• Git - Version control

---

Getting Started

Prerequisites

• A modern web browser supporting ES Modules and Import Maps (Chrome, Edge, Safari, Firefox)
• Python 3 OR VS Code with the "Live Server" extension (no Node.js or npm required)

Setup & Local Development

1. Clone the repository

   git clone [https://github.com/your-username/heady-audio-store.git](https://github.com/your-username/heady-audio-store.git)
   cd heady-audio-store
   

2. Download the Tailwind Standalone Executable

   • Download the executable for your OS from Tailwind CSS Releases.
   • Place the file in the bin/ directory and rename it to tailwindcss (or tailwindcss.exe on Windows).

3. Configure Environment Variables

   Update src/services/supabaseClient.js with your Supabase Project URL and Anon API key:

   const SUPABASE_URL = '[https://your-supabase-url.supabase.co](https://your-supabase-url.supabase.co)';
   const SUPABASE_ANON_KEY = 'your-anon-key';

4. Start the Tailwind CSS Watcher

   Run the standalone executable in your terminal to automatically build changes in css/input.css:

   Windows (PowerShell)

   .\bin\tailwindcss.exe -i .\css\input.css -o .\css\output.css --watch

   macOS / Linux

   ./bin/tailwindcss -i ./css/input.css -o ./css/output.css --watch

5. Run the Application

   Open a second terminal window in the root directory and start a local HTTP server:

   python -m http.server 8000

   Open [http://localhost:8000] in your browser.

Project Structure

heady-audio-store/
├── bin/                          # Standalone CLI executables (No Node/npm)
│   └── tailwindcss               # Official Tailwind CSS Standalone Binary
│
├── css/                          # Application Stylesheets
│   ├── input.css                 # Source CSS directives (@import "tailwindcss";)
│   └── output.css                # Compiled CSS output generated by Tailwind binary
│
├── src/                          # Application Source Code (Native ES Modules)
│   ├── assets/                   # Static assets (images, logos, icons)
│   │
│   ├── components/               # Reusable React components (written with 'htm')
│   │   ├── ui/                   # Generic elements (Button.js, Modal.js, Badge.js, Input.js)
│   │   ├── customer/             # Customer UI (ProductCard.js, CartItem.js, Banner.js)
│   │   └── admin/                # Admin UI (StatCard.js, DataTable.js, StatusBadge.js)
│   │
│   ├── layouts/                  # Interface Layouts
│   │   ├── CustomerLayout.js     # Storefront navigation menu and footer
│   │   └── AdminLayout.js        # Admin dashboard sidebar and header
│   │
│   ├── pages/                    # React Page Views
│   │   ├── customer/             # Customer Storefront Pages
│   │   │   ├── Home.js
│   │   │   ├── ProductList.js
│   │   │   ├── ProductDetails.js
│   │   │   ├── Cart.js
│   │   │   └── Checkout.js
│   │   │
│   │   └── admin/                # Admin Dashboard Pages
│   │       ├── Login.js
│   │       ├── Dashboard.js
│   │       ├── Products.js
│   │       ├── Categories.js
│   │       ├── Orders.js
│   │       ├── OrderDetails.js
│   │       └── Customers.js
│   │
│   ├── context/                  # Global State Management (React Context via CDN)
│   │   ├── CartContext.js        # Shopping Cart state & LocalStorage sync
│   │   └── AuthContext.js        # Supabase Admin session state
│   │
│   ├── services/                 # Supabase API Integration
│   │   ├── supabaseClient.js     # Supabase client (imported via ESM CDN)
│   │   ├── productApi.js         # Queries for fetching/mutating products & categories
│   │   └── orderApi.js           # Queries for submitting and updating orders
│   │
│   ├── utils/                    # Helper Functions & Constants
│   │   ├── formatters.js         # e.g., formatCurrency(), formatDate()
│   │   └── constants.js          # e.g., ORDER_STATUSES, PRODUCT_STATUSES
│   │
│   └── App.js                    # Main React root component and page router
│
├── index.html                    # Root HTML document with browser Import Map
└── README.md                     # Documentation

License

Copyright (c) 2026 Heady