Next.js corporate logistics website · calculator, tracking, AI request
Transport company website
A logistics customer wants three things: to know the price without waiting for a manager, to understand where their cargo is right now, and not to retype a request from an email into a form. Here the price is calculated in two options at once with a delivery date, a shipment number shows the truck on the route, and an email or waybill turns into a completed request — you only add what wasn’t in the text.
Scenario: Meridian transport company from Voronezh — fictional: 18 cities, 7 warehouses and terminals, groupage cargo and trucks from a GAZelle van to a semi-trailer.
Open the demo
Price a refrigerated shipment — groupage will honestly decline, while a dedicated truck shows the load by weight and volume. Paste the sample waybill into the AI request: the name and phone are highlighted as missing. Find shipment МР-240517-3 and try a number with a typo. Requests, notification subscriptions, warehouse bookings and carrier applications appear in the owner dashboard.
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
Price a shipment
On the first screen, choose Moscow → Kazan and 3,000 kg and press “Compare two options”. In the calculator, choose a refrigerated truck and frozen mode — groupage explains why it doesn’t fit.
Place a request
Press “Place a request” and enter the tax ID 7707083894 — the checksum validation rejects it. Change it to 7707083893 and send.
Parse a waybill
In the “AI request” block, press “Waybill”: found fields are highlighted in green, and the name and phone as missing. Fill them in and the price is calculated automatically.
Find a shipment
Enter МР-240533-5 — the site catches the typo. Choose the Voronezh → Yekaterinburg shipment and subscribe to notifications.
Become a carrier
Fill in the application: a company with the tax ID from the hint, trucks, routes and documents — eligibility and trips per week appear right away.
No paid neural networks
There are no paid neural network requests: the email or waybill is parsed by rules and dictionaries right in the browser — cities by prepositions and labels, dates in words and numbers, tonnes and pallets, a tax ID with checksum validation. In a production version the text is understood by a language model, with the city directory, tariff and tax ID check given to it as tools — it won’t invent a city or calculate a price itself. Shipments, their movement and the warehouses are simulated; the company and its details 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
- Tariffs and pricing from a TMS or 1C:Logistics via API, distances from a mapping service (Yandex Maps, OSRM)
- Tracking from GPS trackers (Wialon, Omnicomm) and TMS statuses; notifications via a Telegram bot, an SMS gateway and MAX
- AI request by a language model (YandexGPT or GigaChat) with directories and the tariff as tools; the request goes to the CRM and TMS
- Carrier applications checked against the tax service and the register of unreliable suppliers, with the contract and documents via e-document exchange
Stack
- All demos by stack:
- Next.js
- React
- TypeScript
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- Server Actions
Developer’s comment
Anton Goncharov
AI systems developer · Python
For business
- A price on the website in a minute instead of “leave a request, a manager will call back” — customers compare groupage and a full truck themselves and come with a decision.
- A request from an email or waybill without retyping: the dispatcher gets filled-in fields, and the customer adds only what wasn’t in the text.
- Tracking by number removes “where’s my truck?” calls — the most common load on the dispatch desk.
- The carrier form immediately says what’s missing for approval — the manager gets prepared carriers, not empty applications.
For developers
- The tariff, vehicle selection, timelines, request parsing, vehicle position and detail checks are pure functions with tests; the calculator and the AI request calculate the price with the same function.
- The shipment number carries a Luhn check digit: a typo is caught before the search, and different inputs — “mr 240517 3”, “MP-240517-3” — are normalized to one form.
- The map is SVG in a simple projection of city coordinates; labels are HTML on top, so they don’t shrink on a phone, and the frame adapts to the route and card size.
Tips
Tip 01
Show why an option is unavailable: “we don’t ship refrigerated cargo as groupage” is more useful than an empty card or a price that will be recalculated later.
Tip 02
Check tax IDs and bank accounts by checksums right in the form — it’s free and catches most typos before they reach accounting.
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 · booking by plate number, photo report, approval
Car service with booking and repair status
A car service website: booking by plate number or VIN into free bay slots, a “what’s knocking?” diagnosis with likely causes and a price range, repair status with a photo report, approval of extra work and payment by link, and a garage with service history and a forecast of the next maintenance.
- 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