syazwak.com
Development Showcase

A Comprehensive
Loyalty Ecosystem.

An enterprise-grade loyalty management suite designed to bridge the gap between physical retail experiences and digital convenience. Featuring a secure QR-based verification system, automated membership progression, and real-time data synchronization across a sophisticated multi-app architecture.

Explore the Apps Technical Stack
The Architecture

Three Applications. Unified Logic.

A holistic demonstration of end-to-end customer retention and administrative management.

📱 SW Loyalty
The Member Experience

A modern, cross-platform loyalty app built with Flutter, Supabase, and Firebase. Members enjoy a premium digital membership experience with personalized dashboards, real-time point tracking, and secure QR-based in-store redemption.

Key Features & Architecture

  • Dynamic UI & UX — Material 3 design with responsive layouts, personalized greetings, and visual tier progression (Bronze to Platinum).
  • Real-Time Earning & Redemption — Secure, time-limited QR codes validated server-side for instant point updates and fraud prevention.
  • Engagement Hub — Smart rewards catalog, filterable transaction history, and Firebase-powered push notifications for active campaigns.
  • Cross-Platform Ready — Compiled for iOS, Android, web, and desktop from a single cohesive Flutter codebase.
Flutter + Material 3 Supabase Auth Firebase Push QR Earn & Redeem Tier System Real-time Sync
Explore Mobile Architecture
SW Loyalty Customer App
Download APK Web Version
Test Account
Customer Access
Email: customer@test.com
Password: cust1234

💼 SW Loyalty Staff
The Operational Engine

A focused Flutter staff portal designed specifically for brick-and-mortar operations. Provides front-line staff a secure, clean interface to award points and process redemptions via QR scanning, backed by Supabase for robust data integrity.

Key Features & Architecture

  • High-Performance Scanning — Optimized mobile scanner for rapid QR processing in fast-paced retail checkout flows with instant validation.
  • Secure Operational Flows — Role-based access control and Supabase RPC functions enforce business logic and fraud prevention server-side.
  • Real-Time Auditing — Filterable transaction history per staff member ensures accountability and transparent operational tracking.
  • Resilient State Management — Graceful error handling for expired tokens, daily limits, and invalid scans with clear staff-oriented feedback.
Flutter Mobile Scanner Supabase RPC Material 3 UI Real-time Validation Audit Trail Role-Based Access
View Operational Logic
SW Loyalty Staff App
Download APK Web Version
Test Account
Staff Access
Email: staff@test.com
Password: staff1234

🖥️ Loyalty Admin
The Command Center

A sophisticated web-based administration panel built with Next.js, React, TypeScript, and Supabase. This central command center gives marketing and operations teams complete control over rewards, users, transactions, and analytics in a cohesive, data-driven interface.

SW Loyalty Admin Console
Visit Admin Portal
Test Account
Admin Access
Email: admin@test.com
Password: admin1234

Key Features & Architecture

  • Comprehensive Data Management — Full CRUD capabilities for rewards, tier-based access control, and dynamic program configuration.
  • Advanced Analytics & CRM — Smart engagement scoring, tier distribution analysis, and detailed transaction tracking with CSV export.
  • Secure Admin Infrastructure — Protected routes and strict Supabase Auth rules ensure only authorized staff can access management tools.
  • Modern Web Stack — Built on Next.js App Router for optimized performance, featuring a responsive, state-aware UI with real-time KPI dashboards.
Next.js App Router React + TypeScript Supabase PostgreSQL Real-time Analytics CSV Export Role-Based Access
Explore Admin Architecture

Technical Highlights.

🔐

Secure QR Logic

Implemented a sophisticated token rotation system where QR codes expire every 5 minutes for earning and 15 minutes for redemption. This multi-layered approach uses short-lived JWT-style tokens to prevent fraudulent screenshots or unauthorized reuse, ensuring that every point earned is verified through a live interaction.

⚡

Supabase Real-time Sync

Leveraging WebSocket connections via Supabase to push database changes instantly to all client devices. When a staff member scanner confirms a transaction, the customer's interface updates within milliseconds, eliminating the need for manual refreshes or long-polling.

🏆

Dynamic Tiering Engine

Developed a logic-driven progression system that automatically recalibrates user status. Customers move through Bronze, Silver, Gold, and Platinum ranks based on real-time activity metrics, with the UI dynamically adjusting its design language to reflect their new status.

📊

Relational Data Integrity

Architected a transparent audit trail where every transaction is an atomic database operation. Each record is intricately linked to specific staff IDs, timestamps, and customer profiles, providing a bulletproof ledger for system compliance and financial oversight.

🛠️

Modern Clean Architecture

Prioritized maintainability by following industry-standard design patterns. The project utilizes centralized error handling, Material 3's expansive theme system in Flutter, and a type-safe App Router structure in Next.js for a cohesive and scalable development foundation.

🛡️

Industrial Grade Security

Secured the entire relational backend using Row Level Security (RLS) policies and Security Definer Functions. This ensures that business logic is enforced at the database level, preventing any client-side manipulation and keeping individual customer data private.

Built with Industry Standards.

A production-ready stack combining mobile, web, and backend technologies

Flutter + Dart Mobile Apps
Next.js 16 Admin Dashboard
React UI Components
Supabase Backend & Auth
PostgreSQL Database
Firebase Push Notifications
TypeScript Type Safety
Tailwind CSS Styling