Next.js website · booking by plate number, photo report, approval
Car service with booking and repair status
Car service customers fear two things: that the price will grow along the way and that they’ll be charged for unnecessary repairs. And the service loses time on “so what’s the status” calls and approvals over the phone. Here the price of the work is visible before booking and depends only on the car class, booking is by plate number — the model and history are filled in automatically — and the slot is chosen based on the real load of the lifts. Everything the mechanic finds beyond the order arrives as a photo report: the customer decides what to do now and what to postpone, and the total is recalculated before their eyes. Postponed work isn’t lost — it waits in the garage along with the visit history and a mileage-based maintenance reminder.
Scenario: Tork car service in Kazan with four bays and demo customer Dmitry with a Hyundai Creta — fictional: the car is in for maintenance, and order No. 2417 awaits a decision on three findings — brake pads, a CV joint boot and a leaking valve cover.
Open the demo
Repair status is behind the button in the header: order 2417, last phone digits 4237. The garage is in the menu and the footer.
Leads from the demo website are visible only to you, in the “Owner dashboard”: the server validates the form and stores nothing.
What the demo shows
How to try it
Book by plate number
On the first screen, press “Е 901 КХ 116” and the arrow — the form finds the Hyundai Creta in the database. Add a job, choose a slot and leave your name and phone — you get a calendar file.
Describe what’s knocking
In the “What’s knocking?” block, write “knocking in the front over bumps” — you’ll see likely causes with percentages and a price. “Book with this description” moves the jobs into the booking form.
Approve repairs from photos
“Repair status” in the header → “Fill in” → order 2417. Postpone the boot — the total drops — approve the rest and move the stages with the demo button to “Ready for pickup”.
Pay and look into the garage
Pay via SBP — the repair appears in the garage history, and the postponed job in the list with a booking button. Enter a mileage of 61,000 — maintenance becomes overdue; turn on a reminder.
Open the owner dashboard
The booking, approval, payment and reminder are in the “Leads” tab — as in the service’s CRM.
No paid neural networks
There are no paid neural network requests: the “what’s knocking?” diagnosis is built on keyword rules with the service’s price list; in a production version a language model with the price list and repair statistics takes its place. Bay load is a deterministic schedule stub, the same for all visitors. Payment is simulated, the order and garage state are stored only in your browser, and leads are visible only to you in the “Owner dashboard”. The service, mechanics, reviews and prices are fictional.
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
- Bay schedules, work orders and history from the service’s software (1C:Car Service, Rapid, YCLIENTS) via API, with the site as a front end to the same data
- Plate number and VIN lookups in databases (traffic police, Avtokod) filling in the model, engine and trim
- The mechanic takes the photo report on a tablet in the service app, and the customer gets a link via SMS, Telegram or Max
- Payment via acquiring with SBP (YooKassa, T-Bank) with a fiscal receipt under 54-FZ; leads and approvals go to amoCRM or Bitrix24
- Symptom diagnosis by a language model (YandexGPT or GigaChat) with the service’s price list and real repair statistics in the prompt
Stack
- All demos by stack:
- Next.js
- React
- TypeScript
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- Server Actions
Based on
Books and university courses whose ideas are at work in this demo.
Book · William Arntz, Betsy Chasse, Mark Vicente
What the Bleep Do We Know!?
In the “What’s that knocking?” check the site asks a clarifying question — “when does it happen?” — instead of giving a ready answer right away, and accuracy goes up.
Developer’s comment
Anton Goncharov
AI systems developer · Python
For business
- The price of the work is visible before booking, and customers approve anything found beyond the order themselves from photos: the main fear of “they’ll overcharge” disappears, and the average bill grows thanks to honestly shown findings.
- Repair status and a payment link spare the service advisor “so, what’s happening?” calls — they spend time on cars, not on the phone.
- Postponed work and a mileage-based service reminder bring the customer back to you rather than to a competitor near their home.
For developers
- The license plate is normalized to Cyrillic with a check of the format and allowed letters, the VIN by length and alphabet without I, O and Q; the model year is read from the tenth character.
- Free slots are the intersection of the busy intervals of four service bays with the total duration of the chosen work; the stub schedule is deterministic, so it’s the same for every visitor and in tests.
- The invoice, stages and service forecast are pure functions with tests; the forecast calculates this car’s driving rate from visit history and picks what comes first: mileage or time.
Tips
Tip 01
Show findings as a photo with clear urgency and a “postpone” button: a customer who is allowed to say no agrees more often.
Tip 02
Book by license plate rather than a make from a list: the customer won’t get the model wrong, and the service sees the car’s history right away.
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
Next.js website · service landing page
Dental clinic landing page
A one-page clinic website that brings in patients: a quiz suggests a treatment, a calculator prices the plan with installments, online booking shows doctors’ free time, and an AI consultant answers from the price list. The headline is A/B-tested; leads and goals are visible in the owner dashboard.
- Next.js
- React
- TypeScript
- live
Next.js website · B2B, multi-page
Manufacturing company website
A multi-page website for a steel structures plant that sells on its own: a calculator prices a building with a live drawing, a builder assembles a technical specification, case studies filter by industry, you can apply for a job with a CV, and site search understands queries in plain words.
- Next.js
- React
- TypeScript
- live
Next.js website · catalog, map, comparison
Real estate catalog with smart search
A real estate agency’s apartment catalog: type “two-bedroom near the metro under 12 million” and the search sets the filters itself, shows apartments on a city map, compares up to four and sends new ones to Telegram.
- Next.js
- React
- TypeScript
- live
Next.js website · AI translation, per-language SEO
An export website in four languages
A website for an Altai honey exporter in Russian, English, Chinese and Arabic: translated page URLs, per-language SEO, a wholesale price calculator with delivery and a translation studio that checks the neural network’s draft against a glossary.
- Next.js
- React
- TypeScript
- live
Next.js website · customer account, AI assistant, Telegram
Customer account portal
A print shop’s customer account: orders with production stages, layout approval with comments right on the layout, invoices paid via SBP, documents with an electronic signature, a new order with a price calculation, a chat with an AI assistant and a manager, notifications in Telegram.
- Next.js
- React
- TypeScript
- live
Next.js website · Python in the browser, AI mentor
Online school with a student account
An online analytics school: a landing page with a Python task checked right in the browser, a level test with a personal curriculum, installments with a tax deduction estimate, a student account with homework and AI review, an AI mentor that answers from course materials and a certificate verified by QR code.
- Next.js
- React
- TypeScript
- live
Next.js website · case analysis, claim letters, calculators
Law firm with AI case analysis
A law firm website: describe your situation in your own words right in the hero, get an AI analysis with an assessment of prospects, a claim letter in Word, court fee, penalty and limitation period calculators, a document checklist, case progress in a client account, a price builder and booking with a lawyer.
- Next.js
- React
- TypeScript
- live
Next.js SaaS website · sandbox, dashboard, API
SaaS: AI replies to WB and Ozon reviews
The website and dashboard of a SaaS service that replies to Wildberries and Ozon reviews: a sandbox with review analysis and checks, autopilot by rating, a queue with approval, topic analytics, plans with a payback calculator, store connection by key, an invoice by tax ID and API documentation with a live console.
- Next.js
- React
- TypeScript
- live
Next.js restaurant website · menu, table booking, delivery
Restaurant with delivery
A restaurant website with delivery: a menu with allergen and diet filters, AI dinner selection from a plain phrase, table booking on a floor plan showing free tables for the chosen time, a cart with delivery zones, a minimum order and promo codes, and order tracking with the courier on a map.
- Next.js
- React
- TypeScript
- live
Next.js fitness studio website · booking, memberships, account
Fitness studio
A small-group fitness studio website: a weekly schedule with spots and two-click booking, a waiting list that moves you into the group automatically, memberships you can freeze from your account, an AI 4-week training plan from five questions and a personal account with attendance stats.
- Next.js
- React
- TypeScript
- live
Next.js IT conference website · program, tickets, networking
Conference website
A two-day conference website: a program by room and track with a personal schedule, AI selection of talks without overlaps by role and free text, tickets in price waves with promo codes and a team discount, a QR code for every attendee checked at the entrance, and networking with matching and meetings during breaks.
- Next.js
- React
- TypeScript
- live
Next.js corporate logistics website · calculator, tracking, AI request
Transport company website
A transport company’s corporate website: a calculator that compares groupage and a dedicated truck at once, shipment tracking with the truck on a map, AI parsing of a request from an email or waybill with missing fields highlighted, a map of warehouses and terminals with a storage calculation, a carrier application with an eligibility check, and company details with checksum validation.
- Next.js
- React
- TypeScript