ProjectFlowPro
Menu

Case study · Frontend

Checkout-to-activation storefront

Implemented · tested

An online store where a small business chooses a website, pays by card and launches it on its own address without contacting anyone. After payment it receives an activation link, picks a name or connects its own domain, and the site is set up automatically.

  1. 02Review it
    A template product page with its price, features and layout previews
Actual capture Template Hub storefront, local build on its development API · demo@example.com · Stripe Checkout in test mode; nothing purchased.

Purpose

An online store where a small business chooses a website, pays by card and launches it on its own address without contacting anyone.

The problem

A small business should be able to buy and launch a website without a sales call: choose it, pay, and pick a name or connect its own domain.

What it contributes

Template distribution, in the WebWorks line: each template is registered once and sold from a product page generated from its catalogue record.

Principal capabilities

  • Frontend

    A Next.js 15 and React 19 storefront exported as static files, with product pages generated at build time from a typed catalogue. After payment, the activation flow lets the buyer choose a platform subdomain or a custom domain; reserved names are rejected in the browser as a mirror of the server-side rule, and the flow recovers from failed attempts.

  • Integrations

    Checkout creates a payment session through an API endpoint, in one-time or subscription mode with a setup fee, monthly price and trial period. An emailed one-time token opens the activation flow.

  • Data

    A build toolchain registers each template once. It mints a single identifier shared by the template configuration, the storage prefix, the catalogue records and the preview URL, written in one conditional transaction, then generates the product page from the catalogue record and refuses output that still describes another template.

Built with

  • TypeScript
  • React
  • Next.js
  • Stripe

Implementation evidence

  • Implemented and tested.

Back to WebWorks website ecosystem

Visual evidence

  1. 01Choose a template
    Template Hub catalogue: two templates with their purchase and subscription prices
  2. 02Review it
    A template product page with its price, features and layout previews
  3. 03Pick a package
    Pricing: the activation email filled with demo@example.com and three launch packages
  4. 04Pay on Stripe
    Stripe Checkout in test mode for the Landing Page Website package: $49 setup, then $49 a month after 120 free days
Actual capture Template Hub storefront, local build on its development API · demo@example.com · Stripe Checkout in test mode; nothing purchased.

Part of

WebWorks

Turn proven website designs into knowledge, create new sites from it, then sell and launch them automatically.

Other case studies in this project

  • Backend / Python

    WebWorks Generator (WWG)

    Turns an existing web page into a reusable React/Next.js page, separating components, content, theme and local assets. It then verifies the result against the source one dimension at a time, so approval is attached to the exact generated artifact rather than assumed from a successful build.

    Implemented · 9 production builds recorded, 5 operator-approved · 143 Python test files

  • Frontend

    Review console

    A local review harness for checking generated pages stage by stage. It renders the same component tree with successive layers enabled so an operator can tell whether a defect came from components, runtime behaviour, content, theme or the final composition before approving a dimension.

    Implemented · local · per-page rendering documented

  • Data

    Knowledge Base (KB)

    The design knowledge of the WebWorks line. It learns from the generator's processed pages how website pages are designed (layouts, sections, blocks, style systems, and card and background treatments) and supplies that knowledge to WebsiteCreator.

    Implemented · supplies WebsiteCreator

  • Design method

    WebsiteCreator

    Creates new websites. It takes the Knowledge Base’s understanding of page design, writes a design guide for each site on a set structure of rules, in accordance with the Knowledge Base, and builds the pages from it.

    Implemented · builds new sites from Knowledge Base design guides

  • Cloud infrastructure

    Payments to provisioned HTTPS sites

    Automation that turns a card payment into a live, secure website. It records the purchase, sends an activation link, creates the customer's site and, if they bring their own domain, walks them through DNS setup and issues the certificate automatically, checking that everything works before declaring the site live.

    Implemented · tested (static) · deployment documented