Web app · estimate · PDF
Renovation estimate calculator
A contractor calculates an estimate in a spreadsheet: meters, jobs, finish class, margin. One wrong row and the client sees a different total, and there’s no answer to “when will you finish”. Here the estimate is built from room dimensions: walls are calculated minus doors and windows, wet work is available only in the kitchen and bathroom, and the timeline and payments are derived from the stages.
Scenario: Masterskaya renovation company — fictional: turnkey apartment renovation.
Open the demo
Add a room, change the dimensions and remove unneeded work — the total and timeline update instantly.
The app runs in your browser: nothing is sent to a server.
What the demo shows
How to try it
Look at the apartment
Five rooms of a resale apartment are already set up — on the right are the total, the price per m² and the timeline.
Switch to a new build
Demolition becomes unavailable and labor gets 10% cheaper — the estimate and timeline are recalculated.
Save a version and change the class
Save a version, set the living room to “Premium” and open “Versions” — you see what got more expensive and by how much.
Open timeline and payments
Assign two crews — the timeline shrinks, and payments are tied to the new stage dates.
No paid neural networks
Prices, output norms and coefficients are a demo catalog in the app code. Versions are stored in this browser. In a production project they’re edited in an admin panel, and the estimate goes into the contract and 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
- Prices, output norms and class coefficients in an admin panel
- Property templates — studio, one-bedroom, office — and measurements from a floor plan
- Estimate → contract, payment schedule and invoices in the same document package
- Photo records of stages and certificates of completion in the client’s account
Stack
- All demos by stack:
- React
- TypeScript
- React 19
- TypeScript
- Vite
- Tailwind CSS
Based on
Books and university courses whose ideas are at work in this demo.
Book · Robert C. Martin
The Clean Coder
An estimate with a contingency reserve and versions for negotiation: it allows for risks instead of being one optimistic number.
Developer’s comment
Anton Goncharov
AI systems developer · Python
For business
- The customer sees a transparent breakdown by stage and room, with labor and materials separately.
- The timeline and payment schedule are derived from the estimate — there’s an answer to “when will you finish?” right away.
- Versions with comparison help negotiate: you can see exactly what got cheaper.
For developers
- Geometry, rules and the estimate are pure functions with tests: geometry, allowed, estimate, payments, diff.
- Duration is the amount of work divided by the crew’s output; stages follow one another.
- The last payment covers the remainder so the sum of payments matches the total to the ruble.
Tips
Tip 01
Put the contingency on a separate line: it’s more honest to the customer than hiding it in every item.
Tip 02
Calculate walls minus openings — otherwise the estimate diverges from the measurement by 10–15%.
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 · B2B · proposal in PDF
Price configurator
A manager builds an order for all the windows in an apartment: type, size, sashes on a diagram, profile, glazing unit and color. Production rules are checked instantly, discounts and installments are calculated automatically, and a numbered proposal goes out as a PDF.
- 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 · 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