Home
Save Fav Page Mobile App

Save Fav Page Mobile App

to : We built a social media mobile app that would allow companies to mobilize its supporters when they needed a social marketing bump.

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?

A prospect approached Gunner Technology about building, essentially, a Facebook notifier.

The company wanted a way to remind (and keep reminding) their employees to spread the company's social media post and also bury competitors social media posts.

Facebook's Algorithm boosts posts based on many factors, some of these being number of likes, shares and comments.

So whenever the company posted something, it would blast a company-wide email asking employees to share, like and comment on the post.

This was inefficient, however, as most employees would intentionally or unintentionally ignore the emails or couldn't find the posts.

They asked Gunner to propose a better solution.

Solution

What was the proposed solution?

Gunner's solution was to allow users to sign up for a third party app which we would build, using their Facebook account.

Once signed up, the app would allow the user to search for Facebook pages and add them to their "watch list." - additionally, admins could add Facebook pages for users in their company.

Whenever one of the pages created a new post, it would appear in the user's dashboard and stay there until the user liked, shared and commented on it.

Commenting and sharing could be done directly from the third party app we would build. Facebook doesn't allowing liking via third-party apps.

Additionally, our app would send push notification reminders to the user until they cleared their dashboard.

Challenges

What challenges arose during the project?

The main challenge was the timeline.

Thirty days to build a native application for both Android and iOS .

The only other challenge was to efficiently create jobs that would poll for updates from a potentially wide number of pages.

Technical

What was the technical approach to the project?

React Native was a must given our timeline. There was no way we could develop separate Swift and Java apps in that limited amount of time.

The app also needed to be available in web browsers so we re-used the backend to create a React web app in relative ease.

Also, GraphQL helped us tremendously as it allowed us to declaratively build out and connect our backend and iteratively add and optimize the data transferred between the app and the backend.

We wired this all up using AWS AppSync and Mobile Hub. Amplify, in particular made integrating with Facebook login much easier via Cognito.

For the polling of pages, we created Lambda tasks on a recurring schedule using Node.js Lambda functions and SQS queues.

These functions grabbed the data and created markers in our DynamoDB.

This gave us a completely Serverless setup.

We used Material UI for the Design Framework and created a very minimalistic design that focused on allowing the users to navigate between pages.

Management

What was the project management approach to the project?

Using Agile Scrum, we took an iterative approach to this project with a team consisting of a back-end engineer, frontend engineer, a designer and a project manager - with each iteration lasting one week.

We started out with nothing (no mocks, no wireframes, etc), but we didn't have time for Research Sprints, so we jumped right in with a modification of our usual pattern:

1) One week function sprint where we added new functionality

2) Half week QA sprint

3) Half week bug fix sprint

Repeat until finished.

Architectural Description

What platform was built for this project?

We chose a Serverless architecture because it provides the perfect combination of Scalability and cost.

As this was a new product, we knew that initial usage would be very low and we were working with a near non-existent hosting budget, so a traditional, redundant, fault-tolerant architecture was unrealistic and wasteful.

However, using Serverless with AWS allowed for us to create a setup that will scale infinitely and immediately with no additional changes need from us. The cost will increase with usage, but at that point, the app will be generating revenue.

In the meantime, the setup runs itself for less than $15 a month.

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.

As mentioned, we used the Serverless Framework to manage background processing of Facebook posts via Node.js Lambda functions and SQS queues.

Lessons

What did you learn from working on this project?

We learned a lot about the Facebook API - especially around the throttling and limitations.

We also learned a lot of rules about their platform and what is and is not against their terms of use.

Benefits

How did this project benefit the client?

Within a month of launching the app, our client saw a 165% increase in post engagement on Facebook, a 67% increase in traffic to their site and a 48% increase in conversions via the site.

Unfortunately, the changing regulations around Facebook due to the Russian and Cambridge Analytica scandal have put this app on indefinite hiatus as we lost access to data we needed to make this app work as designed.

Why Gunner?

Why was Gunner selected for this project?

Given the time constraints, we were the only firm that could promise delivery.

Aside from that, we offered the best solution for a niche problem and articulated it in a way the client could understand.

Proficiencies

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

[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 CloudWatch

Monitor AWS resources and custom metrics generated by your applications and 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 Kinesis

Store and process terabytes of data each hour from hundreds of thousands of sources

[object Object]

Amazon S3

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

[object Object]

Amazon SNS

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

[object Object]

Amazon SQS

Fully managed message queues for microservices, distributed systems, and serverless applications

[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 CloudTrail

Record AWS API calls for your account and have log files delivered to you

[object Object]

AWS CodeBuild

Build and test code with continuous scaling.

[object Object]

AWS CodeCommit

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

[object Object]

AWS CodeDeploy

Automate code deployments to maintain application uptime

[object Object]

AWS CodePipeline

Continuous delivery service for fast and reliable application updates

[object Object]

AWS Lambda

AWS Lambda lets you run code without provisioning or managing servers.

[object Object]

AWS Shield

AWS Shield is Managed DDoS Protection for platforms and services built on AWS.

[object Object]

Babel

Babel is a compiler for writing next generation 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

GA

Google AdWords API

The AdWords API allows apps to interact directly with the Google Ads platform, vastly increasing the efficiency of managing large or complex Google Ads accounts and campaigns.

[object Object]

Google Analytics

Google Analytics provides Enterprise-class web and mobile analytics.

[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]

JavaScript

JavaScript is the world's most widespread programming language, powering the Internet.

[object Object]

Jest

Jest is used by Facebook to test all JavaScript code including React applications.

[object Object]

Material Design

Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science.

[object Object]

Material UI

Material UI is a CSS Framework and a Set of React Components that Implement Google's Material Design

[object Object]

React

React is a JavaScript library for building user interfaces.

[object Object]

React Native

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

[object Object]

RxJS

Reactive Extensions for JavaScript

S

Scrum

Scrum is a framework for project management that emphasizes teamwork, accountability and iterative progress toward a well-defined goal.

[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

[object Object]

Xcode

Xcode is an iIDE for macOS containing a suite of software development tools developed by Apple for developing software for macOS, iOS, watchOS, and tvOS

[object Object]

Yarn

Yarn is a package manager for JavaScript