TBC Bank Uzbekistan — первый цифровой банк страны и единственный в Центральной Азии, который входит в список лучших финтех-компаний мира по версии CNBC и Statista.

Банк обратился в ФАНС за разработкой нового сайта и CMS: на старом решении контент-команда не могла быстро обновлять страницы, а помощь технических специалистов требовалась даже в простых сценариях. Перед нами стояла задача обновить дизайн сайта и разработать удобную CMS, позволяющую быстро верстать и выпускать контент.

Бэкенд работает на Strapi, фронтенд — на Nuxt с серверным рендерингом (SSR), который обеспечивает корректную индексацию страниц поисковиками.

Чтобы сайт работал быстро, мы разработали кастомное API на стороне Strapi: оно объединяет множество запросов в один и подготавливает данные в удобный для фронтенда формат. Дополнительно реализовали многоуровневое кэширование, адаптивный медиаконтент и отложенную гидрацию компонентов (lazy-hydration).

Также в админке внедрили кастомные фичи, разработанные под потребности команды банка — рассказываем о них подробнее.

Стек: Node.js, TypeScript, Strapi, Nuxt.

На сайте три языка (узбекский, русский и английский), но сделать отдельные страницы под разные языки недостаточно. Десктопные и мобильные версии сайта настолько сильно отличаются, что стандартный адаптив не подходит.

В итоге отдельная версия страницы собирается для каждого языка и устройства. Это нестандартное решение, но оно позволило закрыть все задачи бизнеса, а не идти на компромиссы.

Редакторы банка собирают и проверяют страницы в тестовом окружении, а затем переносят в продакшен.

Чтобы после проверки в тестовой среде редакторам не приходилось заново собирать ту же страницу на проде, мы разработали кастомную систему точечного переноса контента. Она позволяет одновременно выпускать в прод десятки готовых страниц.

Иногда нужно, чтобы одни и те же данные отображались на разных страницах сайта, например, текущее количество вакансий в банке.

Чтобы их не приходилось везде менять вручную, мы реализовали систему переменных. В CMS есть отдельный тип данных, которые можно переиспользовать в любой части сайта — достаточно один раз поменять переменную, и новые данные отобразятся везде. При этом есть отложенный постинг: можно задать дату и время, когда значение поменяется.

У банка большая контентная команда, поэтому мы разработали кастомную систему ролей. Доступ к страницам ограничивается точечно — по группам пользователей и разделам сайта.

В старой CMS предпросмотр новой страницы был доступен только в тестовом окружении. Чтобы редакторы понимали, как она будет выглядеть в проде, мы разработали превью и визуальный редактор.

• В превью страница отображается точно так, как ее увидит пользователь после публикации, изменения из CMS применяются без перезагрузки.
• Визуальный редактор позволяет менять контент прямо в дизайне — не нужно переключаться между полем для ввода и предпросмотром.

Одномоментно переключиться на новую версию сайта — большой риск для бизнеса, тем более для банка. Плюс в таком случае нужно, чтобы к переезду был готов дизайн и контент для всех разделов.

Поэтому мы реализовали постраничный запуск: старый и новый сайты работают параллельно, а страницы переезжают в новый дизайн по мере готовности.

Идет постепенный переезд на новый сайт: редакторы банка собирают и обновляют контент самостоятельно, без привлечения технических специалистов.