Project & Client Objective

A Sr. Keyhole Software Consultant architected and developed a full-stack set of applications (and DevOps) of a social events fitness platform with React Native and Angular. He was the sole developer on the project.

The client is a large, nonprofit, integrated healthcare network home to more than 20 hospitals and 700 outpatient facilities located on the east coast of the United States.

Application Features

The social fitness application is dedicated to improving its users’ physical activity while providing an outlet for meeting new friends & neighbors in users’ local areas. It is a free, non-profit, public health initiative that matches users with nearby physical activities that meet their interests.

The application is connected with local fitness activities, state parks, and town recreation departments to display all-encompassing group activities. It provides a comprehensive list of group physical activities with descriptions, dates, times, locations, and links to event sites all based on user preferences.

Other features include:

• Filter activities based on skill level to ensure the desired level of competency (Beginner, Intermediate, Advanced, or Any)
• Allow the user to create their own events, invite other individual users, or open them to all application members
• Share favorite events with family and friends via Facebook, SMS, and Email
• Connect users with similar interests
• Automatic posting of scheduled events by third-parties or programmatic uploads of new events

Technology Overview

This fitness platform consisted of a web administration application with Angular, a cross-platform Android/iOS mobile application with React Native, and a backend database.

Web Application

The web administration application was developed with Angular 2+, Express, and REST API server. Logging for the webserver was written locally through Docker, in a rolling-appending fashion.

The Push Model allows Partners to upload their event schedule programmatically (using their choice of technologies) to the application via the Push API. Through the Admin app, they are given a Push API key. The API key is emailed to them along with an OpenAPI specification of the API that they can use as reference or integrate into popular libraries to help upload their events.

The Pull Model allows the application to upload participating Partners’ events schedule from a 3rd-party event aggregator, where that Partner exclusively schedules their events.

One specific feature of the application consists of supplying partners with a subset of the REST API in the form of a versioned OpenAPI document, which the Keyhole Consultant also wrote.

Mobile Applications

The cross-platform Android/iOS mobile application for the fitness platform was developed with React Native and Expo.

With React Native, the business logic is written in JavaScript and is executed by the JavaScript engine of the mobile operating system’s web browser. Not only is there one primary codebase for both Android and iOS, but a significant portion of the business logic can be shared between the applications for both operating systems.

React Native was selected for the project due to its use of JavaScript as a shared codebase, reducing development costs and overall time to market. Expo was used in conjunction as it handles many configuration steps for deploying a React Native app. Expo provides a runtime container to develop, also builds release artifacts of, both Android and iOS versions mobile app. Additionally, it offers an SDK atop React Native, e.g. Location, Sharing, Permissions, etc.

The application was deployed to both the Apple App Store and Google Play Store.

Design

The team also worked to design and create an interactive user interface for the application. The end result is pictured below.

Backend

The backend database implementation was developed with MariaDB and MySQL.

Other technologies and tools used included:

• Passport JWT for authentication/authorization with a refresh strategy,
• Indicative for validation,
• Knex and Objection for ORM (with seeding), and,
• DoT and Pug for email templating.

Various third-party middleware services were used like:

• SendGrid for emails,
• Google Maps for (reverse-) geocoding, and,
• PaperTrail for logging (via Winston).

Deployment

The deployment was tiered, using ngrok for the local SSL tunneling, Heroku for development, and four VMs as staging and production. The staging and production were managed by a Docker/Docker Compose scheme, also spearheaded by the Keyhole Sr. Consultant.

Docker and docker-compose, together, build, deploy, and run the web app to the staging and production VMs.

They were chosen because before the web application can start, the core dependency tree must be set up and that effort is considerable. VMs come and go. So do the OSes they run on. So, too, varies the pre-installed libraries of those VMs, not to mention the availability of them on each OS. On top of that, the development of the web app is not restricted to the developer’s choice of OS on his/her own device, and all the above applies here, too.

Docker (and docker-compose) provided a consistent, repeatable process of building, deploying, and running the web app, regardless of development environments or host platforms.

Methodology

The project management was an informal agile approach, meeting a couple of times per week, with two-week sprints ending in a demo/future sprint planning.

The testing was primarily done with Karma and Jasmine. These ran as part of the build, as well as an individual npm script.