Skip to main content
The Mira Flow app login screen on a tablet.

Mira Flow

Creating a companion to a handsfree app, enabling a unified platform for workflows

  • React Native
  • Swift
  • Typescript
  • MobX

The problem

Clients doing handsfree workflow with headsets wanted to fully transfer all workflow to the platform. In order to enable that they needed another way to complete workflows that were input heavy and could be held in hand. To facilitate this a tablet companion app was seen as the most ideal way to address the issue. This would be useful for work that was more observation rather than manipulation based and allow those workflows to live on the same platform. In addition to adding another source of revenue for the company.

A headset operator doing a workflow handsfree.
The Mira Flow team login screen with list of teams to choose on a tablet.
The Mira Flow collections screen a file and folder directory for workflows.

Architecture

Given this was a new platform being added to the product it was important to key in on the best tools to use given the team's skill set and urgency to release an MVP. Through discussions React Native was settled upon as the best option enabling the web and unity teams to contribute, with unity being able to write native modules React Native could hook in to. At the business logic level we had to transfer our workflow/compliance logic into Typescript. Within this process some difference between how workflows should function on the headset vs mobile device emerged with tweaks being made to accommodate each platform. The final stack consisted of a Node.js API, React Native client with Swift modules for data queueing/uploading.

Development

First element to key in on was the workflow logic writing it in Typescript. This was one of the more challenging aspect having no documentation on our logic and only a version written in C#. After transferring logic, the next step was building the UI which consisted of a tab based navigation with tabs to view workflows, recent workflows, and history along with authentication views for individual and team login. The workflow tab was a directory style view where users can click into folders, this was fun to architect and optimize. Once the UI was completed integration with the API started, some routes needed to be updated to add a new platform (mobile) for database and analytical purposes. Lastly to optimize the uploading of workflows which could contain images we built a queue in Swift to offload that process from the single javascript thread improving UI performance.

The Mira Flow reference photo screen with a photo of a utility to be inspected.
The Mira Flow step screen with a yes/no input for the user to select.
The Mira Flow step screen with a number input for the user to enter a number.
The Mira Flow step screen with a select input for the user to choose from a list of options.

Learnings

This was a huge step forward for me in responsibility and leading a project. Along with my 1st time stepping into mobile development which though using React Native still was a different development process and subtle difference in code. Within the code the workflow logic was a fun exercise in building complex logic and conditional flows. One thing I learned to improve was over optimizing too early in a project which actually causes more performance issues, it’s a lot simpler to complete the initial flow and structure then key in on optimization.

The Mira Flow recent screen showing a list of workflows that have been recently done.
The Mira Flow history screen showing a list of flows that have been completed.