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.
- Role
- Frontend Developer
- Type
- Built in my full-time job at Appnovation
- Period
- Nov 2025 to Jan 2026
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
- 01Built complete responsive campaign website (4,600+ lines) with bilingual support (English/Traditional Chinese)
- 02Implemented JWT authentication system for secure user verification and registration flow
- 03Integrated comprehensive analytics stack with GTM, GA4, and Branch.io SDK for deep linking and event tracking
- 04Developed interactive modal system for prize listings and weekly leaderboard PDF downloads
- 05Managed complete campaign lifecycle including weekly content updates, leaderboard rollouts, and post-campaign state management
- 06Set up automated CI/CD pipeline with Bitbucket Pipelines deploying to AWS S3/CloudFront with cache invalidation
Stories worth telling
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
Numbers
- 4,600+ lines of code
- 41 commits
- Bilingual
- AWS deployed
Stack
- React 19
- TypeScript
- Vite 6
- TailwindCSS 3
- React Router 7
- Axios
- JWT
- Google Tag Manager
- Google Analytics 4
- Branch.io
- AWS S3
- AWS CloudFront
- Bitbucket Pipelines