CrUAtivity
CrUAtivity - проект Всеукраинской рекламной коалиции, демонстрирующий украинскую рекламную креативность во время войны. Платформе нужна была технически сложная реализация с headless-архитектурой, где фронтенд работает независимо от бекенда, обеспечивая мгновенное взаимодействие и плавную навигацию.
Задача
Реализовать веб-платформу с фронтендом на React/Next.js в Docker-контейнере и бекендом на WordPress (требование клиента). Расширить WordPress REST API под потребности проекта, обеспечить динамическую фильтрацию, бесконечный скролл новостей и mobile-first подход.
Что сделано
- Построен фронтенд на React/Next.js с серверным рендерингом для быстрой первой загрузки.
- Настроена Docker-контейнеризация на сервере с автоматической очисткой кеша и мониторингом.
- Расширен WordPress REST API кастомными эндпоинтами под структуру данных проекта.
- Реализована динамическая фильтрация контента без перезагрузки страницы с использованием React-состояния.
- Построен бесконечный скролл новостной ленты с ленивой загрузкой блоков и оптимизацией DOM.
- Спроектирован интерфейс по mobile-first принципу с последовательным расширением под большие экраны.
- Оптимизирована загрузка ресурсов: code splitting, lazy-load изображений, prefetch критичных данных.
- Настроено кеширование на уровне Next.js ISR для баланса между актуальностью и скоростью.
- Обеспечена стабильная работа Docker-окружения с автоматическим перезапуском при сбоях.
- Подключена аналитика для отслеживания вовлеченности и глубины просмотра контента.
Расскажите о Вашем проекте