Бонусники
Реферальная промо-платформа для арбитражной команды: кастомная CMS с gradient-билдером, WYSIWYG-редактор сложных HTML-инструкций и Clarity-аналитика кликов.
Инфраструктура для арбитража трафика
Проект создавался для команды по арбитражу трафика. Основная цель — создать ультрабыструю посадочную страницу (Mobile-First) для размещения ссылок в TikTok, Instagram и YouTube, где пользователи могут выбирать промокоды и бонусы, а владельцам начисляются реферальные отчисления.
Простота снаружи, глубина внутри
Лендинг должен быть максимально легковесным и адаптированным под мобильные устройства, чтобы удерживать холодный социальный трафик. При этом вся сложность вынесена в административную панель, которая позволяет управлять платформой без редактирования кода.
- Лендинг оптимизирован под мобильные экраны (Mobile-First), но отлично работает на ПК
- Интегрирована система Microsoft Clarity для записи видео сессий и составления тепловых карт кликов
- Тестирование первого экрана (Hero block) для выбора наиболее кликабельных макетов (A/B тесты)
- Каждый купон имеет кастомный фон, гибко настраиваемый с помощью градиентов или палитры из 50 пресетов
Для кого создавался Бонусники
- Команды по арбитражу трафика, собирающие реферальные бонусы
- Пользователи соцсетей (TikTok, Instagram, YouTube), ищущие промокоды казино/букмекеров
- Администраторы, управляющие контентом и отслеживающие личную статистику
Управление купонами
Администратор может создавать, редактировать и удалять промокоды. Вся информация мгновенно сохраняется в Cloud Firestore и обновляется на сайте.
Кастомный WYSIWYG-редактор
Разработанный с нуля текстовый редактор на чистом JS для составления HTML-инструкций к купонам. Он поддерживает форматирование текста, ссылки, видео, а также визуально сворачивает длинные ссылки на медиа-ресурсы в '...' для чистоты интерфейса.
Учет статистики и прав доступа
В админ-панели заложена матрица ролей: администраторы могут просматривать только свою статистику, видеть закрепленных за ними пользователей и редактировать назначенные купоны.
Градиентный билдер
Интерфейс настройки оформления карточки позволяет выбрать один из 50 готовых пресетов или создать свой линейный градиент с настройкой углов и цветов в реальном времени.
Как собирался проект
Вся инфраструктура проекта была спроектирована и реализована соло. Вместо тяжелых фреймворков и готовых админ-панелей была создана кастомная легкая архитектура на Astro и Firebase Client SDK, что позволило получить идеальное SEO и высокую скорость загрузки страниц.
- 01
Спроектирован Mobile-First дизайн лендинга с фокусом на конверсию трафика из соцсетей
- 02
Интегрирован Firebase Auth для безопасного входа и Firestore в качестве базы данных реального времени
- 03
Разработан визуальный WYSIWYG-редактор с парсингом тегов и коллапсингом URL
- 04
Настроены правила безопасности Cloud Firestore для разделения прав доступа
- 05
Подключены Google Analytics и Clarity для отслеживания карт кликов и A/B-тестов
Концепт монетизации
Платформа полностью окупается за счет реферального трафика. Гибкая настройка промокодов и A/B тестирование позволяют постоянно увеличивать конверсию кликов в целевые действия.