Web app · finance · comparison
Mortgage calculator
An agency client sees an advertised 4.9% and doesn’t realize the payment will double in three years, and that the “Family” program isn’t available to them without a child under 6. The calculator checks each program’s conditions against the deal and the borrower, builds a schedule with the rate change and shows whether the bank will approve such a debt-to-income ratio.
Scenario: Klyuch real estate agency — fictional: apartment and mortgage selection in Yekaterinburg.
Open the demo
Deal parameters on the left, programs and schedules on the right — easier on a wide screen.
The app runs in your browser: nothing is sent to a server.
What the demo shows
How to try it
Look at the programs
For a family with a child, three of five fit; for “Resale housing” you can see why not.
Choose “Developer rate”
The lowest payment of all, but the calculator warns how much it will grow in three years.
Add an early payment
In the “Early repayment” tab, ₽500,000 after a year shortens the term and saves on interest; switch to reducing the payment.
Check the budget
Lower the income — the debt-to-income ratio goes over 50%, and you see what loan the bank would approve.
No paid neural networks
The banks, rates and limits are fictional, and the calculation runs in the browser. The broker request isn’t sent anywhere. In a production project the program catalog comes from an admin panel or a bank API, and the request with the calculation goes to the CRM.
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
- A program catalog from an admin panel: rates, subsidized periods, limits and borrower conditions
- A CRM request with the chosen program, schedule and a link to the calculation
- Integration with bank or mortgage broker APIs: pre-approval without a visit
- A calculator widget on the developer’s property pages
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 · George S. Clason
The Richest Man in Babylon
Overpayment, early repayment and debt-to-income on one screen: you can see what the loan will cost and how to cut the expense.
Developer’s comment
Anton Goncharov
AI systems developer · Python
For business
- Customers see all programs at once and understand why some don’t suit them — before applying, not after a bank rejection.
- The developer’s promotional rate is shown honestly: with the payment after the preferential period.
- Debt-to-income ratio and the tax deduction answer “can I afford it?” — applications arrive prepared.
For developers
- The schedule is built month by month: the annuity is recalculated when the rate changes and after early repayments.
- Program conditions are catalog data; the eligibility check returns rejection reasons as text.
- Calculation in the browser, state in the URL and localStorage; 15 tests on the math.
Tips
Tip 01
Keep rates outside the markup: the central bank and banks change them more often than the site is deployed.
Tip 02
Calculate debt-to-income from the payment after the preferential period — that’s the one the bank looks at.
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 · 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