Inspiration
As college students, we are no stranger to loyalty cards often given out by cafes, boba shops, etc. to incentivize loyal customers to return. However, we found it frustrating that this concept was still stuck in the old ways with paper. People would hold up lines fumbling through their wallets and purses trying to find a nonexistent loyalty card that they thought they had before.
On the other end, many small businesses want to attract more customers and sales, especially during the pandemic. Sales are lagging, and businesses are doing everything they can to make ends meet.
We can do better, and Loyalty is the answer.
What it does
Loyalty offers a clean and simple interface for storing all your loyalty cards. It makes loyalty cards easy to add with our nearby campaigns feature. Getting a stamp from your favorite restaurant is just a few taps away, and you can easily monitor all the stamp cards you have. We also made it easy for businesses to create their cards. They simply fill out a form with the offer and the number of stamps they want, and a new stamp card can be created. Multiple businesses can join the same campaign stamp card, making it easy for cross over promotion.
How we built it
We prototyped our design to have two modes: businesses and consumers. Businesses are able to easily create new stamp card campaigns and team up with other businesses to use/create them. Users are able to search for new stamp cards to become part of and monitor their stamp cards. To receive stamp cards, a QR code is generated and presented to the user, and the business cashier can use the app to scan the QR code, confirm the recipient of the stamp, and give it. The Figma is here
The interface for Loyalty is built on React Native using Expo to be available to all mobile users, whether Android or iOS. For better styling, we used react-native-elements as a component library. We also used libraries for building the map and carousel.
The backend is made with Node.js and uses a MongoDB server to maintain data. The routes are created with Express.js. Details on them can be found in our tech doc here.
Challenges we ran into
- We are working with unfamiliar tech stacks
- React Native is not easy to debug
- React Native is React Native
- Many React Native components and libraries were difficult to style and work with, and often lacking - examples
Accomplishments that we're proud of
- We got features like maps and cameras/image scanning to work
- We connected a decent portion of the application to the backend
- Our rookie hackathon members built a backend for the first time
What we learned
- React Native makes us sad
- MongoDB is pretty accessible and comparable to other noSQL databases like Firebase
What's next for Loyalty
- Finishing features like login, QR code formation, and card creation
- Add animations upon stamp awarding
- A search bar for searching for stamp card campaigns
- Squash any new bugs that will arise and fix any current ones
- Revamp the design for a smoother UI/UX
Log in or sign up for Devpost to join the conversation.