ProjectFlowPro
Menu

Case study · Frontend

Review console

Implemented · local · per-page rendering documented

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.

Overview

The review console is built with Next.js 15, React 19 and TypeScript. It renders the generated page through five ordered layers: components, runtime, content, theme and composed. Because every layer uses the same component tree, a visual or behavioural defect can be attributed to the stage that introduced it instead of being diagnosed only from the finished page.

The operator console exposes the same 17 acceptance dimensions used by the generator and records approval for each page against that shared contract. Per-page staged routes import only the code needed for one page, so the documented review-rendering cost is proportional to the page being inspected rather than the full catalog. The console is part of the local generation and verification workflow.

Its role is review and recorded approval, not autonomous acceptance.

Visual evidence

WebWorks console
12 templates 48 pages 3 pending 2 needs you

template / page

example-trades / home

12/17 dimensions accepted
source full evidence reference
source accepted
flattened accepted
identified accepted
capture accepted
sections accepted
chrome accepted
targets accepted
plugins accepted
blocks accepted
roles accepted
components accepted
theme accepted
content issues
assets no gate
runtime waiting
emitted waiting
composed waiting

Next required review

Review Content

Full pipeline

Dimensions

13 of 17 run
theme ACCEPTED
reopen
content ISSUES

heading text truncated in hero

resolve raise issue
Recreated · synthetic data · not a screenshot Operator console for one page: seventeen dimensions and the next review, recreated from the source.

Operator console: seventeen dimensions per page. Recreated from the source with synthetic data; not a screenshot.

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

  • 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

  • Frontend

    Checkout-to-activation storefront

    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.

    Implemented · tested

  • 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