All projects
Agent-built productJuly 2026Reported by the owner

300 to 545 orders a month

Built for

Alchemist Pharmacy, five branches, roughly 350 walk-in customers a day

Project

Alchemist Pharmacy

Every visit is routed to the nearest branch's WhatsApp in two taps. Thirty-minute delivery positioning, bilingual hero, branch galleries with live maps.

02

Demo

alchemistpharmacy.com
open ↗

Live site. Try the Order on WhatsApp button and pick an area.

03

How it works

Architecture diagram
  1. 01

    No backend: static HTML, CSS, and JS so the site loads instantly on cheap Android phones.

  2. 02

    Area-to-branch routing runs in the browser and deep-links straight into the right WhatsApp chat.

  3. 03

    Repo uses an ICM layered-context layout (CLAUDE.md, CONTEXT.md, shared facts) so AI agents build each track from real business data.

  4. 04

    All assets local; the only external dependency is Google Fonts.

04

Screenshots

Alchemist Pharmacy home page with bilingual hero
Alchemist Pharmacy home page with bilingual hero
Choose your nearest branch: the WhatsApp branch picker
Choose your nearest branch: the WhatsApp branch picker
Branches accordion with gallery and map
Branches accordion with gallery and map
05

Stack and code

script.js
    </div>
    <div class="footer-bottom">
      <div class="container">© <span id="year"></span> Alchemist Pharmacy. All rights reserved.</div>
    </div>
  </footer>`;
}

/* --- Branch data (from alchemistpharmacy.com) ---
   `wa` = each branch's real WhatsApp number (international format, digits only). */
const BRANCHES = [
  { name: "Pakistan Mint Branch", address: "GT Road, Opposite Pakistan Mint, Lahore", wa: "923154104786", query: "Alchemist Pharmacy GT Road Opposite Pakistan Mint Lahore",
    photos: [ { src: "mint-outside.jpg", type: "Outside" }, { src: "mint-inside-1.jpg", type: "Inside" }, { src: "mint-inside-2.jpg", type: "Inside" } ] },
  { name: "Thokar Niaz Baig", address: "Opposite Daewoo Bus Services, Canal Bank Road, Lahore", wa: "923001499064", query: "Alchemist Pharmacy Thokar Niaz Baig Canal Bank Road Lahore",
    photos: [ { src: "thokar-outside.jpg", type: "Outside" }, { src: "thokar-inside-1.jpg", type: "Inside" }, { src: "thokar-inside-2.jpg", type: "Inside" } ] },
  { name: "Allama Iqbal Town", address: "Gulshan Block, Dubai Chowk, Allama Iqbal Town, Lahore", wa: "923259728838", query: "Alchemist Pharmacy Dubai Chowk Allama Iqbal Town Lahore",
    photos: [ { src: "allama-outside.jpg", type: "Outside" }, { src: "allama-inside-1.jpg", type: "Inside" } ] },
  { name: "Johar Town", address: "Khokhar Chowk, Johar Town, Lahore", wa: "923004706960", query: "Alchemist Pharmacy Khokhar Chowk Johar Town Lahore",
    photos: [ { src: "johar-outside.jpg", type: "Outside" }, { src: "johar-inside-1.jpg", type: "Inside" }, { src: "johar-inside-2.jpg", type: "Inside" } ] },
  { name: "Johar Town (411/E)", address: "411/E Block, Johar Town, Lahore", wa: "923039936895", query: "Alchemist Pharmacy 411 E Block Johar Town Lahore",
    photos: [ { src: "johar411-outside.jpg", type: "Outside" }, { src: "johar411-inside-1.jpg", type: "Inside" }, { src: "johar411-inside-2.jpg", type: "Inside" } ] }
];

/* Lahore area -> nearest branch (index into BRANCHES). Best-effort mapping;
   adjust freely. Unlisted areas fall back to the main branch in the modal. */
const AREA_MAP = [
  { area: "Shahdara",              branch: 0 },
  { area: "Ravi Road",             branch: 0 },
  { area: "Badami Bagh",           branch: 0 },
  { area: "GT Road",               branch: 0 },
  { area: "Old City / Data Darbar", branch: 0 },
  { area: "Allama Iqbal Town",     branch: 2 },
  { area: "Samanabad",             branch: 2 },
  { area: "Sabzazar",              branch: 2 },
  { area: "Chauburji",             branch: 2 },
  { area: "Gulshan-e-Ravi",        branch: 2 },
  { area: "Multan Road",           branch: 1 },
  { area: "Thokar Niaz Baig",      branch: 1 },
  { area: "Canal Bank Road",       branch: 1 },
  { area: "Raiwind Road",          branch: 1 },
  { area: "Hanjarwal",             branch: 1 },
  { area: "Bahria Town",           branch: 1 },
  { area: "Johar Town",            branch: 3 },
  { area: "Model Town",            branch: 3 },
  { area: "Faisal Town",           branch: 3 },
  { area: "Garden Town",           branch: 3 },
  { area: "Gulberg",               branch: 3 },
  { area: "Township",              branch: 3 },
  { area: "Wapda Town",            branch: 4 },
  { area: "Valencia",              branch: 4 },
  { area: "DHA",                   branch: 4 },
  { area: "Emporium / Expo Centre", branch: 4 }
];

/* Keywords for matching a FREE-TYPED area to the nearest branch. Multi-word
   keywords match anywhere in the text; single-word keywords match a whole word
   only (so "ravi" in "Gulshan-e-Ravi" doesn't wrongly hit "Ravi Road").
   Order matters: more specific entries first. Extend freely. */
const AREA_KEYWORDS = [
  // Branch 0 - Pakistan Mint / North Lahore
  { kw: "shahdara", branch: 0 }, { kw: "badami bagh", branch: 0 }, { kw: "ravi road", branch: 0 },
  { kw: "gt road", branch: 0 }, { kw: "data darbar", branch: 0 }, { kw: "old city", branch: 0 },
  { kw: "misri shah", branch: 0 }, { kw: "bhati", branch: 0 }, { kw: "mochi gate", branch: 0 }, { kw: "minar", branch: 0 },
  // Branch 2 - Allama Iqbal Town / West-central
  { kw: "iqbal town", branch: 2 }, { kw: "samanabad", branch: 2 }, { kw: "sabzazar", branch: 2 },
  { kw: "chauburji", branch: 2 }, { kw: "gulshan e ravi", branch: 2 }, { kw: "gulshan ravi", branch: 2 },
  { kw: "wahdat", branch: 2 }, { kw: "poonch", branch: 2 }, { kw: "ichhra", branch: 2 }, { kw: "ichra", branch: 2 },
  // Branch 1 - Thokar Niaz Baig / South-west
  { kw: "thokar", branch: 1 }, { kw: "niaz baig", branch: 1 }, { kw: "canal bank", branch: 1 },
  { kw: "raiwind", branch: 1 }, { kw: "hanjarwal", branch: 1 }, { kw: "bahria", branch: 1 },
  { kw: "maraka", branch: 1 }, { kw: "bhobtian", branch: 1 }, { kw: "ali town", branch: 1 },
  { kw: "multan road", branch: 1 }, { kw: "defence road", branch: 1 },
  // Branch 3 - Johar Town / Model Town / Gulberg
  { kw: "johar town", branch: 3 }, { kw: "model town", branch: 3 }, { kw: "faisal town", branch: 3 },
  { kw: "garden town", branch: 3 }, { kw: "muslim town", branch: 3 }, { kw: "gulberg", branch: 3 },
  { kw: "township", branch: 3 }, { kw: "kalma chowk", branch: 3 }, { kw: "liberty", branch: 3 },
  { kw: "main boulevard", branch: 3 }, { kw: "barkat market", branch: 3 }, { kw: "ferozepur road", branch: 3 },
  { kw: "cantt", branch: 3 }, { kw: "cantonment", branch: 3 },
  // Branch 4 - Johar Town (411/E) / Wapda Town / DHA
  { kw: "wapda town", branch: 4 }, { kw: "valencia", branch: 4 }, { kw: "dha", branch: 4 },
  { kw: "defence", branch: 4 }, { kw: "emporium", branch: 4 }, { kw: "expo", branch: 4 },
  { kw: "eme", branch: 4 }, { kw: "walton", branch: 4 }, { kw: "state life", branch: 4 }, { kw: "khayaban", branch: 4 }
];

/* --- Init on DOM ready --- */
document.addEventListener("DOMContentLoaded", () => {
  const current = document.body.dataset.page || "";

  // header + footer
  const h = document.getElementById("site-header");
  const f = document.getElementById("site-footer");
  if (h) h.outerHTML = buildHeader(current);

~/Documents/alchemist-pharmacy-master/tracks/01_website_delivery/output/script.js

CONTEXT.md
# CONTEXT.md — Track Router (Layer 1)

> Layer 1 answers: **"Which track am I working on?"**
> Read this after `CLAUDE.md`. Its only job is to route the session to exactly
> one track so the token budget stays bounded. It holds no build instructions
> itself — those live in each track's `CONTEXT.md` (Layer 2).

---

## How to route (every session)

1. Read `CLAUDE.md` (Layer 0) — orientation.
2. Read this file (Layer 1) — the track map below.
3. Read `shared/business-context.md` (Layer 3) — the real, current facts about
   Alchemist Pharmacy. Every track needs these; load them once, here.
4. Identify the **active track** from what the owner asks for
   ("the website", "the customer database", "subscriptions"). Load **only**
   that track's `tracks/NN_*/CONTEXT.md` and its `references/`/`output/`.
5. Do **not** load other tracks' folders. That isolation is the optimization.

If the owner hasn't named a track, ask which one — do not load all three.

---

## Track map

| # | Track | Folder | What it delivers | Status |
|---|-------|--------|------------------|--------|
| 01 | Website + Delivery | `tracks/01_website_delivery/` | Revamp/extend the site for **30-minute delivery** with **WhatsApp integration** | Not started |
| 02 | Customer Database | `tracks/02_customer_database/` | A database to **track customer purchases** | **Active — Stage 03 Implementation** (Requirements + Design approved 2026-07-11) |
| 03 | Subscriptions | `tracks/03_subscriptions/` | **Monthly subscriptions** for heart & chronic-disease patients | Not started |

**Intended build order & dependencies:** `01` is the customer-facing
foundation. `02` (database) underpins `03` (subscriptions rely on purchase
history and patient records). Numbers record this order; they don't forbid the
owner choosing a different sequence.

---

## Activating a track

When the owner says "let's build track NN," that track graduates from a
scoping folder to a full pipeline:

1. Confirm scope in `tracks/NN_*/CONTEXT.md`.
2. Create `tracks/NN_*/stages/01_requirements … 06_release`, each with its own
   `CONTEXT.md` / `references/` / `output/` (the standard stage contract).
3. From then on, routing goes one level deeper: `CLAUDE.md` → this router →
   the track `CONTEXT.md` → the active stage's `CONTEXT.md`.

Until a track is activated, it is context you can *reference* cheaply, not a
pipeline you execute.

~/Documents/alchemist-pharmacy-master/CONTEXT.md