Window Calculator Builder

JSON-driven window pricing for any manufacturer.

Universal window-calculator builder that generates dynamic pricing calculators from JSON configuration. Built for window manufacturers and dealers to spin up customised, branded calculators in minutes.

Sector: Commerce · Tools
Stack: React 18 + TypeScript · Vite 5 · Express 4 · Tailwind v3 + Lucide · Monaco editor · Hetzner + Cloudflare

In numbers

Config-driven: JSON
Express + nginx: SSR
In-browser editor: Monaco
Local dev parity: Lando

01 — About

A calculator engine, not a calculator

Window dealers all need the same thing: a configurator that quotes a price from dimensions, profile system, glass package, hardware, opening type, fittings and discounts. Every dealer builds it from scratch. This one is the engine — a single React + Express app whose entire pricing logic, branding, copy and content is driven by a per-tenant JSON config.

A Monaco-based admin lets a non-developer edit the config in the browser with full schema validation. The same config drives both the customer-facing calculator and the SSR home page (Express renders for SEO; React hydrates for interactivity).

Deployed via GitHub Actions to a Hetzner box, Cloudflare in front. The first tenant — Steko / IDEAL / Deceuninck profile dealer — is live in production at st-ai.com.ua.

02 — Challenge

Window dealers need bespoke calculators every quarter (new profile lines, new glass packages, new manufacturer discounts). Hard-coding each variant would cost a week of dev time per tenant.

03 — Solution

Single React + Express app whose entire pricing logic (window types, profiles, glass packages, dimensions, options, formulas, currency) lives in one JSON config per tenant. New tenant = new config file. Monaco editor + schema validation in the admin.

04 — What ships

Six pieces holding it together

01
JSON-driven calculator
Every window type, profile, glass package, dimension and pricing formula lives in one config file. New tenant = one JSON, no code change.
02
Monaco config editor
In-browser JSON editor with schema validation, syntax highlighting and live preview. Non-developers can edit a tenant config from the admin panel.
03
SSR homepage
Express renders the homepage server-side for SEO; React hydrates on top for interactivity. Per-tenant frontpage sections (profile catalogue, glass packages, gallery, contact).
04
Admin frontpage editor
Drag-to-reorder section editor with image uploads (10 MB cap), live preview, and per-section content (titles, body text, images, prices).
05
Auto-deploy via GitHub Actions
Push to main → typecheck + build + rsync to Hetzner + nginx reload. Cloudflare Origin cert for HTTPS. Single SSH step.
06
Lando local dev parity
Same nginx + Node + JSON storage stack runs locally via Lando. App at window.lndo.site, API at api.window.lndo.site. Zero "works on my machine" drift.

05 — Tech

React 18 + Express 4 + Monaco

Tight, boring stack on purpose. Vite for the SPA, Express for the SSR + JSON CRUD API, Tailwind for styling, Zustand for state, Monaco for the config editor.

React 18 + TypeScript: SPA + admin · Zustand · React Router
Vite 5: Frontend build · HMR
Express 4: JSON CRUD API + SSR routes (/ssr/*)
Tailwind v3 + Lucide: Per-tenant theme via CSS vars
Monaco editor: In-admin JSON config editor with schema
Hetzner + Cloudflare: Origin cert, GitHub Actions deploy

Need a calculator for your product line?

Windows, doors, garage doors, kitchen cabinets, custom prefab — anything with dimensions × material × options × discount. JSON-driven means new tenants ship in a day.

Start a project →View other work

Next projectOutdoor · USA