Case study · Full-stack web app
A landing-page builder with a lead-to-order pipeline built in.
Noah lets a marketing team design a landing page from raw HTML, publish it, and turn every submission into a tracked sales record — from first lead to a confirmed order — inside one console. No page-builder subscriptions, no spreadsheets, no copy-pasting between tools.
The concept
One app, two audiences, one database.
The team works inside a private console; the public sees only the finished, published pages. Both are the same application over a single MongoDB, so a page you build is instantly the page a visitor lands on — and every submission flows straight back into the console as a lead.
Build
Paste HTML into the editor and drop in placeholder tokens where the form and its fields should appear. Style each field, set the button, and preview it live.
Publish & collect
Publishing makes the page public at its own URL. Visitors submit the form; each submission is validated on the server and stored as a structured lead, then the visitor is forwarded onward.
Convert & confirm
Promote a lead to an opportunity, then confirm it with an order number. Export leads and opportunities to CSV whenever you need them elsewhere.
How it works
Design in HTML, place the form with tokens.
Instead of a rigid drag-and-drop, the builder keeps your HTML exactly as designed and replaces small placeholder tokens with real, working form elements. It's the flexibility of hand-written markup with the convenience of a form builder.
Renders the whole form — every field plus the submit button — wherever you place it.
Places one specific field inline, so you can weave inputs into your own custom layout.
Places the submit button on its own — with your chosen label and colors.
The pipeline
Interactive demo
Run the whole flow, right here.
This is a self-contained simulation of the real product. Edit the page, submit as a visitor, then convert and confirm the order in the console. Nothing leaves your browser.
Try editing the copy, or replace {{form}} with {{field:name}} and {{submit}}.
Technology
Built for correctness and speed.
Framework & language
Next.js 14 (App Router) with React Server Components for pages and Client Components for interactivity, all in TypeScript. API logic lives in Next.js route handlers.
Data
MongoDB via Mongoose models — landing pages, leads, opportunities, and users — with a connection cached for serverless.
Auth & roles
Signed JWT session cookies with three roles — super admin, admin, and operator. User management is admin-only, enforced in middleware and on the server.
Trust boundary
The browser never decides what a form contains. On submit, the server reloads the page's field definitions, re-validates, and maps each answer to a canonical lead — so the stored data is always trustworthy.
Deployment
Deploys to Vercel on the Node.js runtime; configuration (database, secrets, admin credentials) is supplied entirely through environment variables.
Exports & operations
One-click CSV export for leads and opportunities, per-page publish/draft state, and a live preview & test mode for validating a page before it goes public.
At a glance
Outcome
From a blank page to a confirmed order — without leaving the app.
Noah collapses three separate tools — a page builder, a form service, and a CRM spreadsheet — into a single, coherent workflow. The token system keeps designers in full control of the markup, the server keeps the data clean, and the leads → opportunities → orders pipeline gives the team a clear picture of what's actually converting.