Skip to content
Anton GoncharovAI systems developer
RUEN

Next.js website · catalog, map, comparison

Real estate catalog with smart search

Buyers don’t think in filters — they think in phrases: “two-bedroom near the metro, up to twelve, not the ground floor”. On a typical site they click checkboxes ten times and give up. Here they write as in a messenger, and right under the search bar they see what the search understood — any condition can be removed with one tap. If there’s no exact match, the site doesn’t show an empty page but offers the closest options and says what it relaxed. Then there’s a map with prices, comparison, booking a viewing in a free slot and a subscription to new apartments in Telegram.

Scenario: Kvartal agency in Kazan — fictional: 48 apartments in seven districts near eleven metro stations, new builds and resale, price history, three agents.

Demo screenshot: Real estate catalog with smart search

Open the demo

Open the website

Start on the home page: type a query in your own words and press “How it works”.

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

  • Smart phrase search: rooms, price (including “up to twelve million” and “per square meter”), metro and walking minutes, station or district, building type, renovation, floor, ceilings, balcony, parking, a nearby school

  • Under the search bar you see what the search understood and which words it skipped; “How it works” shows the same query as a function call for a language model

  • Nothing found — the site relaxes conditions step by step, shows the closest apartments and says what it changed

  • An SVG city map with no external maps: prices on pins, clusters, zoom with the wheel or a pinch, and a search area you can draw with a finger or mouse

  • Filters, sorting and the map area are kept in the link — you can forward a selection

  • Comparison of up to four apartments with the best values highlighted and a “differences only” mode, favorites and a shareable selection link

  • Apartment page: a gallery with full-screen view, a mortgage calculator by program, price history, the route to the metro, booking a viewing in a free slot

  • A Telegram subscription to new apartments matching a query, with a sample bot message; online valuation of an apartment based on similar listings

  • RealEstateListing, RealEstateAgent and breadcrumb structured data; light and dark themes

  • Owner dashboard: viewing, valuation and subscription requests with UTM, analytics goals, Core Web Vitals and an SEO check

How to try it

  1. Search in words

    On the home page, type “two-bedroom near the metro under 12 million”. Three conditions appear under the search bar — press “How it works” to see what the text turned into.

  2. Refine on the map

    In the catalog, press “Draw area” and circle the center. Only apartments inside remain; remove the “near metro” chip and more appear.

  3. Ask for the impossible

    Type “one-bedroom under 3 million near Kozya Sloboda”. The site won’t show emptiness; it offers the closest options and says which conditions it relaxed.

  4. Compare and book

    Click the scales on two or three cards and open “Compare”. Then on an apartment page choose a day and a free viewing time.

  5. Open the owner dashboard

    The button in the top bar: the viewing request, subscription and valuation are in the “Leads” tab, and search and comparison are in “Goals”.

No paid neural networks

There are no paid neural network requests: the query is parsed by a local rule-based parser; in production, a language model with a search function call takes its place. Forms are validated on the server, but nothing is stored: the lead is returned to your browser and visible only to you in the “Owner dashboard”. The apartments, prices and city map 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

  • Query parsing by the YandexGPT or GigaChat language model with function calling: it understands typos and “so the cat doesn’t bother the neighbors”
  • Listings from the agency’s CRM (Intrum, amoCRM) or the CIAN and Avito feeds, photos from a CDN, updated every 15 minutes
  • A real map (Yandex Maps or 2GIS) with the same clusters and search area, travel time to the metro along real routes
  • A selection bot in Telegram: new listings for a saved query, viewings booked into the agent’s calendar
  • Yandex Metrica with goals: what people search for, where they drop off, how many bookings smart search brought

Stack

  • 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 · Ryan Day

    Hands-On APIs for AI and Data Science

    The “How it works” block shows the search phrase as a function call for a language model: the API is described so that both a person and a model understand it.

Developer’s comment

Anton Goncharov

AI systems developer · Python

For business

  • Buyers write the way they think and see the result immediately — fewer abandoned searches and more viewing bookings.
  • An empty result doesn’t lose the customer: the site offers the closest options, and a Telegram subscription brings them back when an exact match appears.
  • The agent gets a lead with a specific apartment and viewing time, not “call me back, I’m interested”.

For developers

  • Query parsing is a pure “text → filters” function with unit tests; it has the same contract as a language model function call, so the model can be swapped in without touching the interface.
  • The map is SVG with its own zoom, panning, pinch and clustering in screen coordinates; the search area is checked with a point-in-polygon algorithm.
  • Catalog state is synced with the URL via history.replaceState without a server request; apartment pages are built statically via generateStaticParams.

Tips

  • Tip 01

    Show how the search understood the query and let users remove any condition — without that, “smart” search is annoying when it’s wrong.

  • Tip 02

    Never show an empty result: relax the conditions and say honestly what you changed.

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.

Message me on TelegramSend a request

Other demos in this section

All demos

  • Next.js website · service landing page

    live

    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

  • Next.js website · B2B, multi-page

    live

    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

  • Next.js website · AI translation, per-language SEO

    live

    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

  • Next.js website · customer account, AI assistant, Telegram

    live

    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

  • Next.js website · Python in the browser, AI mentor

    live

    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

  • Next.js website · booking by plate number, photo report, approval

    live

    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

  • Next.js website · case analysis, claim letters, calculators

    live

    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

  • Next.js SaaS website · sandbox, dashboard, API

    live

    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

  • Next.js restaurant website · menu, table booking, delivery

    live

    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

  • Next.js fitness studio website · booking, memberships, account

    live

    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

  • Next.js IT conference website · program, tickets, networking

    live

    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

  • Next.js corporate logistics website · calculator, tracking, AI request

    live

    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