Portfolio Studio
Start a project
Functional DemoConsumer Application

ONE FOR ONE

Production-grade buy-one-give-one soccer-ball ecommerce site with a live donation tracker on every order.

What it solves

Built for Consumers buying soccer balls from a buy-one-give-one impact brand.

Overview

ONE FOR ONE is an ecommerce site for a Buy 1, Give 1 soccer ball brand where every paid order increments a live donation tracker by the number of balls purchased. It sells volume-discounted bundles through Stripe Checkout with full, idempotent webhook handling and strictly server-side pricing. A direct-response sales funnel offers per-slug landing pages with post-purchase upsells charged off-session. An admin dashboard covers revenue, orders, customers, funnels, a fulfillment queue, milestones, manual donation adjustments, and CSV export, behind JWT cookie auth.

What this demonstrates

Server-authoritative ecommerce: prices are computed server-side, Stripe webhooks are idempotent so retries are safe, and upsells use off-session Stripe charges. It includes a configurable funnel system, a fulfillment-service abstraction with manual/placeholder modes ready to swap in a 3PL, a live database-derived donation tracker, and signed httpOnly JWT admin sessions.

What makes it different

A Buy 1, Give 1 soccer-ball store where every paid order increments a live donation tracker by the number of balls purchased — counts come from the orders database, never hardcoded.

  • Server-side pricingThe client never dictates prices; every price is recomputed server-side from the bundle slug.
  • Live donation tracker from real ordersDonation counts are aggregated from the orders database, not hardcoded.
  • Webhook is the single source of truthPayment confirmation and donation impact are recorded only from the verified Stripe webhook.
  • Idempotent by designWebhook handlers and upsell charges use unique keys so Stripe retries and double-clicks never double-count.
  • Off-session upsellsPost-purchase charges hit the saved payment method — the customer never re-enters payment.
  • Fulfillment behind an abstractionProviders like ShipBob or ShipStation swap in at one file without touching the webhook.

Core capabilities · 14

  • Storefront

    Bundles of 1/3/5/10/25/50/100 balls with volume-discount pricing.

  • Stripe Checkout & Webhooks

    Checkout sessions plus handling of completed, succeeded, failed, and refunded events.

  • Server-Side Pricing

    Resolves the cart against the database so client-supplied prices are ignored.

  • Live Donation Tracker

    Order-derived donation aggregates shown on a public tracker.

  • Donation Milestones

    Milestones auto-marked when their target donation count is reached.

  • Direct-Response Sales Funnel/funnel/[slug]

    ClickFunnels-style landing pages with bundle selectors and UTM attribution.

  • Post-Purchase Upsell Engine

    Off-session charges against the saved card with per-offer idempotency keys.

  • Funnel Analytics

    Per-funnel visits, conversion rates, revenue, and balls donated.

  • Fulfillment Abstraction

    Provider interface with placeholder and manual modes, ready for a real 3PL.

  • Supplementary Fulfillment

    Routes post-dispatch upsell items into a secondary shipment via the same provider seam.

  • Admin Dashboard

    Revenue, orders, customers, funnels, fulfillment queue, milestones, and CSV export.

  • Admin Auth

    JWT httpOnly cookie session signed with an admin secret, 8-hour TTL.

  • Customer Order Tracking

    Order lookup by order number plus email.

  • Manual Donation Adjustments

    Admin donation ledger with manual entry and audit.

How it works

Order flow

  1. Customer clicks Checkout; server resolves the cart against real DB prices
  2. Server creates a pending order and a Stripe Checkout Session
  3. Customer completes payment on Stripe
  4. Webhook verifies the signature and marks the order paid
  5. Insert a donation impact equal to total balls (idempotent per order)
  6. Update cached aggregates and auto-mark any milestones reached
  7. Dispatch to the configured fulfillment provider
  8. Customer tracks the order by number and email

Sales funnel

  1. Ad click lands on the funnel landing page with a bundle selector
  2. Stripe Checkout saves the payment method off-session
  3. Idempotent post-checkout finalize redirects forward
  4. Upsell 1: Yes charges the saved card off-session, No skips
  5. Upsell 2 repeats the offer
  6. Thank-you confirmation page
  7. New items route to the original or a supplementary shipment

Key screens

  • Homepage
  • Shop / bundles
  • Product detail + buy panel
  • Mission
  • Live donation tracker
  • Order lookup
  • Order success
  • Funnel landing
  • Upsell pages
  • Thank-you
  • Admin overview
  • Admin orders
  • Admin donations ledger
  • Admin funnels + analytics

Data model

  • Order
  • OrderItem
  • Customer
  • ProductBundle
  • DonationImpact
  • Milestone
  • PaymentRecord
  • SiteSettings
  • Funnel
  • FunnelProduct
  • FunnelSession
  • UpsellCharge
  • FulfillmentRecord
  • SupplementaryFulfillment

How it is built

A single Next.js 14 (App Router) app with a Prisma + Postgres database, Stripe for checkout and webhooks, and JWT cookie-based admin authentication.

APIs and services

Stripe

Classification

Industries
Retail
Capabilities
PaymentsDashboardsAnalyticsReportingAuthentication
Technologies
Next.jsNode.jsReactTailwind CSSTypeScriptPostgreSQLPrismaZod

Related work

Marketing Master

Functional Demo

Multi-tenant AI content and growth operating system that runs a portfolio of apps as one AI-managed business.

Building something with similar Payments, Dashboards, Analytics functionality?

Start a project and reference this one — the conversation begins with what you have already seen.

Start a project