Website Documentation

1. Overview

This is a complete e-commerce website for Electrospot Computers with two sides:

• Front end (customers): home page, shop with filters and search, product pages, cart and checkout, repair booking.
• Back end (you): an admin panel at admin.html where you create, read, update and delete products (with photos), manage orders, and back up your data.

2. Installing & hosting

Run it on your computer (no installation)

1. Keep the whole folder together (all .html files plus the css, js and images folders).
2. Double-click index.html — the store opens in your browser.
3. Open admin.html for the back end.

Put it online

1. Log in to your hosting control panel (cPanel on most Kenyan hosts).
2. Open File Manager → public_html (or a subfolder like public_html/shop).
3. Upload the entire folder contents (zip it first, upload, then "Extract").
4. Visit yourdomain.co.ke — done. No database setup or installer needed.

3. Front end guide (what customers see)

• Browse: categories on the home page, or Shop in the menu. Filters (category, price, on-sale), search and sorting all work instantly.
• Product page: photos with clickable thumbnails, price with % -off badge, specifications, reviews, delivery info, related products, and an Order via WhatsApp button.
• Cart: the cart icon (top right) shows the item count. In the cart, customers adjust quantities, see delivery fees (free over KSh 5,000), and check out with name, phone, address and payment method (M-Pesa, card, cash on delivery).
• Placing an order creates an order number (e.g. ES-1001) and the order appears in your admin panel immediately.
• Repairs: customers book repairs via the form; phone numbers are validated in Kenyan format.

4. Admin back end

1. Open admin.html (or the Admin link in the site footer).
2. Sign in with your admin username and password. Login is checked on the server: the password is stored as a bcrypt hash, sessions use secure HttpOnly cookies, and repeated failed attempts are rate-limited (8 tries per 15 minutes).
3. You'll see four sections in the sidebar:
   • Dashboard — product count, order count, pending orders, revenue, latest orders.
   • Products — the full catalogue with search, and Add / Edit / Delete.
   • Orders — every checkout order with status management.
   • Backup & Data — export, import, reset.

5. Products: Create, Read, Update, Delete

Create (add a product)

1. Admin → Products → + Add Product.
2. Fill in the name, category, price. Optional: old price (shows a % -off badge), stock note, badge (Sale/NEW).
3. Photo: click the file chooser and pick any JPG/PNG/WebP from your computer — it is automatically resized to 800px and saved into the database. You'll see a preview instantly. No photo? A colored icon tile is used instead.
4. Specifications: one per line as Label: value, e.g. RAM: 16GB DDR4. These appear in the Specifications tab on the product page.
5. Click Save Product. It is now live in the shop, search and filters.

Read (view/find products)

The Products table shows photo, name, category, price and stock. Use the search box to filter by name. On the shop side, the same data powers listings, product pages and the cart.

Update (edit a product)

1. Products table → Edit next to the item.
2. The form opens pre-filled. Change anything — price, photo, specs, stock.
3. Save Product. Changes appear on the shop immediately (refresh the shop tab if it's already open).

Delete

Products table → Delete → confirm. This is permanent (unless you restore a backup).

6. Managing orders

• Every checkout creates an order: customer name, phone, address, payment method, items and totals.
• Read: Admin → Orders lists all orders; View shows the full detail including line items.
• Update: change the status dropdown — Pending → Processing → Delivered (or Cancelled). Cancelled orders are excluded from revenue.
• Delete: the Delete button removes an order permanently.

7. Backup & restore

• Export: Admin → Backup & Data → Download Backup saves a JSON file with all products (including photos) and orders. Do this after every editing session.
• Import: choose a backup file to restore it — this also lets you move your catalogue to another computer or browser.
• Reset: wipes everything and restores the 12 sample products.

8. Going to production (a real live store)

This prototype is a complete, working specification. For a public store taking real payments you need a server-side backend. Two good paths:

Path A — WooCommerce (recommended; you already own it)

1. Your live site already runs WordPress + WooCommerce. Products are managed at yourdomain.co.ke/wp-admin → Products → Add New — same concepts as this admin panel (name, price, sale price, images, categories, stock).
2. Port this design using a Blocksy child theme, matching the colors/typography in css/styles.css.
3. Add M-Pesa checkout with a maintained Daraja plugin, or Pesapal/DPO for cards.
4. Apply the security checklist in UPGRADE-NOTES.md (headers, 2FA, login rate-limiting, backups, updates).

Path B — Custom build

Keep this front end and replace js/app.js's DB object with API calls to a backend (Node/Express or Laravel + MySQL), with real authentication (hashed passwords, sessions), server-side validation, and image uploads to disk/S3. Any developer can use the DB object's functions (products, addProduct, updateProduct, deleteProduct, orders…) as the exact API contract.