Octopus Mobile Spend to Earn Campaign
Bilingual promotional campaign website with real-time leaderboards, JWT authentication, and comprehensive analytics tracking for Mobile Octopus rewards program.
projects.detail.detailContext
Role
Frontend Developer
Timeline
November 2025 - January 2026
Category
professional
4,600+ lines of code
41 commits
Bilingual
AWS deployed
Overview
Built complete promotional campaign platform for Octopus Card's Mobile Octopus spend-to-earn rewards program. Developed responsive React frontend with TypeScript, integrated GTM/GA4/Branch.io analytics, implemented weekly leaderboard system with PDF downloads, and managed full campaign lifecycle from launch to completion. Deployed to AWS S3/CloudFront with CI/CD automation.
What I Built
- Built complete responsive campaign website (4,600+ lines) with bilingual support (English/Traditional Chinese)
- Implemented JWT authentication system for secure user verification and registration flow
- Integrated comprehensive analytics stack with GTM, GA4, and Branch.io SDK for deep linking and event tracking
- Developed interactive modal system for prize listings and weekly leaderboard PDF downloads
- Managed complete campaign lifecycle including weekly content updates, leaderboard rollouts, and post-campaign state management
- Set up automated CI/CD pipeline with Bitbucket Pipelines deploying to AWS S3/CloudFront with cache invalidation
Key Achievements
- +41 commits over 57-day intensive campaign period
- +Fixed critical mobile rendering issues across 5+ device types (iPhone SE to Galaxy S8+)
- +Replaced SVG assets with PNG to resolve mobile blur issues
- +Triple-layer analytics: GTM + GA4 + Branch.io with comprehensive error handling
- +Environment-specific deployments (UAT/Production) with automated CloudFront invalidation
Technologies Used
Tags