Бонусники
Реферальна промо-платформа для арбітражної команди: кастомна 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 тестування дозволяють постійно збільшувати конверсію кліків у цільові дії.