OCL Loyalty Web Application
Mobile-first loyalty program platform with missions, promotions, offers, and eStamps, featuring Ionic React components and AEM integration.
- Role
- Frontend Architect
- Type
- Built in my full-time job at Appnovation
- Period
- Jan 2026
Architected and built complete loyalty program web application from scratch in intensive 2-week sprint. Developed homepage with 6 major sections, missions and promotions systems, reusable component library with CSS modules, and comprehensive service layer architecture. Implemented pull-to-refresh, press animations, and frosted glass design system. Built migration path from AEM to lightweight API approach.
What I built
- 01Built complete homepage architecture with Activities Spotlight, Quick Access, Missions preview, Promotions, Flash Grab, Exclusive Offers, and eStamps sections
- 02Developed comprehensive component library (53 CSS modules) with CollapsibleSection, FilterModal, SortModal, and NavBar components
- 03Implemented AEM headless CMS integration with service layer abstraction and migration path to simpler API approach
- 04Created mobile-first responsive system with pull-to-refresh, 10% black press overlays, and scale-down animations
- 05Established design system with glass morphism effects, burnt-orange brand colors, and content-based modal breakpoints
- 06Fixed all 27 ESLint errors improving type safety and code quality across entire codebase
Stories worth telling
26 commits delivering 9,264 lines added in 2-week sprint
Complete missions and promotions systems with filter/sort capabilities
Reusable component library with 53 CSS module files
Service layer architecture enabling easy content source migration (AEM → API)
Production-ready with TypeScript strict mode and comprehensive error handling
Numbers
- 9,264 lines added
- 26 commits
- 53 CSS modules
- 2-week sprint
Stack
- React 19
- TypeScript
- Ionic React 8
- Vite 5
- Capacitor 8
- CSS Modules
- Adobe Experience Manager
- Axios
- React Router 5
- AWS S3