Partner Nook · Project Handbook

From an empty folder to a Shopify-connected affiliate platform

The full story of what we built, how the data flows, how it connects to a real Shopify store, which PRD requirements are covered — and exactly how to demo it and take it live.

~90%
of the PRD MVP built & working
11
database models powering it
Live
real Shopify store connected
10/10
PRD sections addressed

01 What Partner Nook is

A Shopify affiliate & influencer-marketing app, modelled on GoAffPro and built to the client PRD (§4.1–4.10).

Brands invite creators as affiliates. Each affiliate gets a personal coupon code and referral link. When a shopper checks out with that code on the brand's real Shopify store, the sale is attributed to the affiliate, commission is calculated automatically, and the brand pays the affiliate out — as store credit (a real Shopify coupon) or PayPal. It is a complete working loop, not a mock-up.

Two surfaces, one system: an Admin CRM for the brand (affiliates, commissions, coupons, payouts, analytics, branding) and an Affiliate Portal for creators (their link, earnings, marketing tools, payouts). Both are branded from a single settings screen.

02 How we built it — the journey

Each phase shipped working software before the next began, following your "research → plan → approve → build" rhythm.

1

Research & plan

Studied GoAffPro's full product (docs + a live video walkthrough of your installed app), mapped it to the PRD, and designed the database and architecture before writing feature code.

2

Foundation & data model

Set up the monorepo, PostgreSQL, and the Prisma schema — Merchant, Affiliate, Commission groups, Orders, Payouts and more. The commission engine (default → group → tiered → per-affiliate) was built here.

3

Admin CRM + Affiliate Portal

Rebuilt both surfaces into a professional CRM look with a shared design system — data tables, modals, toasts, charts, collapsible sidebars — and full affiliate CRUD, sales, payouts, leaderboard and analytics.

4

Real Shopify connection

Wired the store via a custom-app Admin API token. Real discount codes are created in Shopify; real orders are synced and attributed; store-credit payouts issue real coupons.

5

Gap-fill against GoAffPro

Custom signup fields, editable referral code, profile photo, payout invoices, coupon usage-limits pushed to Shopify — closing the differences found in the live walkthrough.

6

Branding, settings & deeper coupon/commission logic

Brand colours & logo now apply everywhere (admin, portal, signup, login); tabbed settings with Integrations; Automatic Coupons, auto-apply, personal coupons, and product-level commissions.

03 Architecture & tech stack

One repository, two apps, a Postgres database, talking to Shopify's Admin API.

Frontend · Web
  • Next.js 16 (App Router)
  • React 19 + TypeScript
  • Tailwind v4 design system
  • Runs on :3000
  • Admin CRM + Affiliate Portal + public signup/store
Backend · API
  • NestJS 11 (TypeScript)
  • Prisma 6 ORM
  • REST under /api, on :4000
  • Controllers: admin · affiliates · shopify · tracking
  • Commission engine + Shopify service
Data & Commerce
  • PostgreSQL (via Prisma)
  • Shopify Admin API (GraphQL)
  • Custom-app token shpat_…
  • Secrets in apps/api/.env
  • Scopes: read_orders · write_discounts · read_products
Data path in one line: Browser → Next.js (web) → NestJS API → Prisma → PostgreSQL, and the API also calls Shopify's Admin API for discounts & orders.

04 Data model — where everything lives

Eleven Prisma models. A Merchant (the brand) owns everything; an Affiliate is the heart of the system.

ModelHoldsKey fields
MerchantThe brand / store & all program configprogramName, autoApprove, commission defaults, minPayout, branding (logo/colours), signupDefaults, autoCoupon, payoutMethods
AffiliateA creator + their coupon & balancename, email, status, couponCode, discount config, balance, referralLink, signupData
CommissionGroupTiers / group rates & signup bonusname, type, value, tiers, signupBonus
ProductCommissionPer-product / per-tag rate overridesmatchType, matchValue, affiliateId, commissionType, value
ReferralOrderAn attributed sale + its commissionshopifyOrderId, subtotal, total, commission, status
ClickReferral-link clicks (attribution)affiliateId, ip, createdAt
PayoutA payout request / paid recordamount, method, status, reference (coupon/txn)
SignupFieldDefMerchant-defined custom signup fieldslabel, type, required
FraudFlagSelf-referral / same-IP flagsaffiliateId, reason, ip, resolved
EmailLogEvery notification event (logged)toEmail, type, subject
AssetMarketing creatives / banners / linkstype, url, title

05 How data flows — the affiliate loop

The one journey that makes the whole product real, end to end.

Affiliate signs upFills the branded signup form → an Affiliate row is created (Pending, or Active if auto-approve is on).
Web · /signup
Admin approvesStatus → Active. A coupon code is generated using the Automatic-Coupons defaults, a referral link is created, welcome email is logged.
Admin · Affiliates
Coupon pushed to ShopifyA real discount code is created in the store via the Admin API — with the usage limits, min order & expiry set on it.
API → Shopify
Shopper checks outA customer buys on the real Shopify store and enters the affiliate's coupon code at checkout.
Shopify store
Orders synced & attributed"Sync orders" pulls recent orders, matches the code → affiliate, runs the commission engine (per-affiliate → group/tier → product rule → default; personal coupon = 0), and writes a ReferralOrder + credits the balance.
Admin → Shopify
Affiliate sees earningsThe portal shows clicks, sales, conversion %, earnings & balance. When balance ≥ minimum, they request a payout.
Portal · Payments
Brand pays outAdmin marks it paid → a Payout row. Store-credit issues a real Shopify coupon (e.g. SC-…); a downloadable invoice is generated.
Admin · Payouts

06 How it connects to Shopify

Through a Shopify custom app — installed on the store, giving a private Admin API access token. No public-app OAuth needed for a single-store install.

Setup (one time)
  • Shopify admin → Settings → Apps → Develop apps
  • Create app → set Admin API scopes
  • Install → copy the Admin API token (shpat_…)
  • Put shop domain + token in apps/api/.env
  • Manage from Settings → Integrations in the admin
What is genuinely real
  • Discount codes created in the store (GraphQL discountCodeBasicCreate)
  • Orders read & attributed (GraphQL orders + line items + tags)
  • Store-credit payouts issue a real coupon
  • Limits, min-order, expiry & combine-rules pushed onto the discount
Today it's a "pull" model: the admin clicks Sync orders to import sales. The next step for production is real-time webhooks so orders & refunds sync automatically.

07 PRD coverage — section by section

Against the client PRD §4.1–4.10. Bars show how complete each area is today.

4.1Onboarding & RegistrationBranded signup, approval, custom + default fields, T&C90%
4.2Affiliate PortalLink, editable code, photo, stats, marketing, payouts95%
4.3Admin DashboardFull CRUD, bulk, search, KPIs, links, registrations100%
4.4Tracking & AttributionCoupon + conversion real; click-script/webhooks pending70%
4.5Commission ManagementDefault, group, tiered, per-affiliate + product-level95%
4.6Coupon ManagementCreate/edit, limits→Shopify, automatic, auto-apply, personal95%
4.7Sales & AnalyticsAll sales, per-affiliate, summary, filters, leaderboard100%
4.8PayoutsThreshold, requests, store-credit, history, invoices90%
4.9Communication & NotificationsPer-event toggles & logs; real SMTP send pending70%
4.10Branding & CustomizationLogo, colours everywhere, tabbed settings; domain/templates pending85%

08 What's built & working

Grouped by area — everything below is live in the app today.

Admin CRM
  • Overview with KPIs, important links & new registrations
  • Affiliates: list, profile, approve/reject, edit, delete, bulk, tags, search
  • Commission groups + product-level commissions
  • Coupons: create/edit/delete, limits, automatic, auto-apply, personal
  • Payouts: totals, method breakdown, invoices, bulk pay
  • Sales, leaderboard, fraud flags, digital assets, marketing
  • Tabbed settings: General · Payments · Notifications · Signup fields · Integrations · Branding
Affiliate Portal
  • Home: referral link + coupon + 6 performance metrics
  • Editable referral code & profile photo
  • Marketing: product-link generator + creative assets
  • Payments: balance, request payout, store-credit / PayPal
  • Payout history with downloadable invoices
  • Settings: profile, password, notification preferences
  • Branded (logo + colours) collapsible-sidebar layout
Commerce engine
  • Commission: default → group → tiered → per-affiliate → product
  • Signup bonus on approval
  • Real Shopify discount creation with all limits
  • Real order sync & coupon attribution
  • Store-credit payout = real Shopify coupon
Branding & onboarding
  • Logo upload + brand colours applied everywhere
  • Custom + default signup fields (show/required toggles)
  • Terms & Conditions on signup
  • Public signup / login / store all branded

09 What's pending — and why

Mostly external-service integrations and a few production hardening items. Prioritised.

ItemPRDNeedsStatus
Real email sending (welcome, sale, payout)4.9SMTP service (SendGrid / Mailgun)Logged, not sent
Real-time webhooks (auto order & refund sync)4.4Shopify webhooks + public URLManual sync now
Storefront click-tracking script4.4Theme script on the live storeNot built
PayPal auto-payout4.8PayPal Payouts API keysManual mark-paid
Secure affiliate auth (JWT)Token hardeningDemo login
Custom portal domain & signup templates4.10Hosting / DNSField only
Gift-card store credit option4.8Shopify gift-card APICoupon only
Out of PRD scope by design (PRD §5): MLM / sub-affiliates, mobile app, social login, marketplace, membership plans, multi-store. Correctly not built.

10 How to present this to the client

A 10-minute demo that shows the whole loop as a real product. Do it in this order.

Open the Admin overviewShow KPIs, the brand logo & colour, important links, recent registrations.
/admin
Register an affiliate liveOpen the branded signup page, fill it, submit — then show them appearing under New Registrations.
/signup
Approve & push the couponApprove the affiliate (coupon auto-generated), then "Push to Shopify" and show the real code inside Shopify admin.
Admin · Coupons
Place a test orderBuy something on the real store using that coupon at checkout.
Shopify store
Sync & show attributionClick "Sync orders" — the sale & commission appear in Sales and on the affiliate's balance.
Admin · Integrations
Show the affiliate sideLog into the portal — earnings, then request a payout.
/dashboard
Pay out + invoiceMark paid with Store Credit → a real Shopify coupon is issued; download the invoice.
Admin · Payouts
Finish on brandingChange the brand colour & logo in Settings → Branding and show the whole app + portal + signup update instantly.
Admin · Branding
Tip: keep both apps running (API on :4000, web on :3000) and have the Shopify admin open in another tab so the "real code appears in Shopify" moment lands.

11 How to publish & go live

From laptop to the internet. Two paths: host it as a hosted web app now, or turn it into a listed Shopify App later.

Path A · Hosted web app (now)
  • Database → Neon / Supabase / Railway Postgres
  • API (NestJS) → Railway or Render
  • Web (Next.js) → Vercel
  • Set env: DATABASE_URL, SHOPIFY_SHOP, SHOPIFY_ADMIN_TOKEN, WEB_URL
  • Run prisma migrate deploy on the live DB
  • Point the web app's API URL at the deployed API
Path B · Shopify App Store (later)
  • Shopify Partner account
  • Convert custom-app token → public app OAuth
  • Add billing API (subscription pricing)
  • App listing, privacy policy, review submission
  • Register webhooks for orders/refunds
Provision PostgresCreate a managed database, copy its connection string.
Neon / Railway
Deploy the APIPush apps/api, set env vars, run migrations. Note the public API URL.
Railway / Render
Deploy the web appPush apps/web to Vercel, point its API base at the live API URL.
Vercel
Connect the storeAdd the store's custom-app token in env, verify from Settings → Integrations.
Shopify
Harden for productionAdd SMTP email, order/refund webhooks, and secure affiliate login before real users.
Hardening