
<CaseStudyOverview title="Web and mobile project estimation for developers!">
    Our Devstimate app makes project estimation almost fun. Add tasks, estimate, and get total cost in no time. 
    Agile fan? You can also score tasks with story points, set sprint length and velocity, and get total cost range based on scores.

    The first version of Devstimate is now out for [Android](https://play.google.com/store/apps/details?id=com.embp.devstimate) and [iOS](https://apps.apple.com/us/app/devstimate/id1422848453).

</CaseStudyOverview>
<OurResponsibilities>
    This is our product so we worked end-to-end on it. It was a great experience from deciding
    what would our MVP would look like, to designing, developing and publishing the app.

    <OurResponsibilities.Responsibility title="Product Strategy" img="/pinkBox-caseStudies.jpg">
        We determined the MVP version and prioritized our backlog. We took our product plan and created a plan for releasing our first version.
    </OurResponsibilities.Responsibility>
    <OurResponsibilities.Responsibility title="Design" img="/pinkBox-caseStudies.jpg">
        We stuck with a very minimal design. Our goal was to get to market as quickly as possible
        and get feedback.
    </OurResponsibilities.Responsibility>
    <OurResponsibilities.Responsibility title="App Development" img="/pinkBox-caseStudies.jpg">
        We chose React Native as our app platform to help us very quickly get our MVP out to
        Apple and Google play stores with a single code-base.
    </OurResponsibilities.Responsibility>
    <OurResponsibilities.Responsibility title="Backend Development" img="/pinkBox-caseStudies.jpg">
        We chose Firebase for a very simple and straight-forward backend solution.
    </OurResponsibilities.Responsibility>

</OurResponsibilities>
<Container>

    ![Devstimate](/images/devstimate-screenshot.jpg "Devstimate screenshot")

    ## React Native

    Our front-end uses React Native, which we are big fans of due to the speed
    of development, hot-reloading, and of course its cross-platform approach
    which means we work a lot less to bring the app to our target platforms.

    The app uses the [React Native Firebase](https://rnfirebase.io/) library to
    bring native Firebase features into React Native.

    We currently are using anonymous login into firebase, realtime database, and
    remote config features. As we listen to our users and continue to develop we
    will continue to implement other Firebase features.

    You can say the heart of the app is [Redux](https://redux.js.org/) which handles
    the global app state,
    and [React Redux Firebase](https://github.com/prescottprue/react-redux-firebase)
    helps us glue Firebase and Redux very seamlessly into
    our screens.

    Other notable libraries we use in this project:

    - [React Navigation](https://reactnavigation.org/)
    - [React Native Elements](https://github.com/react-native-training/react-native-elements)
    - [React Native Swipeable](https://github.com/jshanson7/react-native-swipeable#readme)
    - [React Native Vector Icons](https://github.com/oblador/react-native-vector-icons)

</Container>

![Devstimate screenshot 2](/images/devstimate-screenshot2.jpg "Devstimate screenshot2")

<Container>
    ## Serverless Architecture

    ![Firebase logo](/images/firebase-logo.svg "Firebase logo")

    [Firebase](https://firebase.google.com/) is great because it handles so much of the tedious back-end work.

    We fully rely on the realtime database, without any additional code logic on the server to get the user to
    manage their data. This has saved a huge amount of hours and allowed us to bring a prototype version to
    testers quickly.

    [Firebase’s Remote Config](https://firebase.google.com/products/remote-config/) feature lets us update
    our estimate templates easily through the Firebase console, without having to push out new app versions.

    We will be adding more Firebase features down the road and continue on the great groundwork we have
    laid so far.

</Container>


Devstimate


<CaseStudyOverview title="DHO Studios needed a website upgrade">
    Their website needed a proper CMS. They contacted us with an interest in getting their web 
    presence refreshed to showcase their amazing work, 
    as well as to provide an easier way to update their website content.

    Thanks to our ninja WordPress skills, we were able to come through with a beautiful looking site,
    with easy to manage and very powerful admin area.

    You can check out their website at [www.dhostudios.com](http://www.dhostudios.com).

</CaseStudyOverview>

<Container>![DHO Studios](/images/dho-studios.png "DHO Studios")</Container>


DHO Studios


<CaseStudyOverview title="The Karma Pea Mobile App">
    The Karma Pea team hired us to build an app built to support multiple platforms with the same code base. 
    A fun app built with the awesome Nape Physics engine which allow the Karma Peas to respond to gravity 
    and device rotation. The app comes with social integration through Facebook. 
    The backend is powered by modern PHP and the awesome Amazon Web Services for media management 
    and Push Notifications.

</CaseStudyOverview>
<OurResponsibilities>
    <OurResponsibilities.Responsibility title="App Development" img="/pinkBox-caseStudies.jpg">
       Mobile app development with Adobe AIR.
    </OurResponsibilities.Responsibility>
    <OurResponsibilities.Responsibility title="UI/UX Design" img="/pinkBox-caseStudies.jpg">
        Custom designed interface, app elements, and backgrounds.
    </OurResponsibilities.Responsibility>
    <OurResponsibilities.Responsibility title="Custom Backend" img="/pinkBox-caseStudies.jpg">
        Fully custom PHP backend.
    </OurResponsibilities.Responsibility>

</OurResponsibilities>

<Container>
    ## UI/UX

    We worked closely with our client to develop wireframes for each screen and use case,
    as well as the entire navigation flow. After revisions at this top level, we moved on
    to design, where we polished the original wireframes to get the final look.

    The result was a fun, light-hearted, cartoony style that matched the goals of the app.

    Once design was ready we had a solid foundation to begin with architecture and
    development of the app and its backend.

    ![Karma Pea](/images/kp-img.png "Karma Pea")

    ## Custom Backend

    PHP as always has a huge market share and is used commonly in the web.
    It’s great because it is flexible. It doesn’t require too much rituals to get
    working on it, and it is easy to build with.

    With Karma Pea, we built custom RESTful web services for the Karma Pea app to consume,
    using the PHP Slim framework to handle routing.

    Working with Slim was a great experience. It made CRUD routing dead simple and worked
    well with our object oriented architecture.

    For authentication, we built a custom token-based auth flow. We handled image processing
    using the Imagemagick library, which converts images to thumbnails and optimizes them as
    needed, as well as auto-orienting them so the app can display them correctly. Once the
    images are ready they are stored in an Amazon S3 storage.

    The back-end interacts with the https://aws.amazon.com/sns/ service, for getting our push
    notifications out to all users. SNS makes it simple to manage both iOS and Android devices,
    and along with some custom code, we were able to manage all devices and perform custom
    operations on them as needed.

    ## App Front-end
    ![AdobeAir logo](/images/adobe-air-logo.png "AdobeAir Logo")

    The app is built with one of our all-time favorite tools, Adobe AIR.

    The great thing about Adobe AIR, is that it is thoroughly battle-tested, it is
    cross-platform (one code base that works anywhere), and it is fun to develop for.

    Sadly, Adobe AIR has gotten less popular than some of the other cool tech we use ,
    like React Native, but we feel there is still a place for it in the market, specially
    on games, or animated physics apps like Karma Pea.

</Container>


Karma Pea


<CaseStudyOverview title="One Tap Gym makes searching and viewing YouTube workout videos a sane experience.">
    You've had a long day at work crunching numbers, making phone calls, and writing emails. 
    You want a convenient video workout, but searching through YouTube for workouts that are the 
    right length and type of workout feels like more work! #aintnobodygottimefordat

    One Tap Gym provides no-brainer workout selection from the best free trainers on YouTube.

    Check out the top 3 workouts for you, or take control and refine your search through a few simple taps.

</CaseStudyOverview>
<OurResponsibilities>
    <OurResponsibilities.Responsibility title="Product Strategy" img="/pinkBox-caseStudies.jpg">
        We determined the MVP version and prioritized our backlog. We took our product plan and created a plan for releasing our first version.
    </OurResponsibilities.Responsibility>
    <OurResponsibilities.Responsibility title="Design" img="/pinkBox-caseStudies.jpg">
        Simple, easy to navigate approach to design.
    </OurResponsibilities.Responsibility>
    <OurResponsibilities.Responsibility title="App Development" img="/pinkBox-caseStudies.jpg">
        We chose Adobe AIR.
    </OurResponsibilities.Responsibility>
    <OurResponsibilities.Responsibility title="Backend Development" img="/pinkBox-caseStudies.jpg">
        We leveraged AWS services.
    </OurResponsibilities.Responsibility>

</OurResponsibilities>

    ![One Tap Gym flow](/images/otg-flow.jpg "One Tap Gym flow")

<Container>

## The Goals

The primary goal with One Tap Gym was to create an MVP (minimum viable product) for the
Google Play Store that stood out from other apps by giving users access to workout content
from YouTube in an easy to use manner.

With an oversaturated category such as workout apps, another goal was to provide something
unique to the market, that hasn’t been done before.

## UI/UX

![One Tap Gym phones](/images/otg-phones.png "One Tap Gym phones")

Our plan was to target users that want the opposite of the typical workout app, and create a more
“opinionated” app, that takes out all the work that comes with lining up a workout video, determining
what body part the user should workout that day, and for those who like using YouTube content,
having to go through the standard YouTube app, which can become a big hassle when searching for
workouts and affects user engagement.

The result was a workout app that is inviting, easy to pick up and use, focusing on bringing workouts
to the user quickly to keep them engaged, not only within the app, but also in their workout goals.

We favored descriptive buttons and icons over instructions, as well as inspirational content that reminds
the user that they can accomplish their own life goals.

We also removed the barriers to get to a workout video as much as possible: One button tap takes you
to a workout they can begin right away.

## Technology

The plan for the technology behind One Tap Gym revolved around the idea of creating an app that was
very easy to maintain and adjust as users discover it and provide feedback.

It made sense to go with a server-less approach where most of the business logic sits on the front-end,
and only minimal work was necessary on the back-end. There is only a thin layer between the app and
the YouTube API which also does a lot of the heavy lifting for us.

This approach keeps the app lean and scalable, and easy to update!

## AWS Lambda and API Gateway

![AWS logo](/images/aws-logo.png "AWS Logo")

We utilized AWS’s awesome [Lambda](https://aws.amazon.com/lambda/) (cloud functions) service to create
a very simple and straight-forward way to query the YouTube API.

This thin layer allowed us to transform the results in a simpler format that the app could understand.
It also gave us a global space outside of the app, for adding additional customizations to our data
and logic as needed.

We used the AWS API Gateway to build a simple RESTful service that bridges the app with the Lambda function.
We provided development and production endpoints to allow us to develop new features in the future without
affecting the production endpoint.

## YouTube API

![YouTube logo](/images/youtube-logo.png "YouTube Logo")

The YouTube API is utilized to bring queries formed by the app to be searched in YouTube.
Our back-end is in charge of communicating with YouTube, and returning results to the app.

## Cross Platform Mobile App

![AdobeAir logo](/images/adobe-air-logo.png "AdobeAir Logo")

[Adobe AIR](https://blog.adobe.com/en/publish/2019/05/30/the-future-of-adobe-air) was our
weapon of choice for this project. As always it is a great development experience, and
the shareable codebase always wins for us.

We used the Starling framework which utilizes device GPU for very fast performance.
The UI was built with Feathers, a UI library for Starling. The screens were laid out
pretty quickly using an HMTL-like format called MXML, which Feathers supports.

The app is careful to not generate too many unnecessary calls to our API by caching queries
locally. These queries expire after a short time and allows the app to make fresh API calls then.

</Container>


CASE STUDIES

Mobile App

Devstimate

Wordpress Website

DHO Studios

Mobile App

Karma Pea

Mobile App

One Tap Gym