Web app · storefront · checkout · orders
React SPA catalog
Storefronts are often shown as screenshots or on a heavy CMS. This is a pure React SPA with its own brand style and everything a shopper expects from a store: search understands text typed in the wrong keyboard layout, filters never lead to empty results, and a link to a selection can be sent to a chat. The browser’s Back button works as on a regular website. The cart suggests what to add to reach free delivery, and a removed item comes back with one button. Payment isn’t charged in the demo — it’s a stub, as in the other demos without a payment gateway.
Scenario: Polka, a store of tableware and kitchen goods — fictional.
Open the demo
The cart, favorites and orders are stored in the browser; “Start over” in the header clears everything. On a phone, filters open as a bottom sheet.
The app runs in your browser: nothing is sent to a server.
What the demo shows
How to try it
Find a product
Type a word in the wrong keyboard layout in the search — the store understands what you meant and shows suggestions.
Narrow the results
Material “Wood” and price up to ₽2,500 — the counters show how many remain. Copy the page URL: it opens the same selection.
Fill the cart
Heart a product, add it to the cart and enter the promo code ПОЛКА10. Remove an item and bring it back with the “Undo” button.
Check out and track
Contacts → delivery window → payment (a stub). Then open “My orders”: statuses, repeating and cancellation are there.
No paid neural networks
The catalog and stock are hard-coded; the cart, favorites and orders are stored only in the browser; order statuses advance on a clock rather than warehouse events; payments and availability notifications aren’t sent; product photos are generated. In a production project the storefront calls the catalog and stock API, and orders, statuses and subscriptions live on the server.
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 catalog and stock API, server-side search with morphology
- Cart and favorites synced across devices
- An idempotent order POST, a payment webhook, statuses from the warehouse and courier service
- Promo codes and delivery slots from an admin panel, SMS when items are back in stock
- Metrics: searches without results, add-to-cart, checkout started, purchase
Stack
- All demos by stack:
- React
- TypeScript
- React 19
- TypeScript
- Vite
- Tailwind CSS
Developer’s comment
Anton Goncharov
AI systems developer · Python
For business
- Customers find products, build a cart and check out on their own — fewer manual orders in chat.
- A link to a selection and “Repeat order” bring the buyer back without extra steps.
- Back-in-stock subscriptions and suggestions up to free delivery keep people from leaving empty-handed.
For developers
- Search, facets, promo codes, slots, statuses and address parsing are pure functions with tests.
- Page state is in query parameters via the History API: “Back” and links work without a router.
- A facet’s counter is calculated without its own selection — a click never leads to an empty result.
Tips
Tip 01
Keyboard layout correction and search suggestions are cheaper than any advertising: “nothing found” is a lost buyer.
Tip 02
Generate an idempotency key for the order on the client and accept it on the server — otherwise a double click costs more than any discount.
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 · 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
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