Web app · B2B · proposal in PDF
Price configurator
In B2B an order is built from dozens of options: some combine, some don’t, and the manager recalculates the estimate in Excel and copies it into the proposal. Here the configurator knows the production rules — an opening sash that’s too wide won’t let you send the proposal — and calculates the volume discount, a capped promo code, installments and production time itself.
Scenario: Formula window company — fictional: turnkey PVC windows in Yekaterinburg.
Open the demo
Best on a computer: items and the proposal side by side. On a phone the total is in a bar at the bottom.
The app runs in your browser: nothing is sent to a server.
What the demo shows
How to try it
Look at the order
The kitchen, living room and balcony are already configured — on the right is the total with the volume discount and installation date.
Click a sash
On the diagram the sash toggles: fixed → turn → tilt-and-turn. The hardware price changes instantly.
Widen the living room to 3000 mm
The sashes become 1000 mm each — the configurator shows an error and won’t save the proposal until the sash is made fixed or the window narrower.
Enter the promo code ОСЕНЬ
7% off, but no more than ₽15,000 and no more than 15% combined with the volume discount.
Save the proposal
The proposal gets a number and goes into the history; “Proposal as PDF” opens printing with the letterhead and window diagrams.
No paid neural networks
Prices, rules and promo codes are a demo catalog in the app code, with no server or CRM. Proposal history is stored in this browser. In a production project they’re edited in an admin panel or ERP, and the proposal goes into the CRM deal.
The demo runs without OpenAI, YandexGPT or GigaChat API keys. Wherever a production system calls a model, there’s a local stub with the same interface — so the demo is free, always available and never makes things up.
What a production project adds
- Price list and an option compatibility matrix from the ERP or PIM
- Saving the configuration and proposal to an amoCRM / Bitrix24 deal, numbering from the accounting system
- A proposal on the company letterhead with a stamp, signature and delivery terms
- A link for the customer: they configure windows themselves, and the manager only confirms the measurement
Stack
- All demos by stack:
- React
- TypeScript
- React 19
- TypeScript
- Vite
- Tailwind CSS
Developer’s comment
Anton Goncharov
AI systems developer · Python
For business
- A manager builds an order for all the windows of an apartment in a couple of minutes and sends a quote with a number and validity period.
- An impossible window never makes it into a quote: production rules are checked before sending to the customer.
- Discounts don’t go negative: a promo code with a cap and an overall discount limit are calculated automatically.
For developers
- The catalog, rules and calculation are pure functions with tests: normalize, issues, quote.
- The window diagram is SVG in millimeters from the same sash geometry as the price.
- Order state lives in localStorage and in the URL; PDF is browser printing with a separate quote layout.
Tips
Tip 01
Write compatibility rules as data, not ifs in buttons: they get edited later without a frontend release.
Tip 02
Show why an option is unavailable or a quote is blocked — otherwise the customer thinks the calculator is broken.
Want the same for your business?
Tell me about your task — I’ll tell you what from the demo fits, how long it will take and what I’ll need from you.
Other demos in this section
All demos- live
Web app · speech recognition · neural network in the browser
Voice request
A customer dictates a request by voice, and the manager gets a ready card: name, company, phone, budget, timeline, task and a score — hot lead or not. Speech is recognized by Whisper right in the browser.
- React
- TypeScript
- In-browser neural network
- live
Web app · call in the browser · speech recognition and synthesis
Voice delivery operator
A robot takes phone orders instead of the host: it listens, asks again, checks the address against delivery zones, totals the order and reads it back before confirming. The call runs right in the browser — a “Call” button, no phone number.
- React
- TypeScript
- In-browser neural network
- live
Web app · speech recognition · sales team quality control
Call speech analytics
A sales call becomes a transcript by role, a score against the script and a completed deal card: customer, contacts, interest, the quoted price, the next step and a task for the manager. Speech is recognized by Whisper right in the browser.
- React
- TypeScript
- In-browser neural network
- live
Web app · documents · DOCX and PDF
Proposal and contract generator
A manager fills in a deal form — buyer, products, discount, VAT — and the commercial proposal, supply contract and invoice are assembled on an A4 page before their eyes. The output is Word, PDF or JSON.
- React
- TypeScript
- live
Web app · finance · comparison
Mortgage calculator
Five bank programs on one screen: which suit the client and why the others don’t. A developer-subsidized rate, differentiated payments, early repayment, debt-to-income ratio and the tax deduction.
- React
- TypeScript
- live
Web app · estimate · PDF
Renovation estimate calculator
Room dimensions turn into floor, wall and ceiling areas, and those into work by stage. Labor and materials separately, the timeline based on crew output, a payment schedule and estimate versions for negotiating with the client.
- React
- TypeScript
- live
Web app · storefront · checkout · orders
React SPA catalog
A whole store in the browser: search with suggestions and keyboard layout correction, facets with live counters, links to any filter, favorites, a cart with a promo code and checkout with a delivery slot. Orders are visible in “My orders” with statuses and can be repeated or cancelled.
- React
- TypeScript
- live
Machine learning in Python · runs in the browser
Marketplace review analytics
Reviews from Wildberries, Ozon and Yandex Market via the seller API: scikit-learn models determine sentiment and what buyers write about, an alert fires in the first week of a complaint spike, new topics are discovered automatically, and replies go back through the marketplace API. The models train right in the browser.
- Python
- React
- TypeScript
- live
Website widget · vanilla JS · one line
AI consultant widget
A consultant for any website, installed with a single line: it answers from a knowledge base with a link to the source, collects requests and calls an operator. Written in plain JavaScript without frameworks — the whole widget is 21 KB gzipped.
- Vanilla JS
- live
Website widget · vanilla JS · leads
Quiz lead form
A quiz instead of a long form: six questions with branching and a price estimate at the end. The manager gets a lead rated “hot / warm / cold” with its ad source, and the “Analytics” tab shows at which step people leave.
- Vanilla JS
- live
Python backend · webhooks → amoCRM and Bitrix24
Lead integration hub
Leads from the website, ads, calls, email and bots arrive at webhooks, are normalized, checked for duplicates, routed to managers and delivered to amoCRM and Bitrix24 — with retries when the CRM is unavailable.
- Python
- React
- TypeScript