Promo Portal

Bonusniki

A referral bonus platform for a traffic arbitrage team featuring a custom CMS with a gradient builder, WYSIWYG instruction editor, and Clarity session click analysis.

AstroFirebaseVanilla JSVanilla CSSMicrosoft ClarityGoogle Analytics

Traffic Arbitrage Infrastructure

This project was built for a traffic arbitrage team. The main objective was to create an ultra-fast, Mobile-First landing page for publishing links on TikTok, Instagram, and YouTube. Users choose active promo codes and bonuses, generating referral revenue for the owners.

Bonusniki / Referral Traffic / Custom CMS / Firebase / Microsoft Clarity / Bonusniki / Referral Traffic / Custom CMS / Firebase / Microsoft Clarity / Bonusniki / Referral Traffic / Custom CMS / Firebase / Microsoft Clarity / Bonusniki / Referral Traffic / Custom CMS / Firebase / Microsoft Clarity /

Simple Interface, Capable Core

The landing page had to be lightweight and responsive to capture cold social traffic. However, all management complexity is handled by the administrative panel, which allows team owners to manage the platform without coding.

  • Optimized primarily for mobile screens (Mobile-First), with clean layout scaling on desktop
  • Integrated Microsoft Clarity to record user sessions and compile click heatmaps
  • Experimented with A/B testing on the Hero block layouts to optimize click-through rates (CTR)
  • Fully customizable card designs with 50 gradient presets or real-time custom CSS generation

Who Bonusniki was created for

  • Traffic arbitrage teams looking to scale referral program conversions
  • Social media users looking for verified promos, free bets, and spins
  • System administrators managing offers and tracking performance

Coupon Management

Admin users can easily create, edit, and delete coupons. All updates sync instantly via Cloud Firestore to the landing page.

Custom WYSIWYG Editor

A lightweight rich text editor built from scratch in vanilla JS to draft HTML coupon instructions. It parses text tags, embeds media, and collapses long URLs into '...' to maintain editing cleanliness.

Manager Stats & Access Matrix

A role-based authorization model restricts admin views: managers can only view their own referral stats, see users assigned to their links, and edit designated coupons.

Visual Gradient Builder

A card appearance editor that lets administrators pick from 50 pre-designed swatches or create custom linear gradients with live previews.

How it was developed

The entire system infrastructure was designed and implemented solo. Rather than relying on heavy pre-built CMS systems, it uses Astro for SSG coupled with the Firebase Client SDK, achieving fast load times and strong SEO performance.

  1. 01

    Designed the Mobile-First layout focusing on social traffic onboarding flows

  2. 02

    Integrated Firebase Auth for secure admin login and Cloud Firestore for real-time databases

  3. 03

    Created a custom WYSIWYG editor with smart tag parsing and URL collapsing

  4. 04

    Configured Cloud Firestore security rules to enforce employee access restrictions

  5. 05

    Connected Google Analytics and Clarity for user behavior and A/B test tracking

Monetization Concept

The platform generates revenue through referral programs. Fast coupon adjustments and A/B test iterations help maximize CTR and target conversions.