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-оточення з автоматичним перезапуском при збоях.
- Підключено аналітику для відстеження залученості та глибини перегляду контенту.
Розкажіть про Ваш проєкт