Window Calculator Builder

JSON-керовані ціни вікон для будь-якого виробника.

Універсальний конструктор калькуляторів вікон, що генерує динамічні цінові калькулятори з JSON-конфігурації. Побудований для виробників і дилерів вікон, щоб запустити кастомізовані, брендовані калькулятори за хвилини.

Галузь: Комерція · Інструменти
Технології: React 18 + TypeScript · Vite 5 · Express 4 · Tailwind v3 + Lucide · Monaco editor · Hetzner + Cloudflare

Window Calculator Builder — st-ai.com.ua

У цифрах

Конфіг-кероване: JSON
Express + nginx: SSR
Редактор у браузері: Monaco
Локальний dev: Lando

01 — Про проєкт

Движок калькулятора, а не калькулятор

Усі дилери вікон потребують одного й того ж: конфігуратора, що рахує ціну з розмірів, профільної системи, склопакета, фурнітури, типу відкривання, аксесуарів і знижок. Кожен дилер будує це з нуля. Цей — движок: одна React + Express застосунок, чия логіка цін, брендинг, копірайтинг і контент керуються JSON-конфігом на тенант.

Адмінка на Monaco дозволяє не-розробнику редагувати конфіг у браузері з повною валідацією схеми. Той самий конфіг живить і клієнтський калькулятор, і SSR-головну (Express рендерить для SEO; React гідратує для інтерактивності).

Розгорнуто через GitHub Actions на Hetzner-сервер, Cloudflare попереду. Перший тенант — дилер профілів Steko / IDEAL / Deceuninck — у проді на st-ai.com.ua.

02 — Виклик

Дилери вікон щокварталу потребують кастомних калькуляторів (нові профільні лінії, нові склопакети, нові знижки). Хардкод кожного варіанта коштував би тиждень розробки на тенант.

03 — Рішення

Один React + Express застосунок, де вся цінова логіка (типи вікон, профілі, склопакети, розміри, опції, формули, валюта) живе в одному JSON-конфізі на тенант. Новий тенант = новий файл конфіга. Monaco-редактор + валідація схеми в адмінці.

04 — Що відвантажується

Шість частин, що тримають це разом

01
JSON-керований калькулятор
Кожен тип вікна, профіль, склопакет, розмір і формула ціни живе в одному файлі конфіга. Новий тенант = один JSON, без змін коду.
02
Monaco-редактор конфігів
JSON-редактор у браузері з валідацією схеми, підсвічуванням і live-прев'ю. Не-розробники можуть редагувати конфіг тенанта з адмінки.
03
SSR головна
Express рендерить головну на сервері для SEO; React гідратує зверху для інтерактивності. Секції фронтпейджа per-tenant.
04
Адмін-редактор фронтпейджа
Drag-to-reorder редактор секцій з завантаженням зображень (10 МБ ліміт), live preview, контент per секція.
05
Авто-деплой через GitHub Actions
Push до main → typecheck + build + rsync на Hetzner + reload nginx. Cloudflare Origin cert для HTTPS. Один SSH-крок.
06
Lando — паритет локального dev
Той самий стек nginx + Node + JSON-сховище працює локально через Lando. App на window.lndo.site, API на api.window.lndo.site. Нуль "у мене працює".

05 — Стек

React 18 + Express 4 + Monaco

Стиснутий, нудний стек навмисно. Vite для SPA, Express для SSR + JSON CRUD API, Tailwind для стилів, Zustand для стейту, Monaco для редактора конфігів.

React 18 + TypeScript: SPA + адмінка · Zustand · React Router
Vite 5: Frontend build · HMR
Express 4: JSON CRUD API + SSR-маршрути (/ssr/*)
Tailwind v3 + Lucide: Тема per-tenant через CSS vars
Monaco editor: JSON-редактор у адмінці зі схемою
Hetzner + Cloudflare: Origin cert, GitHub Actions деплой

Потрібен калькулятор для твоєї продуктової лінійки?

Вікна, двері, гаражні ворота, кухонні шафи, кастомний префаб — будь-що з розмірами × матеріалом × опціями × знижкою. JSON-керованість означає, що нові тенанти відвантажуються за день.

Почати проєкт →Інші роботи

Наступний проєктВідпочинок · США