← Tutti i progettiSaaS · React + Express

Window Calculator Builder

Prezzi finestre JSON-driven per qualsiasi produttore.

Costruttore universale di calcolatori per finestre che genera calcolatori di prezzo dinamici da configurazione JSON. Costruito per produttori e dealer di finestre per lanciare calcolatori personalizzati e brandizzati in minuti.

Settore: Commercio · Strumenti
Tecnologie: React 18 + TypeScript · Vite 5 · Express 4 · Tailwind v3 + Lucide · Editor Monaco · Hetzner + Cloudflare

Window Calculator Builder — st-ai.com.ua

In numeri

Config-driven: JSON
Express + nginx: SSR
Editor in-browser: Monaco
Dev locale parità: Lando

01 — Informazioni

Un motore di calcolatore, non un calcolatore

I dealer di finestre hanno bisogno della stessa cosa: un configuratore che quoti un prezzo da dimensioni, sistema di profilo, pacchetto vetro, ferramenta, tipo apertura, accessori e sconti. Ogni dealer lo costruisce da zero. Questo è il motore — una sola app React + Express la cui logica di prezzo, branding, copy e contenuto è controllata da configurazione JSON per tenant.

Un admin basato su Monaco permette a un non-sviluppatore di editare il config nel browser con validazione schema completa. Lo stesso config alimenta sia il calcolatore client-facing sia la homepage SSR (Express renderizza per SEO; React idrata per interattività).

Deployato via GitHub Actions su box Hetzner, Cloudflare davanti. Il primo tenant — dealer di profili Steko / IDEAL / Deceuninck — è in produzione su st-ai.com.ua.

02 — Sfida

I dealer di finestre hanno bisogno di calcolatori bespoke ogni trimestre (nuove linee di profilo, nuovi pacchetti vetro, nuovi sconti produttore). Hard-codare ogni variante costerebbe una settimana di dev per tenant.

03 — Soluzione

Singola app React + Express la cui logica di prezzo intera (tipi finestra, profili, pacchetti vetro, dimensioni, opzioni, formule, valuta) vive in un config JSON per tenant. Nuovo tenant = nuovo file config. Editor Monaco + validazione schema nell'admin.

04 — Cosa si spedisce

Sei pezzi che lo tengono insieme

01
Calcolatore JSON-driven
Ogni tipo di finestra, profilo, pacchetto vetro, dimensione e formula di prezzo vive in un file config. Nuovo tenant = un JSON, nessun cambio di codice.
02
Editor Monaco config
Editor JSON in-browser con validazione schema, evidenziazione sintassi e preview live. Non-sviluppatori possono editare un config dal pannello admin.
03
Homepage SSR
Express renderizza la homepage server-side per SEO; React idrata sopra per interattività. Sezioni homepage per tenant.
04
Editor admin homepage
Editor sezioni drag-to-reorder con upload immagini (cap 10 MB), preview live, contenuto per sezione.
05
Auto-deploy via GitHub Actions
Push a main → typecheck + build + rsync a Hetzner + reload nginx. Cert origin Cloudflare per HTTPS. Singolo step SSH.
06
Parità dev locale con Lando
Stesso stack nginx + Node + storage JSON gira localmente via Lando. App su window.lndo.site, API su api.window.lndo.site. Zero deriva tra macchine.

05 — Stack

React 18 + Express 4 + Monaco

Stack stretto e noioso di proposito. Vite per la SPA, Express per SSR + API CRUD JSON, Tailwind per styling, Zustand per state, Monaco per l'editor config.

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

Hai bisogno di un calcolatore per la tua linea di prodotti?

Finestre, porte, persiane, mobili cucina, prefab custom — qualsiasi cosa con dimensioni × materiale × opzioni × sconto. JSON-driven significa che nuovi tenant si spediscono in un giorno.

Avvia un progetto →Altri lavori

Progetto successivoOutdoor · USA