Мы с нуля построили дизайн и платформу для гонконгского брокера гибких офисов: модель персонального консультанта, навигацию, готовую к SEO, структурированные данные офисов, кастомные административные процессы и передачу в production.
My Office Asia — гонконгский брокер гибких офисов, работающий с крупными операторами и независимыми бутиковыми пространствами по всему Гонконгу. Внутри — два связанных контура: публичный редакционный каталог и закрытый редакторский кабинет, где команда клиента сама ведёт каталог, объекты и контент.
Архитектура подготовлена к расширению с первого дня: один рынок в продакшене (Гонконг), но код спроектирован под добавление Сингапура, Тайбэя или Сеула без переписывания интерфейса.
Задача
Клиент пришёл с запросом на сайт и систему управления каталогом, которые передавали бы суть услуги: персональный консультант, быстрое время ответа и отсутствие комиссии для арендаторов — а не просто список объектов.
- Построить главную и навигацию каталога вокруг модели консультанта, а не вокруг множества карточек
- Сделать админку, чтобы команда вела каталог самостоятельно, без зависимости от подрядчика
- Запуститься готовыми к SEO в очень конкурентной нише гибких офисов в Гонконге
- Спроектировать кодовую базу так, чтобы Сингапур, Тайбэй или Сеул можно было добавить позже без переписывания
- Сдать как production-проект с документированной передачей, настраиваемым контентом и минимумом захардкоженной бизнес-логики
Публичный сайт
- Главная, сфокусированная на модели персонального консультанта, а не на плотности карточек
- Каталог с поиском и фильтрами: район × тип пространства × размер команды × оператор
- Профили зданий и операторов, страницы объектов с галереей, описанием «что есть в здании» и связанными вариантами
- Редакционный слой: кейсы, гайды по районам, «как это работает», FAQ и длинные SEO-материалы
- Форма обратной связи с надёжной доставкой и многоуровневой защитой от спама
- Полная адаптивность от 320 px до 4K-мониторов
Административная CMS
- Закрытый редакторский кабинет с серверной аутентификацией и опциональной двухфакторной
- Редактирование карточек и зданий с загрузкой изображений
- Редакционный AI-ассистент в админке (Anthropic API) для помощи с текстами
- Спроектирован под небольшую внутреннюю команду с простым управлением доступом
- Готов к расширению ролевой модели, когда команда вырастет
Передача в production
- Аудит безопасности, SEO-метаданных, доступности, состояний ошибок и загрузки
- Документированный чек-лист переключения на production
- Эндпоинт /api/health для мониторинга работоспособности
- Передача с расширенным README, документацией переменных окружения и скриптами переключения
Архитектурные решения
Архитектура на несколько рынков с первого дня. Сейчас в продакшене только Гонконг, но архитектура подготовлена к новым рынкам и брендам. Контент рынка, токены бренда и SEO-метаданные отделены от слоя компонентов — новые локации добавляются без пересборки интерфейса с нуля.
Domain-driven структура. Жёсткая стратификация без восходящих зависимостей: domains/ (типы и контракты) → server/ (бизнес-логика и адаптеры базы) → components/ (UI) → app/ (только композиция роутов). Роуты не знают про таблицы Supabase — всё идёт через слой провайдера. Это держит интерфейс независимым от слоя базы: будущие изменения бэкенда не потребуют переписывания публичного сайта.
Server-first React. App Router с Server Components везде, где возможно. Из примерно 400 компонентов только 83 — клиентские, и каждый оправдан состоянием или обработчиками событий. Это держит JS-бандл маленьким и улучшает время до интерактивности.
Многоуровневая защита публичных форм. Без внешней капчи: honeypot-поле, проверка возраста формы (мгновенные повторы отклоняются), ограничение частоты запросов по IP, валидация Zod на сервере. Спам не доходит, пользователь не страдает от капчи.
Полностью токенизированная дизайн-система. После принятия дизайна провели девятишаговый CSS-рефакторинг: каждый цвет, размер шрифта, радиус, тень, отступ и анимация стали семантическим токеном. Любое глобальное изменение — акцентный цвет, шкала отступов — это одна правка в globals.css.
Адаптивная редакционная вёрстка. Вместо фиксированных скачков по точкам перелома используются гибкие отступы и контентные ограничения — страницы плавно масштабируются от мобильных экранов до ultra-wide дисплеев.
Готовность к production
Перед передачей провели сквозной аудит по безопасности, SEO, доступности и операциям.
- Заголовки безопасности: X-Frame-Options, Content-Type-Options, Referrer-Policy, полный Permissions-Policy, Cross-Origin-Opener-Policy
- SEO-архитектура: динамическая sitemap для страна / район / здание / объект / оператор, robots.txt с защитой staging-окружения, JSON-LD, метаданные на каждой публичной странице, план сохранения позиций при миграции
- Доступность: aria-метки, skip-ссылка, prefers-reduced-motion, декоративные изображения помечены aria-hidden, семантические разметочные элементы
- Производительность: server-first, скелетоны загрузки на тяжёлых роутах, опциональный анализ бандла, next/image везде с правильными размерами
- Операции: /api/health для мониторинга, документированное переключение на production, расширенный README с руководством для передачи
- Production-сборка: 71 статически сгенерированная страница, 0 ошибок TypeScript и чистая строгая проверка типов на момент передачи
В цифрах
- TypeScript / TSX файлы — 400+
- Миграции Supabase — 42 (~5 000 строк SQL)
- Индексы базы — 62, полное покрытие горячих путей
- Шаблоны публичных роутов — 24, включая динамические
- Статические страницы — 71
- Семантические дизайн-токены — около 150
Стек и направление
Галерея платформы и административной CMS
Что ещё мы собирали.
Обсудим, какой формат
подходит вашей задаче.
Новый MVP, кастомная платформа, клиентский кабинет, внутренняя система, backend, интеграции или развитие существующего продукта — определим правильную точку старта и следующий объём работ.