Home
Shudi Mobile App

Shudi Mobile App

to : Gunner built a native android and iPhone app designed to gather social feedback from friends in less than three months using AWS AppSync and React Native.

Client

Showcase & Media

Video Case Study

Post Mortem Discussion

Wireframes

Check out wireframs of this project

Screenshots

Check out photos of this project

Architectural Diagrams

Check out architectural diagrams of this project

Problem

What was the problem to be solved?

Matt Peterson is an active duty serviceman and entrepreneur who created an idea to crowdsource decision making via a social platform.

The idea was to allow users to post simple, binary items such as "Which one should I get for lunch?", including a photo of each item.

The app alerts other Shudi users about the post and places it in a global feed for all users to see.

Users can then vote for which option they suggest and comment to tell the creator why they voted the way they did.

The problem was that Matt couldn't find anyone to build it.

He tried outsourcing the project but got back a jumbled, non-functioning mess.

Having spent most of his budget with nothing to show for it, he was ready to give up.

Solution

What was the proposed solution?

With a tight budget and a dwindling passion, the Gunner Technology team knew it had to get something built for Peterson.

"He was in a situation we see a lot," Gunner founder and CEO, Cody Swann, said. "He had an idea and turned to outsourcing to get it built. It's an attractive idea because overseas outsourcing is so cheap. Unfortunately, it usually ends up being the more expensive option."

This forced the team to plan out a Minimum Viable Product that they could launch to build momentum.

"This was a zombie project," Swann said. "So we looked at like: What is the MVP that is fun and engaging, but also shows off the potential of what Shudi is and where it's headed."

Challenges

What challenges arose during the project?

Budget was the big problem.

There virtually wasn't any left.

Even worse, the team realized that all the work the previous firm had done was worthless and would essentially need to be thrown away.

"The idea is brilliant and simple - surely nothing we haven't tackled before," Gunner COO, Kylie Ware, said. "And fortunately, we have a forward-thinking team that saw the potential in Shudi. We weren't worried about the budget for the initial build out because we believed in Matt and his vision. We knew there would be plenty of work in the future."

Technical

What was the technical approach to the project?

Fortunately, not only does Gunner have a team that is conducive to shoe-string budgets, it also has a technology stack that is as well.

"We have a partnership with Amazon Web Services, which allows us to offer enterprise-level infrastructure for virtually nothing," Swann said. "We also lean heavily on cutting edge technologies, which offer better quality at lower costs than your traditional enterprise stack."

The crux of the stack is React Native which allows Gunner to build Android and iOS apps using the same code.

"That's the funny thing," Swann said. "Matt was only thinking iOS and that's originally what he tried to have build, but when I told him we could build both Android and iOS for less than what he paid for the broken iOS build, I think his jaw dropped."

The React Native platform took advantaged of several supplemental technologies including Expo for prototyping, GraphQL via Apollo for API integration, Amazon DynamoDB for data persistence and storage, Amazon S3 for file and photo storage, AWS Lambda to execute the backend Node.js code, Amazon Pinpoint for mobile analytics, Amazon SES for sending emails, Amazon SNS for sending SMS messages, Amazon Cognito for authentication and account management, Amazon API Gateway to connect to Lambda, and AWS AppSync and AWS Amplify to make managing all these services easier.

JavaScript was used on both front and backends,Yarn was used for dependency management, Webpack for bundling and Babel for transpiling ES6 to vanilla JavaScript.

For design, the team wireframed the app in Adobe Photoshop and Adobe Illustrator and turned to Material UI to implement the Material Design Design Framework into the functioning app.

"That was a no brainer," mobile developer, Elena Villanueva, said. "With a social app, you want to follow familiar patterns. Sharing, commenting, posting - these are all common actions that should be immediately familiar to a user. They shouldn't have to learn your design."

Management

What was the project management approach to the project?

For the most part, Gunner handled this project with a typical Agile Scrum approach.

"There were few unknowns, so we didn't spend much time on a Research Sprint," Swann said. "What was unusually, was that, given Matt's situation where he was deployed overseas, we couldn't have our normal live demos at the end of each sprint. So we would record demos and send them to him, but sometimes he wouldn't be able to respond for a couple weeks."

In the end, this didn't prove to be a problem for the Gunner team as they finished the three-month project two weeks early.

"I honestly think this may have been the smoothest project we've ever taken on," Swann said.

Architectural Description

What platform was built for this project?

Amazon Web Service provided the backbone of the app's infrastructure.

"That's not really a surprise, considering AWS offers fully managed services that provide the skill of a giant ops and admin team with almost none of the cost," Gunner solution architect, Ethan Sloan, said. "We're able to put together a high Security, Self-healing infrastructure with enterprise level Availability, Reliability and Scalability."

Additionally, the team used the Serverless framework to build and manage the CloudFormation templates used to define and setup the various Microservices the app runs on.

Finally, for Gunner created three separate environments - development, staging and Production - to implement a Continuous Development, Git-based, DevOps framework leveraging technologies such as AWS CodeCommit, AWS CodeDeploy, AWS CodePipeline and AWS CodeBuild.

"Sounds impressive, right?" Swann said. "And it is. And yet, for all that, we charge Matt less than $15 a month in hosting costs."

Lessons

What did you learn from working on this project?

At the time, AWS Amplify was just being released, so the Gunner team had to learn how to use it.

"That's the fun and frustration with cutting-edge tech," Villanueva said. "More fun that frustrating in this case especially because Amplify is well-documented and Open Source."

Since then, the team has used Amplify in numerous other projects, so it was well worth the effort.

"Despite the learning curve, we released quicker than we would have without it," Swann said.

Benefits

How did this project benefit the client?

The original firm that Peterson outsourced this project to delivered a non-functional iOS app with a budget that was 10 times the size of Gunner's and took twice as long to deliver.

And when the app was "finished" it didn't even work.

"With a fraction of the budget, we delivered and deployed fully functional iOS and Android apps," Swann said. "The previous team couldn't even release an iOS version."

Why Gunner?

Why was Gunner selected for this project?

Gunner had the unique ability to focus on what was important to manage budget and time constraints while still creating a fun application which definitely highlights Shudi's potential.

Gunner provided valuable business process insights as well, helping to create a plan to get from prototype to investment.

Related Projects

What are similar projects Gunner has worked on?

[object Object]

Thumbwar Mobile App v2.0

Both Thumbwar and Shudi are social apps built on React Native and use many of the same technologies under the hood.

[object Object]

eCapture Mobile App

Both eCapture and Shudi used React Native and AppSync to quickly release native iOS and Android mobile app.s

[object Object]

uConsent Mobile App

For both uConsent and Shudi, Gunner used React Native, AWS Amplify and AWS App Sync to build native iOS and Android mobile apps.

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 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 Elasticsearch Service

Fully managed, reliable, and scalable Elasticsearch service.

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

Model and provision all your cloud infrastructure resources

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

Securely control access to AWS services and resources for your users

[object Object]

AWS Lambda

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

[object Object]

Babel

Babel is a compiler for writing next generation JavaScript

[object Object]

Elasticsearch

Elasticsearch is an Open Source, Distributed, RESTful Search Engine

[object Object]

ES6

The next version of JavaScript

[object Object]

Expo

Expo is a free and open source toolchain built around React Native to help build native iOS and Android projects using JavaScript and React.

[object Object]

Fabric

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

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

JavaScript

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

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

Node.js

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

[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

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