八达通手机消费赚分推广活动

概述

为八达通卡的手机八达通消费赚分奖励计划构建完整的推广活动平台。使用 TypeScript 开发响应式 React 前端，集成 GTM/GA4/Branch.io 分析工具，实现每周排行榜系统及 PDF 下载功能，并管理从启动到完成的完整活动生命周期。通过 CI/CD 自动化部署到 AWS S3/CloudFront。

我构建了什么

• 构建完整的响应式活动网站（4,600+ 行），支持双语（英语/繁体中文）
• 实现 JWT 身份验证系统，用于安全的用户验证和注册流程
• 集成包含 GTM、GA4 和 Branch.io SDK 的全面分析堆栈，用于深度链接和事件追踪
• 开发交互式模态系统，用于奖品列表和每周排行榜 PDF 下载
• 管理完整的活动生命周期，包括每周内容更新、排行榜发布和活动结束状态管理
• 使用 Bitbucket Pipelines 建立自动化 CI/CD 管道，部署到 AWS S3/CloudFront 并进行缓存失效

主要成就

• +57 天密集活动期间完成 41 次提交
• +修复 5+ 种设备类型（iPhone SE 至 Galaxy S8+）的关键移动渲染问题
• +将 SVG 资源替换为 PNG 以解决移动端模糊问题
• +三层分析：GTM + GA4 + Branch.io，具有全面的错误处理
• +环境特定部署（UAT/生产），自动化 CloudFront 失效

使用的技术

标签