How We Built Dealmap With React Native, Redux, and Realm
Dealmap is an app we built at Quantum Mob. Use it to find real-time food and drink deals at your local restaurants and pubs. Find out when it's half price wing day down the street, or if your local pub has IPAs for $4.
Table of contents:
About Dealmap
Dealmap is an app we built at Quantum Mob. Use it to find real-time food and drink deals at your local restaurants and pubs. Find out when it's half price wing day down the street, or if your local pub has IPAs for $4.
We didn't initially set out to do this. We were happy to push our consulting business forward. But after putting in a good work session, we'd keep asking each other where should we go? What day was it that had half-priced chicken wings? Where was that beer deal we liked?
Problem
All of the restaurants and pubs around our office had daily deals. The problem was these places weren't keeping their deals posted anywhere besides their menu insert or their sandwich board. Their websites weren't updated and most didn't post their deals anywhere else.
We found ourselves keeping a list of deals on Google Keep only for it to quickly get out of hand.
We wanted to create an app that you pull up when you want to make a decision where to go to have some cheap food and drinks with friends or colleagues.
Prototype
When we started building Dealmap, we were trying to solve a need. Over drinks, that need became an idea, then proof of concept, and finally an iOS & Android app.
Over a few weekends, we initially built a prototype web version of Dealmap using React, Redux, GraphQL, Node, and Mongo. We leveraged Mongo for its out of the box Geospatial functionality and GraphQL for its flexibility and support for custom requests.
We found ourselves using it at every opportunity.
Check out our v1:
Iteration
An immediate problem we ran into was the feel of using the web app on our phones. The mobile experience wasn't as optimized as we would like. Take a look at the screenshot above and imagine trying to browse for deals. We knew we needed an iOS and Android app as a next step.
Final Solution
The Stack
Mobile
API
Server & Build
Analytics
React Native & Co.
We used React Native with Redux to build the beta version of the app. Some of our engineers had native mobile experience, but we wanted to allow anyone to jump on to support the codebase if they wanted. After all, this was a side project and whoever had time on weekends and evenings could knock off our backlog of tasks.
Also, it didn't hurt that React Native has a large and growing community of support with online giants like Facebook and Airbnb leading the pack.
Initially, we used Redux in React Native for everything to communicate with our existing GraphQL server.
Trying to optimize for performance, we leveraged Realm on our app, which allowed us to take advantage of domain objects that could have computed values such as a summation of properties. The amount of boilerplate code required for Realm is much less than Redux. Now all data is stored and processed in Realm and continued to use Redux for all state management. If you want to read a little more about Realm vs. Redux, check out our recent article on it.
We moved away from Sagas to Thunks to simplify the calls. We also improved overall performance through caching and optimized rendering of our list and map.
Build Automation
Every good development pipeline has some automation. We set up our continuous integration pipeline using Jenkins, Hockeyapp, and Fastlane. Our trusty Mac Mini server builds our iOS app and tirelessly deploys it, saving us a lot of time.
Hockeyapp was very useful during our early build stage. It allowed us to release a new version and test across all our devices immediately.
We eventually moved to Testflight and Google Play beta through Fastlane for testing when we were ready to move to production.
After getting rejected during on iteration for re-using Android screenshots on the App Store, we decided to automate the submission process for appending new screenshots for every App Store and Google Play Store submission.
Debugging and logging
To track actions and see results of our A/B testing, we use Google Analytics and Mixpanel.
We logged all errors through Sentry, which is sent to our Slack channel for our engineers to debug. Getting instant feedback when an end user has an exception helps tremendously. With Sentry logging, you can identify exactly where in the app an error was originating from. It returns the line of code and class where an exception occurred, along with anonymous device information to assist in replicating the bug on your side.
Response
The reception was ecstatic. Every person we explained the app to wanted to give it a shot. I've had many hobby projects, but none have ever been so easy to explain. Users wanted to contribute new deals and were emailing us to add their local restaurants with a breakdown of their deals.
We eventually added a camera feature for users to upload a picture of an establishment's deal list to submit new deals.
Due to the positive response, we decided to launch a marketing campaign that had a similar, casual tone as the copy on our website:
Based on slang and emojis.
Conclusion
Dealmap is en route to capture the downtown market for Toronto.
Our next few releases will focus on allowing businesses to manage their own deals, promote special events/one-day deals, allowing user customization, and increasing user engagement.
Dealmap will live on as a Quantum Mob project, supported by our creative, engineering, and marketing teams.
Download Dealmap today and start saving at your favourite pubs and restaurants!
If you have other questions about our tech stack or any challenges we faced, we'll do our best to answer below. Thanks for reading!
Enjoyed this post?
Newsletter Sign-up
Receive summaries directly in your inbox.
