Три языка за один день: i18n для платформы управления виллами

Третий день вайбкодинга Villa Metrics. Утром понял: платформа для вилл на Бали без мультиязычности — как ресторан без меню на английском. Гости приезжают из России, Китая, Австралии. Инвесторы — отовсюду. Один язык интерфейса не работает.

За день сделал i18n на три языка, переделал логин, собрал лендинг, построил гостевой портал и dashboard для инвесторов. Около 100 коммитов.

Три языка: EN, RU, ZH

Выбрал react-i18next. Библиотека зрелая, документация понятная, интеграция с React — нативная. Структура простая: папка locales/ с тремя файлами — en.json, ru.json, zh.json. Каждый файл — плоский объект с ключами-переводами, без вложенности.

Английский, русский, китайский — три главных рынка аренды вилл на Бали. Английский — базовый. Русский — потому что русскоязычных владельцев и гостей на Бали много. Китайский — растущий рынок, особенно после ковида.

Переводить пришлось всё: навигацию, формы, уведомления, ошибки валидации, подсказки в полях ввода. Claude Code справился с переводами, но китайский я перепроверял — там важны нюансы вежливости в формах обращения.

Компонент переключения языка — выпадающий список в хедере. Выбранный язык сохраняется в localStorage, при следующем визите подхватывается автоматически. Без перезагрузки страницы — react-i18next меняет контекст на лету.

Логин с typewriter-эффектом

Страница входа была скучной: два поля, кнопка. Переделал. Добавил typewriter-анимацию — текст печатается посимвольно, как в терминале. Фразы про управление виллами, доходность, Бали. Три языка, случайный порядок.

Технически — CSS-анимация @keyframes typing с steps() и мигающий курсор через border-right. Никакого JavaScript для анимации, только CSS. Работает плавно даже на слабых устройствах.

Результат: вместо generic формы входа — страница с характером. Сразу понятно, что это за продукт и для какого рынка.

Лендинг для клиентов

Собрал страницу /info — лендинг для потенциальных клиентов-владельцев вилл. Не лонгрид на 20 экранов, а короткая страница: что делает платформа, какие фичи, форма запроса доступа.

Форма запроса — отдельная модель AccessRequest. Имя, email, телефон, количество вилл, комментарий. После отправки — уведомление в Telegram. Просто, но на этом этапе достаточно.

Гостевой портал

Это был самый объёмный кусок дня. Guest — отдельная модель с полями: имя, email, телефон, паспорт, национальность, предпочтения. Привязка к бронированиям.

Проблема: один гость может забронировать через Booking.com с одним email, потом через Airbnb с другим. Или вернуться через год. Нужен механизм сопоставления.

Написал логику guest matching — поиск по email, телефону, имени. Если совпадение по email точное — автоматический merge. Если по имени — предложение ручного объединения в админке. Не идеально, но для MVP хватает.

Guidebook — цифровой гид для гостей. Инструкции по вилле: Wi-Fi пароль, как включить кондиционер, где мусорные баки, контакты управляющего. Каждая вилла — свой guidebook. Гость получает ссылку при заезде.

Гостевой портал: отдельный интерфейс без аутентификации по токену. Гость открывает ссылку из SMS и видит информацию по своему бронированию, guidebook виллы, контакты для связи.

Dashboard для инвесторов

Инвесторы хотят видеть цифры: доходность виллы, заполняемость, расходы на обслуживание. Собрал desktop dashboard с sidebar. Использовал glassmorphism — полупрозрачный фон с backdrop-filter: blur() и лёгкой обводкой.

.sidebar {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

Выглядит современно. На данных пока заглушки — реальные графики появятся после интеграции с channel manager.

Что не получилось

Китайская локализация дат. Intl.DateTimeFormat с locale: 'zh-CN' форматирует даты правильно, но в связке с react-i18next были конфликты — i18next пытался форматировать даты своим способом. Решил просто: даты форматирую через Intl напрямую, минуя i18n.

Ещё хотел сделать RTL-поддержку для арабского на будущее. Быстро понял, что это перестройка всего layout. Отложил на неопределённый срок.

Итог дня 3

Около 100 коммитов за день. Платформа говорит на трёх языках. Есть гостевой портал с guidebook, система сопоставления гостей, лендинг с формой запроса доступа и investor dashboard.

i18n оказался проще, чем думал — react-i18next делает большую часть работы. Гостевой matching — сложнее: edge cases бесконечны. Но MVP работает, остальное доделаю когда появятся реальные данные.