# FlameOfDesire website — setup guide

A mobile-friendly, premium candle catalogue for **FlameOfDesire · Handcrafted Candles by Ranu**. Customers do not need accounts and there is no cart or online checkout. Orders open in WhatsApp at **+91 97722 01705**.

## What is included

- Premium cream, beige and gold website design.
- Catalogue with 20 starter candle listings and product photography extracted from the supplied catalogue PDF.
- Search and dynamically managed category filters; add, rename, reorder and safely delete categories from the admin dashboard.
- Individual shareable product pages (`product.html?slug=...`).
- Colour/variant selection, quantity, customisation notes and prefilled WhatsApp order message.
- Private admin dashboard (`admin.html`) for adding, editing and deleting products, uploading photos, setting fixed prices, individual variant prices, price ranges and availability.
- Supabase database/auth/storage setup SQL.

## Important before launch

The starter prices below were copied from the supplied PDF and may have changed. Check every price, colour name, availability and product image before publishing. Some starter variants are only placeholders based on the catalogue photos. Upload a separate, accurate photo for every colour/design when you have it.

The public website works as a static preview immediately. The dashboard needs the one-time Supabase setup below before edits can be published to every visitor. Do not put a Supabase `service_role` key in this website.

## Part 1 — Preview it on your computer

1. Extract the ZIP file into a folder such as `Desktop\flameofdesire-website`.
2. Install Visual Studio Code if you do not already have it.
3. In VS Code, open the extracted `flameofdesire-website` folder.
4. Open a terminal in that folder and run:

   ```bash
   python -m http.server 8000
   ```

   If `python` does not work on Windows, try `py -m http.server 8000`.
5. Open `http://localhost:8000` in your browser. Stop the local server with `Ctrl+C` in the terminal.

Do not open `index.html` by double-clicking it; the local web server avoids browser restrictions.

## Part 2 — Create the product database and private admin login

### A. Create a Supabase project

1. Go to [supabase.com](https://supabase.com/) and create an account/project.
2. Choose a project name such as `flameofdesire-catalogue`, set a strong database password, and keep it private.
3. In the project dashboard, open **SQL Editor**.
4. Open the included `supabase-setup.sql` file, copy all its contents, paste it into SQL Editor and click **Run**. This creates the product table, security rules and public product-photo bucket. If your database is already set up, do not rerun the full setup just for pricing or categories; run the relevant migration files below instead.
5. Open **Project Settings → API** (or the project's API/connect page). Copy the **Project URL** and the browser-safe **anon/public** or **publishable** key.
6. Open `supabase-config.js` in the website folder and fill in the two empty strings, for example:

   ```js
   window.SUPABASE_URL = 'https://YOUR-PROJECT.supabase.co';
   window.SUPABASE_ANON_KEY = 'YOUR_PUBLIC_ANON_OR_PUBLISHABLE_KEY';
   ```

   Do not paste a `service_role`, secret, or database password into this file.

### B. Create the admin user

1. In Supabase, open **Authentication → Users**.
2. Add/invite a user for the person who will manage candles. Use an email you can access and a strong password. This is only for the store admin; customers will never see a login prompt.
3. Copy that user's **UUID / ID** from the Users table.
4. Return to **SQL Editor** and run this query, replacing the example UUID with the actual user's UUID:

   ```sql
   insert into public.admin_users (user_id)
   values ('PASTE-THE-ADMIN-USER-UUID-HERE');
   ```

   Repeat this only for people who should have permission to manage products. Do not add customers to `admin_users`.

### C. Add flexible pricing to an existing database

If you already set up Supabase for the current live site, open **SQL Editor**, open `pricing-migration.sql` from this folder, copy all of it, paste it into the editor and click **Run** once. This adds the pricing columns while keeping every existing product on its current fixed price. Do this before deploying the updated website; otherwise saving a product may fail because the new columns do not exist yet.

### D. Add category management to an existing database

After the product setup and pricing migration, run `category-migration.sql` once in Supabase SQL Editor. This creates the categories table and permissions, imports category names already used by products, and adds safe admin-only rename/delete functions. Existing product category assignments are preserved. Do not rerun the original full setup just to add categories.

In the admin dashboard, use **Category management** to add categories, rename them (assigned products are updated too), change descriptions, reorder them, or delete categories that have no assigned products. On the public Shop section, category filters are generated dynamically and only show categories that currently have products. New product categories and price changes do not require a Netlify redeploy.

### E. Test the dashboard

1. Start the local server again and open `http://localhost:8000/admin.html`.
2. Sign in with the admin email/password created above.
3. Click **Import starter catalogue** once. This copies the 20 starter listings into the database; existing slugs are skipped.
4. Edit the starter prices and colour names to match the current real catalogue. Under **Pricing method**, choose **Same price for all variants**, **Set a different price per variant**, or **Flexible price range**. In per-variant mode, enter a price for every named variant. For a range, enter both the minimum and maximum. For colour-specific images, upload the photo for that colour and save.
5. Open `http://localhost:8000` in another tab and confirm the changes appear. Try a product page and a WhatsApp order. WhatsApp will open with a draft message; the customer still has to press Send.

If the dashboard reports an admin permission error, check that the admin UUID was inserted into `public.admin_users` correctly. If photo upload fails, check that the SQL setup created the `product-images` bucket and its policies.

## Part 3 — Publish the website on Netlify

1. Create an account at [netlify.com](https://www.netlify.com/).
2. Make sure `supabase-config.js` contains your project URL and public key. Never include a secret/service-role key.
3. In Netlify, choose **Add new site / Deploy manually** (the exact wording can change), then drag the *contents* of the `flameofdesire-website` folder into the deploy area. The folder contents should include `index.html`, `product.html`, `admin.html`, `styles.css`, JavaScript files and the `assets` folder.
4. Netlify will give you a temporary `*.netlify.app` URL. Open it on your phone and computer. Test catalogue filters, a product link, the admin login and WhatsApp ordering.
5. If you change website code later, upload the updated folder again. Normal product edits from the connected dashboard do **not** require redeploying.

### Connect your GoDaddy domain

1. In Netlify, open your site's **Domain management** and add the domain you purchased at GoDaddy.
2. Follow the exact DNS instructions Netlify shows for your domain. The records can differ depending on whether you use Netlify DNS or keep DNS at GoDaddy.
3. In GoDaddy, open **My Products → Domain → DNS / Manage DNS** and add/update only the records Netlify tells you to use. Remove conflicting records for the same host if Netlify instructs you to. Do not guess the target values.
4. Wait for DNS and HTTPS/SSL setup to finish; it may take a while. Then test both the root domain and `www` version if you configured both.

## How your mother will use it after setup

1. Open `yourdomain.com/admin.html`.
2. Sign in with the private admin email/password.
3. Add a candle name, URL slug, price, category and description.
4. Upload the main product photo. Add each colour/design as a variant and upload its own photo where available.
5. Choose whether it is available and whether it should be featured.
6. Click **Save and publish candle**. The product appears on the public catalogue and receives a shareable product page link.
7. To change a candle, use **Edit** beside it. To temporarily hide orders, untick **Available to order**. To remove it entirely, use **Delete**.

## Product and order notes

- WhatsApp business number in the starter site: `+91 97722 01705`.
- Instagram: `@flameofdesire.candles`.
- There is no cart, customer profile, online payment or customer account.
- The WhatsApp message contains the product, selected variant, quantity, price shown, notes and product URL. It asks the customer to request confirmation of availability, delivery charges and payment.
- The website does not collect or store customer order details. The customer sends the draft to your WhatsApp only if they choose to press Send.
- Product images are public because customers must be able to view them. Admin-only policies restrict product changes and photo uploads.

## Troubleshooting

- **Site shows starter products, not database edits:** confirm `supabase-config.js` is correct and at least one product has been imported into Supabase.
- **Admin cannot sign in:** confirm the user exists in Supabase Authentication and email/password sign-in is enabled.
- **Signed in but cannot save:** confirm that user's UUID is in `public.admin_users`.
- **Images do not load after moving folders:** keep the `assets` folder alongside the HTML files. For photos uploaded through the dashboard, Supabase stores full public image URLs.
- **WhatsApp opens without sending:** expected behaviour; WhatsApp requires the customer to press Send.