Агрегатор новостей компании CarCraft

CarCraft представляет собой современный онлайн-кредитный конвейер, который предоставляет автодилерам и автосалонам полный спектр финансовых услуг для автобизнеса.

С помощью интегрированного финансирования, мультибанковской модели, технологии VIN by VIN и партнерства с банками, CarCraft становится надежным союзником для эффективного ведения дел в автомобильной отрасли.

Задача

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

Нам предстояло разработать новостной блок - по сути отдельный сайт с CMS, в котором на этапе MVP контент-менеджер в ручном режиме будет аккумулировать посты, статьи, новости и видео с разных площадок компании.

Помимо самого сайта, который можно вставлять, например, через iframe, необходимо было разработать API для получения контента, а так же JavaScript SDK, который бы позволял вставлять заранее заготовленные контент-блоки на другие сайты.

Выбор стэка

CarCraft крайне технологичная компания с сильнейшей технической экспертностью in-house. Наше решение должно было быть не менее технологичным, чем общий уровень системы.

Мы не стали использовать Bitrix, Wordpress или другую шаблонную CMS. Нами было принято решение сделать кастомную разработку. Сроки и бюджет позволяли.

Нашей командой была выбрана связка Next.js + Strapi (headless CMS). Это решение позволило нам разработать технологичный front-end на React, а также в кратчайшие сроки реализовать стабильный API для получения контента с автогенерирующейся документацией.

Strapi

Это потрясающая headless (то есть без front-end'a) CMS, которая позволяет в кратчайшие сроки реализовать базовые CRUD операции для любого технологического стэка. На момент написания текста наш сайт работает на такой же связке - Next.js + Strapi.

Разработка и релиз всего back-end'a для этого проекта занял у нас примерно час-полтора, включая поиск и установку плагинов, настройку домена, обратного прокси, сертификатов, переименования полей на русский* и т.д.

Помимо GUI для управления контентом Strapi предоставил полноценный API для получения записей, которым пользовался front-end и другие сервисы CarCraft. Документация автоматически генерировалась в Swagger при помощи бесплатного плагина из магазина плагинов.

*Strapi переведён на русский язык, но поля, которые создаются при добавлении таблиц, необходимо в ручную перевести на русский.

Next.js

Наш основной React фреймворк, который позволяет быстро разрабатывать не только высокотехнологичные сервисы, но также хорошо оптимизированные ux-friendly сайты.

В рамках проекта новостного блока Next.js проект был необходим для предоставления команде CarCraft возможности просто интегрировать контент-хаб через iframe. 

JavaScript SDK

Не очень большая, но одна из интереснейших частей системы, так как она достаточно нетривиальная. Как часто нам приходится вносить изменения в Webpack конфиг при работе с React, а тем более с Next.js поектами? В нашей практике достаточно редко.

Этот случай как раз тот самый редкий. В рамках проекта мы написали кастомный конфиг Webpack'a, который позволил не просто собрать функцию создания блоков в отдельный файл, но и преобразовал весь статичный меди контент в base64, чтобы не зависеть от сервера сайта и избежать проблем с CORS.  

Проверка контента

Для того, чтобы у контент-менеджера была возможность убедиться в корректности отображения информации, было создано отдельное "стейдж" окружение, куда попадали записи в статусе "черновик". Это окружение по всем правилам полностью повторяло либо текущее состояние production сервера, либо предстоящие для него изменения. 

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

• Front-end приложение на Next.js с возможностью интеграции через iframe
• JavaScript SDK для интеграции постов по отдельности
• Back-end на self-hosted Strapi с функционалом отложенных постов
• Два окружения: draft для проверки отображения постов и production

Новостной блок уже интегрирован в главную страницу их платёжного сервиса Momentumpay от CarCraft. Посмотреть на него можно здесь: momentumpay.ru