zappier-edge/docs/WALKTHROUGH.md

154 lines
4.2 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# Zappier — Step-by-Step Usage Walkthrough
**Version:** 0.1.0 · **Last updated:** 2026-07-27
A full guided tour: from starting the server to pricing changes, customer
creation, and live API calls. Every step shows the real screen you should see.
Companion documents: [USER-MANUAL.md](USER-MANUAL.md) ·
[DEVELOPER.md](DEVELOPER.md).
---
## Step 1 — Start the server
```bash
cd /Users/marchon/zappier
npm install # first time only
npm run dev
```
Wait for the two "listening" lines:
![Start the server](walkthrough/01-start-server.png)
---
## Step 2 — Open the admin UI and sign in
Go to **http://localhost:3000/admin**. You'll see the sign-in screen:
![Sign in](walkthrough/02-login.png)
Two accounts are available:
| Username | Password | Purpose |
|---|---|---|
| `admin` | the `ADMIN_KEY` env value (default `admin-dev-key`) | Primary operator |
| `demo` | `$$$Adm1n###` | Demo / stakeholder access |
> Override either credential with the `ADMIN_USER`, `ADMIN_KEY`,
> `DEMO_ADMIN_USER`, and `DEMO_ADMIN_PASSWORD` environment variables.
---
## Step 3 — The rate card
After sign-in you land on the **Rate card** — one row per API endpoint with
its price in cents:
![Rate card](walkthrough/03-rate-card.png)
- `status`, `storage-list`**free**
- `transform`**fixed** price per call
- `storage`**variable**: base + per-KB metadata + per-MB attachments
---
## Step 4 — Change a price
Edit any cent field — here `transform` is changed from **4¢ to 6¢** — and click
**Save**. The change is live on the very next API call; no restart, no deploy.
![Edit a price](walkthrough/04-edit-price.png)
After saving, the table re-reads from the server and shows the new value:
![Price saved](walkthrough/04b-saved-toast.png)
---
## Step 5 — Customer types
Click **Customer types** in the sidebar. Each type is a pricing tier:
a **multiplier** applied to every list price and a **monthly credit** of free
included usage (cents).
![Customer types](walkthrough/05-tiers.png)
---
## Step 6 — Add a customer type
Fill the **Add customer type** form — here `edu` / Education / ×0.6 — and click
**Add**. The new type appears immediately and can be assigned to customers.
![Add customer type](walkthrough/06-add-tier.png)
> New types start with 0 monthly credit — edit the row and **Save** to grant one.
---
## Step 7 — Customers
Click **Customers** in the sidebar. This is where accounts live: their type,
and an optional **multiplier override** for per-customer deals (blank =
inherit from type).
![Customers](walkthrough/07-customers.png)
---
## Step 8 — Create a customer and copy the API key
Enter a name, pick a type, click **Create**. The API key appears **once** in
the notification at the bottom-right — copy it and send it to the customer;
it is never shown again.
![API key shown once](walkthrough/08b-api-key-toast.png)
The new customer appears in the table right away:
![Customer created](walkthrough/08-create-customer.png)
---
## Step 9 — Explore the interactive API docs
Open **http://localhost:3000/docs** — full Swagger docs with a "Try it out"
console. Click **Authorize** and paste a customer API key to make live calls
from the browser.
![API docs](walkthrough/09-api-docs.png)
---
## Step 10 — Make an API call
Call the API with a customer key. Every priced response includes its **quote**,
so the cost of every call is transparent:
![API call with quote](walkthrough/10-api-call.png)
Note how the quote reflects the walkthrough itself: the 6¢ price set in step 4,
halved to 3¢ by Grace's Pro multiplier.
---
## Step 11 — Check usage and credits
Customers can check their own month-to-date usage anytime:
![Usage summary](walkthrough/11-usage.png)
`includedCents` is covered by the type's monthly credit; `billableCents` is
what the daily billing job would report to Stripe right now.
---
## Where to go next
- **Daily billing** runs automatically at 06:17 ET — see
[USER-MANUAL.md §6](USER-MANUAL.md#6-billing-operations-stripe) for the
Stripe meter/product/price setup and how to verify a run.
- **Troubleshooting:** [USER-MANUAL.md §9](USER-MANUAL.md#9-troubleshooting).
- **Internals:** [DEVELOPER.md](DEVELOPER.md).