← Todos los proyectosSaaS · React + Express

Window Calculator Builder

Precios de ventanas JSON-driven para cualquier fabricante.

Constructor universal de calculadoras de ventanas que genera calculadoras de precios dinámicas desde configuración JSON. Construido para fabricantes y distribuidores de ventanas para lanzar calculadoras personalizadas y de marca en minutos.

Sector: Comercio · Herramientas
Tecnologías: React 18 + TypeScript · Vite 5 · Express 4 · Tailwind v3 + Lucide · Editor Monaco · Hetzner + Cloudflare

Window Calculator Builder — st-ai.com.ua

En cifras

Config-driven: JSON
Express + nginx: SSR
Editor in-browser: Monaco
Dev local paridad: Lando

01 — Acerca de

Un motor de calculadora, no una calculadora

Los distribuidores de ventanas necesitan lo mismo: un configurador que cotice un precio desde dimensiones, sistema de perfil, paquete de cristal, herrajes, tipo de apertura, accesorios y descuentos. Cada distribuidor lo construye desde cero. Este es el motor — una sola app React + Express cuya lógica de precios, branding, copy y contenido se controla por config JSON por tenant.

Un admin basado en Monaco permite a un no-desarrollador editar el config en el navegador con validación de schema completa. El mismo config alimenta tanto la calculadora del cliente como la página principal SSR (Express renderiza para SEO; React hidrata para interactividad).

Desplegado via GitHub Actions a un servidor Hetzner, Cloudflare delante. El primer tenant — distribuidor de perfiles Steko / IDEAL / Deceuninck — está en producción en st-ai.com.ua.

02 — Desafío

Los distribuidores necesitan calculadoras a medida cada trimestre (nuevas líneas de perfil, nuevos paquetes de cristal, nuevos descuentos de fabricante). Hard-codear cada variante costaría una semana de desarrollo por tenant.

03 — Solución

Una sola app React + Express cuya lógica de precios completa (tipos de ventana, perfiles, paquetes de cristal, dimensiones, opciones, fórmulas, moneda) vive en un config JSON por tenant. Nuevo tenant = nuevo archivo de config. Editor Monaco + validación de schema en el admin.

04 — Qué se entrega

Seis piezas que lo mantienen unido

01
Calculadora JSON-driven
Cada tipo de ventana, perfil, paquete de cristal, dimensión y fórmula de precio vive en un archivo de config. Nuevo tenant = un JSON, sin cambios de código.
02
Editor Monaco de config
Editor JSON in-browser con validación de schema, resaltado de sintaxis y preview en vivo. Los no-desarrolladores pueden editar un config desde el panel admin.
03
Homepage SSR
Express renderiza la página principal en el servidor para SEO; React hidrata encima para interactividad. Secciones de portada por tenant (catálogo de perfiles, paquetes de cristal, galería, contacto).
04
Editor admin de portada
Editor de secciones drag-to-reorder con uploads de imagen (cap 10 MB), preview en vivo, y contenido por sección.
05
Auto-deploy via GitHub Actions
Push a main → typecheck + build + rsync a Hetzner + reload de nginx. Cert origin de Cloudflare para HTTPS. Un solo paso SSH.
06
Paridad de dev local con Lando
Mismo stack nginx + Node + JSON storage corre localmente via Lando. App en window.lndo.site, API en api.window.lndo.site. Cero deriva entre máquinas.

05 — Stack

React 18 + Express 4 + Monaco

Stack ajustado y aburrido a propósito. Vite para la SPA, Express para SSR + API CRUD de JSON, Tailwind para styling, Zustand para state, Monaco para el editor de config.

React 18 + TypeScript: SPA + admin · Zustand · React Router
Vite 5: Build frontend · HMR
Express 4: API CRUD JSON + rutas SSR (/ssr/*)
Tailwind v3 + Lucide: Tema por tenant via CSS vars
Editor Monaco: Editor JSON in-admin con schema
Hetzner + Cloudflare: Cert origin, deploy GitHub Actions

¿Necesitas una calculadora para tu línea de productos?

Ventanas, puertas, persianas, gabinetes de cocina, prefab custom — cualquier cosa con dimensiones × material × opciones × descuento. JSON-driven significa nuevos tenants en un día.

Empezar un proyecto →Ver otros trabajos

Siguiente proyectoAire libre · EE. UU.