Stamply - Loyalty App for Local Businesses

Overview

This project is an ongoing Progressive Web App (PWA) in development that helps local small businesses create and manage digital loyalty programs. It connects independent shops that rely on paper loyalty cards with customers who prefer a digital experience.

The app has two sides: a customer-facing wallet interface and a business dashboard. Customers can collect and track digital stamp cards, while business owners can issue stamps, manage redemptions, and view customer activity in real time.

The Problem

Many small businesses still rely on physical loyalty cards that are easy to lose and hard to track. Most digital loyalty systems are either too expensive or too complex for small shops to adopt. The goal of this project is to design a simple, affordable, and accessible solution that helps businesses reward returning customers without needing custom infrastructure or native app development.

Current Solution

The Loyalty App recreates the familiar stamp card experience in a modern, digital format. Customers can discover nearby businesses, add their loyalty cards to a personal wallet, and collect stamps by showing a QR code at checkout. Businesses can scan QR codes or look up customers by phone number to issue stamps and track redemptions. All updates are handled in real time through Firebase.

Design and User Experience

I designed the interface in Figma, combining the sleek visual feel of Apple Wallet with the recognizable proportions of paper stamp cards. Each card uses the business’s brand colors and has clear visual progress indicators. The overall design focuses on being mobile-first, fast, and intuitive to navigate.

The customer app includes a Wallet view for collected cards, a Discovery tab for finding new businesses, and a History section for tracking rewards. Each card opens a detailed page showing progress and a button to display the QR code for in-store scans.

Frontend Architecture

The frontend is built with Next.js, Tailwind CSS, and Firebase as the backend. The app is structured as a PWA, allowing users to install it directly from the browser and use it offline.

• /wallet – Displays the user’s stamp cards
• /businesses – Discovery and search
• /business/[id] – Store details and available cards
• /card/[id] – Card progress, QR display, and history
• /scanner – QR scanner modal for business owners

QR System and Security

One of the main technical challenges has been building a secure QR validation system. Static QR codes are easy to screenshot and share, so I implemented a token-based system to ensure each stamp is validated in person.

When a customer shows their QR code, the app generates a temporary token stored in Firestore. The business scans it with the html5-qrcode library, and a Firebase Cloud Function validates and marks the token as used. The token cannot be reused, preventing fraudulent stamp collection.

Backend and Data Structure

The backend is powered by Firebase Authentication, Cloud Firestore, and Cloud Functions. Currently, data is split between two collections: users and businesses. Each contains loyalty card data for its own side, which simplifies security rules but duplicates some data. I plan to introduce a third “relations” collection to improve efficiency and reduce duplication in the next release.

Technical Highlights

• Next.js and Tailwind CSS for a fast, responsive interface
• Firebase Authentication and Firestore for real-time sync
• Cloud Functions for transactional updates and token validation
• Secure QR system with one-time tokens
• Offline-ready PWA architecture
• Modular code structure for scalability

Why PWA

Since most users will discover the app in-store, using a PWA makes onboarding simple. Customers can scan a QR sticker, open the app instantly in their browser, and add a loyalty card to their wallet without needing to download anything. This approach lowers friction and helps small businesses gain traction faster.

Current Status and Next Steps

The app is still in active development and approaching production readiness. The core customer and business features are functional, and real-world testing with local cafés is planned once the MVP is stable. Next steps include improving data relationships, adding analytics for businesses, and refining the design for accessibility and performance.

Conclusion

The Loyalty App is an ongoing project that combines frontend design, full-stack development, and real-world problem-solving. It demonstrates my ability to architect a secure, scalable PWA using Next.js and Firebase, while balancing business goals, UX, and technical constraints.