Realtor Client — это клиентская часть веб-приложения для риэлтора, разработанная на Next.js.
Проект создан с нуля, адаптирован под продакшн, и задеплоен на собственный домен:
🔗 https://moskvrealty.ru
(если недоступно — включите VPN: сайт работает через Cloudflare DNS + SSL)
⚠️ Внимание: Проект находится в стадии активной доработки до MVP.
Основные модули уже реализованы (генератор форм, CI/CD, SEO-оптимизация, работа с изображениями), но часть функционала ещё дополняется.
- Next.js — SSR/SSG, маршрутизация, продакшн-оптимизация
- TypeScript — типобезопасность
- TailwindCSS — современная адаптивная стилизация
- Shadcn UI — UI-компоненты на базе Radix UI
- TanStack Query — работа с API
- React Hook Form + Zod — формы + валидация
- TanStack Table (запланировано) — таблицы для аналитики
- App Router (Next.js 15)
- React 19
- Изоляция UI и бизнес-логики
- Модульный импорт и
alias-пути черезtsconfig.json - Error boundary-компоненты для критических ошибок
- Роутинг с поддержкой ISR и SSR страниц
- В будущем — переход на архитектуру FSD (Feature-Sliced Design)
В проекте реализован гибкий генератор форм, построенный на связке:
- Shadcn UI — визуальные компоненты
- React Hook Form — управление состоянием и валидацией
- Zod — строгая типизация и схема данных
Формы описываются декларативно через конфиги, без дублирования логики.
📂 Код:
src/lib/types/form.types.ts— типы для конфигов формsrc/components/form/fields— компоненты полей (Input,Textarea,Switch,Tags,Radio,Image)src/components/form/RenderFormField.tsx— генератор/рендер полей по конфигу
Фильтрация и сортировка списка объектов недвижимости реализована с помощью TanStack Query:
- Нет необходимости в Redux/Zustand
- Логика вынесена в кастомный хук
src/hooks/queries/properties/useProperty.ts - Кэширование и синхронизация с API "из коробки"
- Все изображения загружаются в S3-хранилище
- На сервере автоматически преобразуются в WebP для ускоренной загрузки
- Поддержка адаптивных размеров и оптимизации под мобильные устройства
- Достигнуты высокие показатели Lighthouse в первых деплоях
- Реализована SEO-оптимизация: мета-теги, Open Graph, семантика
- SSR/ISR ускоряет индексацию страниц в поисковых системах
- TypeScript и Zod полностью описывают все формы и API-модели
- Ошибки ловятся на этапе компиляции, а не в рантайме
- Минимизация багов и консистентность данных
- Cloudflare DNS + SSL для всех доменов
- Защита от XSS/CSRF обеспечивается механизмами Next.js и React Hook Form
- Минимизация утечек через строгую типизацию и проверку данных на уровне API
- Деплой и тесты через GitHub Actions
- Продакшн-контейнеры и инфраструктура управляются через Dokploy
- Автоматический билд и деплой при пуше в
main
- Каталог объектов недвижимости
- Поддержка адаптивного интерфейса
- Фильтрация и сортировка (будет расширяться)
- Загрузка изображений на S3
- Оптимизация под мобильные устройства
- Предусмотрены все экраны (загрузки, ошибки, фолбэки)
# Установка зависимостей
npm install
# Запуск в режиме разработки
npm run dev
# Сборка для продакшна
npm run build