Home
Thumbwar Mobile App v2.0

Thumbwar Mobile App v2.0

to : In less than three months, we rewrote an iPhone-only native app to a cross-platform native app, using React Native and AWS.

Showcase & Media

Screenshots

Check out photos of this project

Architectural Diagrams

Check out architectural diagrams of this project

Problem

What was the problem to be solved?

Thumbwar (which is partially owned by Gunner Technology) is a social media based mobile app launched in 2014 that allows friends and followers to challenge each other to Thumbwars and track results.

The original app was written in Swift for iOS while the backend was written in Ruby on Rails and hosted on Heroku.

Three significant problems caused us to pivot and start over completely on the app:

1) It was only available for iOS

2) We were having problems scaling the REST-based API which was backed by a Postgres database

3) Following the Cambridge Analytica fiasco, Facebook was forcing developers to re-write or abandon integration with their API, of which Thumbwar was 100% reliant upon.

Solution

What was the proposed solution?

As a company, we have largely shifted focus to JavaScript-based solutions.

In light of this, we decided we would rewrite the front and back ends in JavaScript, using React Native for the client and Node.js for the GraphQL backend.

This would allow us, also, to publish the app as an Android application as well.

Additionally, we wanted to make the app more fault tolerant, available, performant and scalable so we focused on a Serverless infrastructure on AWS.

Challenges

What challenges arose during the project?

The biggest challenge was migrating the data from a relational Postgres database to the NoSQL-based DynamoDB.

Not only did we have to migrate the database, but we had to implement replication to Elastic Search via DynamoDB Streams to ensure we wouldn't lose any of the queries from the previous version of the application.

Technical

What was the technical approach to the project?

We went pure JavaScript, leaning heavily on RxJS, React Native, ES2016 and Node.

We used AWS AppSync and Mobile Hub to Bootstrap the API, Authentication and deployment.

Management

What was the project management approach to the project?

We used an Agile Scrum approach to the project with one-week iterations.

We started the project with two Research Sprints mainly to dig up information on App Sync and how we could use a NoSQL data store without losing the queries we relied on.

From there, we started with the first feature sprint, and from that point forward combined bugs and features in each one week sprint until we were satisfied with launching the new app and shuttering the old one.

Architectural Description

What platform was built for this project?

We relied heavily on AWS AppSync to accomplish this.

AWS AppSync automatically updates the data in web and mobile applications in real time, and updates data for offline users as soon as they reconnect. AWS AppSync makes it easy to build collaborative mobile and web applications that deliver responsive, collaborative user experiences.

We use AWS AppSync to build native mobile and web apps with iOS, Android, JavaScript and React Native.

AppSync let us specify the data requirements of the application with simple code statements and iterate quickly during the prototyping and development process.

AppSync uses GraphQL, an open standard query language that makes it easy for applications to request data from the cloud.

AppSync automatically manages all the data operations for offline users. The service supports an offline programming model where application data is not only available for users who are offline, but users can also add and update app data locally as well. This makes it easy to build apps that cache important data locally for offline use, and then synchronize with the cloud when the device reconnects.

The service integrates with Amazon Cognito and AWS Identity and Access Management, allowing us to set fine-grained permissions on GraphQL operations that put strict controls on who can access the data.

AppSync makes it easy to combine data from different sources. With AppSync, we could access data in Amazon DynamoDB, trigger AWS Lambda functions, or run Amazon Elasticsearch queries and combine data from these services to provide the exact data we needed.

Lessons

What did you learn from working on this project?

We learned the frustrations of trying to use DynamoDB for complex data retrieval and how to get around it with data replication to Elasticsearch.

We also learned to never hitch you wagon to a source you don't control. In this case it was Facebook who threatened to derail the whole project with changes to its API.

Benefits

How did this project benefit the client?

The migration was a success and we're now running a fault tolerant, highly available, Secure and Serverless infrastructure at less than half the cost of the previous infrastructure.

Why Gunner?

Why was Gunner selected for this project?

Gunner owns a significant portion of Thumbwar, so it was an easy choice.

Proficiencies

What tools, techniques and methodologies were used on this project?

[object Object]

Adobe Illustrator

Create logos, icons, sketches, typography and complex illustrations

[object Object]

Adobe Photoshop

Photoshop is Adobe's photo editing, image creation and graphic design software.

[object Object]

Agile

Agile software development refers to a group of software development methodologies based on iterative development, where requirements and solutions evolve through collaboration between self-organizing cross-functional teams

[object Object]

Amazon API Gateway

Amazon API Gateway is a fully managed service that makes it easy for developers to create, publish, maintain, monitor, and secure APIs at any scale.

[object Object]

Amazon CloudFront

Amazon CloudFront is a content delivery network offered by Amazon Web Services.

[object Object]

Amazon Cognito

Simple and Secure User Sign-Up, Sign-In, and Access Control

[object Object]

Amazon DynamoDB

DynamoDB is a nonrelational database for applications that need performance at any scale

[object Object]

Amazon Guard​Duty

Intelligent threat detection and continuous monitoring to protect your AWS accounts and workloads

[object Object]

Amazon Inspector

Automated security assessment service to help improve the security and compliance of applications deployed on AWS.

[object Object]

Amazon S3

Object storage built to store and retrieve any amount of data from anywhere

[object Object]

Amazon SES

Flexible, affordable, and highly-scalable email sending and receiving platform for businesses and developers

[object Object]

Amazon SNS

SNS is Pub/Sub messaging and mobile notifications for microservices, distributed systems, and serverless applications.

[object Object]

Android SDK

Android is a mobile operating system developed by Google, based on a modified version of the Linux kernel and other open source software and designed primarily for touchscreen mobile devices such as smartphones and tablets.

[object Object]

Apollo

Apollo binds data to your UI with the ultra-flexible, community-driven GraphQL client for React, JavaScript, and native platforms.

[object Object]

AWS Amplify

AWS Amplify is a toolchain which includes a robust feature set for simplifying mobile and web application development.

[object Object]

AWS AppSync

AWS AppSync automatically updates the data in web and mobile applications in real time, and updates data for offline users as soon as they reconnect.

[object Object]

AWS CodeCommit

AWS CodeCommit is a fully-managed source control service that hosts secure Git-based repositories.

[object Object]

AWS IAM

Securely control access to AWS services and resources for your users

[object Object]

ES6

The next version of JavaScript

[object Object]

Fabric

Fabric is a platform that helps your mobile team build better apps, understand your users, and grow your business.

[object Object]

Fastlane

Fastlane connects all iOS and Android deployment tools into one streamlined workflow

[object Object]

Git

Fast, scalable, distributed revision control system

[object Object]

Gradle

Gradle is a build system for the JVM

[object Object]

GraphQL

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.

[object Object]

Node.js

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications

[object Object]

React Native

React Native is a framework for building native mobile apps with React

[object Object]

RxJS

Reactive Extensions for JavaScript

[object Object]

Serverless Framework

Build web, mobile and IoT applications with serverless architectures using AWS Lambda, Azure Functions, Google CloudFunctions & more

[object Object]

TestFlight

TestFlight makes it easy to invite users to test your apps and collect valuable feedback before you release them on the App Store.

[object Object]

Webpack

Webpack is a module bundler

WO

Wizard of Oz Prototyping

Wizard of Oz prototyping (WOZ prototyping) is a design methodology used in rapid product development to improve the user experience (UX).

[object Object]

Yarn

Yarn is a package manager for JavaScript