A React Native app for Android and iPhone with stamps, order-ahead and push offers across 34 stores.
View live demo Opens a working demo with sample content in a new tab.
On location
Barista LattePhoto: Burst (CC0)
Barista PouroverPhoto: Burst (CC0)
Barista PouringPhoto: Burst (CC0)
Barista LattePhoto: Kristin Hardwick (CC0)
Barista LattePhoto: Kristin Hardwick (CC0)
About the Project
This project is a coffee shop loyalty app for a speciality coffee chain with thirty-four stores. Its paper stamp cards were easy to lose and easy to fake, its morning queues sent busy customers elsewhere, and its offers went to everyone at once with no way of telling which ones worked.
We built a React Native app for Android and iPhone that combines digital loyalty stamps, order-ahead with Apple Pay and Google Pay, and push offers targeted by store and habit. Stamps are awarded on the server through the point-of-sale integration, so they cannot be forged or lost, and the app is maintained by the chain’s existing web team from one codebase.
About the Client
The client is a speciality coffee chain known for single-origin beans and careful brewing, with thirty-four stores and a loyal base of regulars. Many customers visit the same store at the same time every weekday, often on the way to work.
The business wanted to reward that loyalty properly, take the pressure off the morning rush, and understand which offers brought customers back, store by store.
Project Goals
Replace paper stamp cards with digital stamps that cannot be forged or lost.
Let customers order ahead, pay in the app and collect without queuing.
Target offers by store, visit frequency and product preference.
Measure offer performance per store and per segment.
Ship changes quickly with one codebase the in-house web team can maintain.
Project Overview
The Challenge and Our Solution
The Challenge
Paper loyalty cards were being lost, duplicated and occasionally forged, and the chain had no way to contact regulars or to understand what they bought. Morning queues meant commuters walked away, and the marketing budget went into offers nobody could measure.
Our Solution
We built one React Native app for both platforms, sharing TypeScript models and business rules with the chain’s existing web ordering system. Stamps are awarded server-side against the point-of-sale integration so they cannot be forged, order-ahead lets customers pay in the app and collect at a set time, and push notifications are segmented by store and buying pattern rather than broadcast to everyone. Over-the-air updates let the team ship copy and offer changes without an app-store release.
Digital Loyalty Stamps Awarded at the Till
The most important design decision was where stamps come from. Instead of the app deciding when a customer has earned one, stamps are awarded server-side through the point-of-sale integration whenever a qualifying purchase goes through the till. A screenshot cannot create a stamp, a lost phone does not lose a card, and staff no longer need to remember to stamp anything.
Digital stamps replaced paper cards across all thirty-four stores, and regulars can see exactly how close they are to their next free drink every time they open the app.
Stamps awarded through the POS integration
No forgery, no lost cards
Progress to the next reward always visible
An Order Ahead App That Beats the Morning Queue
Order-ahead lets customers choose their store, pick a collection time, customise their drink and pay with a saved card, Apple Pay or Google Pay. The order reaches the store’s system with the requested time, and the drink is ready when the customer walks in.
For regulars on a tight schedule, the queue was the main reason to walk past. Order-ahead removed it as a reason to walk away, and it spreads demand more evenly across the busiest hour.
Customers can save a favourite order and repeat it in two taps, which suits regulars whose drink rarely changes, and a notification tells them when the order is ready to collect.
Segmented Push Notifications That Respect Customers
Offers are sent through Firebase Cloud Messaging, but never to everyone at once by default. Segments are built from store, visit frequency and product preference, so an oat-milk drinker at one store hears about the offer that suits them rather than a generic blast that teaches people to ignore notifications.
Because every offer is tied to a segment and redemptions come back through the till, offer performance became measurable per store and per segment for the first time, turning marketing guesswork into evidence.
One React Native Codebase and Over-the-Air Updates
The chain’s team already worked in JavaScript and TypeScript on the web, so React Native let them own the app without hiring separate iOS and Android specialists. React Navigation structures the app, a Node.js API connects it to the POS and offers, and Fastlane automates builds and store releases.
Copy, offers and layout changes ship over the air without waiting for app store review, so a seasonal menu or a rainy-day offer can go live the same morning it is decided.
Our Process
How We Delivered It
1
Behind the Counter
We spent mornings in stores to see how orders, stamps and queues really worked at peak time.
2
POS Integration Design
How purchases, stamps and order-ahead tickets flow between the till, the API and the app agreed with the POS provider.
3
Designing the Daily Habit
Short journeys for regulars: reorder a favourite, check stamps and pay in a few taps.
4
React Native Build
One TypeScript codebase with Apple Pay, Google Pay, push messaging and over-the-air updates.
5
Store-by-Store Launch
Rolled out with staff briefings and in-store prompts, then offers tuned using per-store results.
Key Features
What We Delivered
Digital loyalty stamps
Awarded server-side through the point-of-sale integration — no forgery, no lost cards.
Order ahead & pay
Store selection, collection time, saved cards and Apple Pay or Google Pay.
Segmented push offers
Notifications targeted by store, visit frequency and product preference.
Over-the-air updates
Copy, offers and layout changes shipped without waiting for store review.
Outcome
Results and Impact
Digital stamps replaced paper cards across all 34 stores.
Order-ahead removed the morning queue as a reason to walk away.
Offer performance measurable per store and per segment for the first time.
One codebase for Android and iPhone, maintained by the existing web team.
Client Feedback
What the Client Says
★★★★★
Paper stamp cards are gone and the morning queue has thinned out.
Retail DirectorSpeciality coffee chain
Services
Services Behind This Project
The React Native App, React, Mobile App expertise we used to build this mobile app development — and can bring to yours.
Node.js back-end development: Express and NestJS APIs, real-time services, background jobs, MySQL/MongoDB data layers and Redis caching.
Learn more
FAQ
Frequently Asked Questions
Does a loyalty app need to integrate with our till system?
For stamps that cannot be faked, yes. Awarding stamps through the point-of-sale integration means they reflect real purchases. We work with your POS provider’s API or integration partner, and confirm what is possible during discovery.
Can customers order ahead and pay with Apple Pay or Google Pay?
Yes. The app supports saved cards plus Apple Pay and Google Pay, so paying takes a tap. Orders arrive at the chosen store with a collection time, and customers get a notification when their drink is ready.
How do you avoid push notifications annoying customers?
By segmenting. Offers go to customers based on their store, how often they visit and what they buy, rather than to everyone. Fewer, more relevant messages keep notifications welcome and make it possible to measure what each offer achieves.
Why React Native for a coffee chain app?
One codebase serves Android and iPhone, and teams with JavaScript or TypeScript experience can maintain it. Over-the-air updates also let you change copy, offers and layouts without waiting for app store review, which suits a business that changes its menu often.
Can the app work across many stores with different menus?
Yes. Store selection drives the menu, collection times and offers shown, so each location can have its own products and opening hours while customers keep one account and one loyalty card across the whole chain.
What affects the cost of a loyalty and order-ahead app?
The POS integration is usually the biggest factor, followed by the number of payment methods, the depth of offer targeting and how many stores launch at once. Starting with stamps and order-ahead, then adding segmentation, keeps the first release focused.
Similar Work
Related Projects
Case studies built with the same technologies or for similar needs.
