Welcome to the official resource page for the digital storefront build! If you just watched the video, you already know the drill. Below is everything you need to spin up a fully functional, auto-delivering digital product store—complete with a custom admin panel and local Algerian payment integration.
To make sure the AI generates clean, modular code without getting confused, just follow these two simple steps:
Step 1: Download the SlickPay API Guide
Create a SlickPay Account in few minutes slick-pay.com and then Grab the SlickPay .md context file first. You’ll need to feed this to your AI so it perfectly understands the payment logic before we get into the backend.
Step 2: Run the Prompts
Copy and paste the core prompts provided below. They’re broken down logically to build out your front-end, backend, and payment integration step-by-step.
# Rebuild in 3 prompts
Three self-contained prompts that recreate the whole system:
1. **Landing page + express checkout** (front office)
2. **Payment integration — SlickPay** (the payment + delivery layer)
3. **Backend + back office** (FastAPI/Mongo API + React admin + one-domain deploy)
They share one API contract, so order doesn't strictly matter — but the natural
build order is **1 → 3 → 2** (3 gives the backend that 2's payment layer plugs
into). Each prompt names the contract it relies on.
The shared contract (same-origin `/api/*`):
- `GET /api/public/products/{slug}` → `{title, tagline, price, compare_at_price, currency, features[], image_url}`
- `POST /api/checkout` `{product_slug, firstname, lastname, email, phone}` → `{order_id, payment_url, amount}`
- `GET /api/checkout/status/{order_id}` → `{status, completed, download_link, rejection_reason}`
Stack: HTML/CSS/JS + Express (store) · FastAPI + Motor + MongoDB (api) · React +
Vite (admin) · SlickPay/SATIM (payments). Currency **DZD**, price > 100. The
SlickPay secret key lives **only** on the backend.
## PROMPT 1 — Landing page with express checkout (front office)
> Build a digital-product **storefront** for an ebook, **"The AI Money Machine —
> Master AI to Make Money Online"**, in `ai-ebook-landing/`. Plain HTML + CSS +
> vanilla JS, served by a tiny Express server. No frontend framework.
>
> **Design.** Modern dark SaaS look. Fonts **Sora** (headings) + **Inter** (body)
> from Google Fonts. Accents: purple `#7c5cff`, cyan `#22d3ee`, gold `#ffce5c` on
> near-black. Fully responsive.
>
> **`public/index.html` sections (in order):**
> 1. Announcement bar ("Launch price ends soon — save 60%").
> 2. Sticky nav (brand, links What's Inside / Results / FAQ, "Get the Ebook").
> 3. Hero — left: eyebrow pill, headline "Turn AI tools into a real online
> income.", subtext, primary CTA + star rating, 3 bullets; right: a CSS **3D
> book cover mockup** ("THE AI MONEY MACHINE", "2026 Edition").
> 4. Trust strip (TikTok/YouTube/Instagram/LinkedIn/X).
> 5. "Sound familiar?" — 3 pain cards.
> 6. "What's Inside" — 6 numbered AI-income blueprints + a bonus box.
> 7. Results — 3 testimonials + a stats row.
> 8. **Checkout** — two columns: left an offer summary (feature list, compare-at
> price struck through, current price, discount badge); right an **"Express
> checkout"** form (first name, last name, email, optional phone), a live order
> summary (item / card fee / total), a "Pay securely" button with spinner, and
> an inline error line.
> 9. FAQ (`<details>` accordion). 10. Final CTA + footer.
>
> **Hero "LightRays" effect** — port the React Bits `<LightRays />` to a **vanilla
> ES module** `public/light-rays.js` that imports `ogl` from
> `https://esm.sh/ogl` and renders the LightRays GLSL shader into a
> `<div id="lightRays">` layered **behind** the hero (absolute,
> `pointer-events:none`, low z-index). Support all props (raysOrigin, raysColor,
> raysSpeed, lightSpread, rayLength, pulsating, fadeDistance, saturation,
> followMouse, mouseInfluence, noiseAmount, distortion). Mount with
> `top-center`, color `#22d3ee`, speed 1.5, spread 0.8, rayLength 1.2,
> followMouse true, mouseInfluence 0.1, noise 0.1, distortion 0.05. Pause the
> render loop via `IntersectionObserver` when off-screen.
>
> **Book "ProfileCard" effects** — `public/book-card.js` (vanilla): (a) a
> **dramatic 3D pointer-tilt** — on pointer move, set CSS vars
> (`--pointer-x/y`, `--pointer-from-*`, `--rotate-x = -(centerX/2)`,
> `--rotate-y = centerY/1.8`) and tilt the cover `rotateX(var(--rotate-y))
> rotateY(var(--rotate-x)) translateZ(40px) scale(1.06)` with `perspective:620px`
> (~±25°) and a pointer-driven shadow; ease back on leave. (b) a **holographic
> surface** that reads as a realistic iridescent sheen (NOT stacked stripes): two
> absolute layers `.book-shine` + `.book-glare` inside the cover; the shine is a
> single fine diagonal rainbow `repeating-linear-gradient`,
> `mix-blend-mode:color-dodge`, **heavily desaturated** (`saturate(~0.45)`) and
> **blurred** (`blur ~5px`) so the bands melt, **masked to a soft radial halo
> following the pointer** (`mask-image: radial-gradient(... at var(--pointer-x)
> var(--pointer-y))`), gradient position tied to the pointer, plus a slow
> `hue-rotate`. The holo only shows on hover (gated by `--card-opacity` /
> `.is-tilting`). Keep the book text above the layers and readable.
>
> **Checkout client `public/checkout.js`:**
> - On load, fetch `GET /api/public/products/ai-money-machine` and **hydrate the
> page**: current price, compare-at (struck) price, an auto-computed discount
> badge (`round((1 - price/compare)*100)`), and the feature-bullet list.
> - Validate the form (name + valid email). On submit, `POST /api/checkout` with
> `{product_slug:"ai-money-machine", firstname, lastname, email, phone}`,
> then `window.location = payment_url`; stash `order_id` in `sessionStorage`.
> - `public/payment-return.html` — read `?order=<id>` (fallback to session),
> poll `GET /api/checkout/status/{id}` every ~3s; on `completed===1` show a
> success state with the returned `download_link`, else show a retry state.
>
> **`server.js` (Express):** serve `public/` statically AND **transparently proxy
> every `/api/*` request to a backend** at `FARM_API_URL` (forward method, body,
> auth headers). This mirrors the production reverse proxy so the same code works
> in dev and prod. Read `PORT`, `PUBLIC_URL`, `FARM_API_URL` from `.env`. Provide
> `package.json` + `.env.example`. (The `/api/*` endpoints are implemented by
> Prompts 2 & 3.)
## PROMPT 2 — Payment integration: SlickPay (+ auto-delivery)
> Implement the **SlickPay** payment layer and automatic digital delivery as part
> of the FastAPI backend (the backend scaffold — config, db, models, auth — comes
> from Prompt 3; this prompt adds `slickpay.py`, `delivery.py`, and
> `routers/checkout.py`). The SlickPay **secret key lives only in the backend
> `.env`** (`SLICKPAY_KEY`), never in any frontend.
>
> **SlickPay API facts to encode:**
> - Auth header on every call: `Authorization: Bearer <KEY>`, plus
> `Content-Type` + `Accept: application/json`.
> - Base URLs: sandbox `https://devapi.slick-pay.com/api/v2`, production
> `https://prodapi.slick-pay.com/api/v2` (select by `SLICKPAY_ENV`).
> - Flow: create invoice → redirect buyer to the **SATIM** card page → buyer pays
> with CIB/EDAHABIA → SATIM returns to your `url` → confirm via status poll or
> webhook.
> - `POST /users/invoices` body: `amount` (DZD, >100), `items:[{name,price,
> quantity}]`, `url` (your return page), `fees` (0–100; **100 = client pays the
> commission**), optional `account` (bank account UUID/RIB; omitted = default),
> buyer `firstname/lastname/email/phone/address`, and `webhook_url` +
> `webhook_signature` + `webhook_meta_data`.
> - **Use the response's root `url`** (the SATIM page) for redirect — NOT
> `invoice.url` (that's the merchant view). Keep the response `id` for status.
> - Status: `GET /users/invoices/{id}` → `completed == 1` means **paid**;
> `rejection_reason` explains failures.
> - `POST /users/invoices/commission {amount}` → `{amount, commission}` (the
> commission rate is per-merchant; `fees` only decides who pays it).
> - `GET /users/accounts` → bank accounts; an empty list means **no RIB linked**,
> and invoice creation will fail with a generic **"Server Error"**.
>
> **`app/slickpay.py`** — async httpx client: `commission(amount)`,
> `create_invoice(...)` (fees default 100, includes webhook + optional account),
> `get_invoice(id)`, `list_accounts()`. Raise a typed `SlickPayError`; when the
> response is the no-RIB "Server Error", surface a clear message and let callers
> map it to **HTTP 503**.
>
> **`app/delivery.py` — auto-delivery, idempotent.** `deliver_order(order)`:
> never deliver twice; pick the payload by the product's `delivery_type`
> (`file_url`/`redirect` → the configured URL; `license_key` → pop one key from
> the product's pool and persist the shrunken pool); generate a tokenised
> `download_link` (`/api/download/{token}`); "send" a templated delivery email via
> a `send_email()` **stub that logs** (leave a clear hook for SMTP/SendGrid);
> set the order `delivered`; increment the product's `sold_count`.
>
> **`app/routers/checkout.py` — all public:**
> - `POST /api/checkout` `{product_slug, firstname, lastname, email, phone}` →
> look up the active product, create a `pending` order, call SlickPay
> `create_invoice`, store `invoice_id` + `payment_url`, return
> `{order_id, payment_url, amount}`. On `SlickPayError` mark the order `failed`
> and return 503 (no RIB) or the upstream status with the message.
> - `GET /api/checkout/status/{order_id}` → if still `pending`, poll SlickPay; on
> `completed==1` mark `paid` and **auto-deliver**; return
> `{status, completed, download_link, rejection_reason}` (self-heals a missed
> webhook).
> - `POST /api/webhooks/slickpay` → verify the `webhook_signature` (header or
> body), find the order by `invoice_id` / meta `order_id`, and on success mark
> `paid` + auto-deliver.
> - `GET /api/download/{token}` → for a delivered order, redirect to the asset
> URL or return the license key.
>
> Order lifecycle: `pending → paid → delivered` (plus `failed`, `refunded`).
> Delivery fires automatically the moment payment is confirmed.
## PROMPT 3 — Backend + back office (FastAPI/Mongo API, React admin, one domain)
> Build the **FARM backend** and **React admin**, and stitch the store + admin +
> API onto one domain. This is a **single-product** store.
>
> ### A) FastAPI backend (`farm-backoffice/backend/`, Python 3.9-compatible)
> Use `from __future__ import annotations` + `Optional[...]`. `requirements.txt`:
> fastapi, uvicorn[standard], **motor==3.5.1 + pymongo==4.8.0** (pin pymongo —
> newer breaks motor 3.5.1), pydantic v2, pydantic-settings,
> python-jose[cryptography], passlib[bcrypt] + bcrypt==4.0.1, httpx,
> python-multipart, email-validator.
>
> `app/` modules:
> - `config.py` — pydantic-settings from `.env`: Mongo URI/db, admin email/pass,
> JWT secret/expiry, SlickPay key/env/account/webhook-signature,
> `public_api_url`, `storefront_return_url`, `cors_origins`,
> `storefront_product_slug` (default `ai-money-machine`); `slickpay_base_url`
> property.
> - `db.py` — Motor client, collection accessors (`products/orders/users/
> settings`), `ensure_indexes()` (unique slug + email, invoice_id,
> download_token, created_at).
> - `security.py` — bcrypt hashing, JWT, `get_current_admin` via
> `OAuth2PasswordBearer`.
> - `models.py` + `serializers.py` — Pydantic models + ObjectId→dict helpers.
> **Product** fields (mirror the landing page): `title, slug, tagline,
> description, price(>100), compare_at_price, currency, features:list[str],
> image_url, active`, delivery config (`delivery_type` =
> file_url|license_key|redirect, `delivery_url`, `license_keys:list[str]`,
> `delivery_email_subject/body`), `sold_count`. **Gotcha:** type emails on
> *output* models as plain `str` (EmailStr rejects reserved TLDs like
> `admin@shop.test` → 500); keep `EmailStr` only on customer input.
> - `seed.py` — on startup create the admin if missing and seed the ONE product
> matching the landing copy (price 4900, compare 12250, the 5 feature bullets);
> backfill `tagline/compare_at_price/features` on an existing product.
> - `main.py` — app factory, lifespan (`ensure_indexes` + `seed`), CORS allowing
> the configured origins **plus** a `http://localhost:\d+` regex for dev.
>
> Routers:
> - `auth.py` — `POST /api/auth/login` (OAuth2PasswordRequestForm, `username` =
> email) → JWT; `GET /api/auth/me`.
> - `product.py` — **single product**: `GET /api/product` + `PUT /api/product`
> operate on the `storefront_product_slug` product (create if missing; slug
> fixed). Public read `GET /api/public/products/{slug}` returns non-secret
> fields (title, tagline, price, compare_at_price, currency, features,
> image_url).
> - `orders.py` — `GET /api/orders` (filter by status, search name/email/product/
> serial), `GET /api/orders/{id}`, `PATCH /api/orders/{id}/status`,
> `POST /api/orders/{id}/deliver` (manual re-deliver).
> - `dashboard.py` — `GET /api/dashboard/overview`: KPIs (revenue over
> paid+delivered, paid count, delivered/pending/failed, AOV, conversion %),
> 14-day revenue series (aggregate by paid_at day), top products, recent orders.
> - `settings.py` — store name + SlickPay env/account/fees (non-secret) +
> `key_configured` flag; `GET /api/settings/slickpay/health` (key authenticates?
> RIB linked?).
>
> Provide `.env.example`. (Prompt 2 adds `slickpay.py`, `delivery.py`,
> `routers/checkout.py` into this same app and includes them in `main.py`.)
>
> ### B) React admin (`farm-backoffice/backoffice/`, Vite + React Router)
> **HashRouter** and Vite **`base:"/admin/"`** (lives under `domain.com/admin`;
> HashRouter means `/admin/#/orders` needs no server route config). Dev server
> reads `PORT` and proxies `/api` → backend (`VITE_PROXY_TARGET`). Dark admin
> theme (custom CSS, sidebar). Files:
> - `api.js` (fetch wrapper, JWT in localStorage, 401 → login), `auth.jsx`
> (context), `App.jsx` (protected routes), `Layout.jsx` (sidebar: Overview /
> Orders / Product / Settings), `components/common.jsx` (StatusBadge, money/date
> formatters, a **dependency-free SVG BarChart**).
> - Pages: **Login**; **Dashboard** (KPI cards + bar chart + top products + recent
> orders); **Orders** (filter + search + a detail **drawer** showing customer/
> amount/invoice, the delivery block with download link + payload + email-sent,
> and actions deliver/re-send, mark paid/refunded/failed); **Product** (a
> **single-product editor** — title, tagline, description, price, compare-at
> price, feature bullets, visibility, plus auto-delivery config — with a **live
> storefront preview card**; saves via `PUT /api/product`); **Settings** (store
> name + SlickPay env/account/fees + live SlickPay health panel).
>
> ### C) One domain (`deploy/`)
> The store, admin and API share one origin via a reverse proxy:
> - **`Caddyfile`** (recommended, auto-HTTPS): `/api/*` → backend:8000;
> `/admin/*` → built `backoffice/dist` (SPA fallback); everything else →
> `storefront/public`; redirect `/admin` → `/admin/`.
> - **`nginx.conf`** — equivalent (`location /api/`, `/admin/` with `alias` +
> try_files, `/`).
> - **`gateway.js`** — a **zero-dependency Node** dev reverse proxy (built-in
> `http` only) doing the same routing, configurable via
> `BACKEND_URL/ADMIN_URL/STORE_URL/PORT`.
> - `README.md` — prod (build admin, run backend, run Caddy) + local-dev (3 apps +
> gateway) steps, and the prod backend env (`PUBLIC_API_URL`,
> `STOREFRONT_RETURN_URL`, `CORS_ORIGINS`).
>
> **Result:** `domain.com/` storefront · `domain.com/admin` backoffice ·
> `domain.com/api/*` backend. A checkout on the store creates a real order in the
> admin; paying it auto-delivers; editing the product in the admin updates the
> live landing page.
