Featured Project
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
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
React 19TypeScriptVite 6TailwindCSS 3React Router 7AxiosJWTGoogle Tag ManagerGoogle Analytics 4Branch.ioAWS S3AWS CloudFrontBitbucket Pipelines
Tags
ReactTypeScriptCampaignAnalyticsAWSFintech