Loyalty Microsite — SME-Focused Rewards Platform

A streamlined loyalty platform designed to reward small and medium-sized business customers with exclusive promotions and partner offers. Built as part of a broader business ecosystem, the microsite features a clean two-page structure optimized for discoverability and engagement.

Key Features

• Promotions Landing Page: Highlights current vouchers and deals in a clean, accessible layout
• Dynamic Detail Pages: Slug-based routing for each promotion, complete with Q&As and external registration links
• Real-Time API Integration: Fetches live promotional data to ensure accurate and timely updates
• CMS-Driven Architecture: Built with Next.js and powered by Directus CMS for flexible content management and fast iteration

My Role

Led frontend development and CMS integration, delivering a scalable and responsive loyalty platform. Collaborated closely with both internal stakeholders and external API engineers to:

• Integrate promotional data via real-time API
• Ensure seamless data flow and content synchronization
• Optimize layout and responsiveness across devices

Tech Challenges & Solutions

• Challenge: Real-time API latency and inconsistent payloads from external promotional data sources  Solution: Implemented fallback states and conditional rendering to handle delayed responses gracefully. Collaborated with API engineers to align data structures and improve reliability.
• Challenge: Maintaining content agility while ensuring layout consistency across promotions  Solution: Designed a flexible CMS schema in Directus to support dynamic content types while enforcing layout constraints. This allowed non-technical teams to manage promotions without breaking UI integrity.
• Challenge: Ensuring mobile-first responsiveness across varied promotional formats  Solution: Leveraged Tailwind CSS to build adaptive components that scale across devices, ensuring a consistent experience for SME users accessing the platform on-the-go.
• Challenge: Slug-based routing for dynamic detail pages with SEO considerations  Solution: Used Next.js  dynamic routes and server-side rendering to optimize discoverability while maintaining fast load times and clean URLs.