I built this sports and fitness app without any documentation – Here’s how i did it.

 

When the FitStack project was handed over to me, I was intrigued by the fact that our partner Eric Cavazos already has a ready-made web and in-complete mobile application. The fascinating part was that the application had no documentation and that was the first hurdle I had to jump.

Part of my new year resolution was to solve only complex mobile app development problems this year. This project wasn’t much of a complex problem for me although I had more than one thousand questions going through my head on how to solve this mini-complex problem. So I started by answering the basic questions I always ask myself when starting a new project.

Traditionally, before starting any project, I always keep in mind why I’m building the app, and for whom (users). FitStack wasn’t an exception, I had a mental picture of the fantastic UX it will deliver to millions of users that will eventually use it. Knowing that what you are trying to create will directly impact people’s lives, motivating them to stay fit can be such a wonderful thrill.

While FitStack mobile app development concept requirements were pretty clear and simple to me, the execution strategy wasn’t so clear-cut at first. So let dive into how I did it.

 

lest I forget...

FitStack is an application that helps people find a trainer, training program, plan diets and exercises. Plus it allows them to communicate with their coach, track their progress and statistics all in one place.

I got to know that not only by reading the project specs but also by touring FitStack’s website. The task in front of me was to build the mobile version of the web that will join or compete with over 4 million mobile apps out there now calling for smartphone users attention.

 

How I choose the principles and technologies for the project.

 

The framework

React Native was my choice of technology not just because it doubles efficiency and reduces development workload almost by half but because it isn’t tied to a native platform. I didn’t use the battle-tested Cordova because, in my opinion, it doesn’t have the same feel and look of an actual native app. Since I’m developing a mobile app for fitness, it had to make a great first impression on the users that will be relying on it to stay fit. That way they will always be willing to open it and see what’s going on with their fitness level.

 

Flow control

For state management I choose Redux. I like Redux and I’ve used it on several other projects in the past. It is basically influenced by functional programming (FP) principles which are cool. Predictable state updates make it simple to grasp how the data flow works in the app while “pure” reducer functions make logic effortless to test.

 

Structuring the project

For projects like FitStack, we have a certain guide in our company on how to structure the directories and project files. So basically modular system was what I used because it is convenient and handy for designing apps architecture.

 

Backend

For the chat feature, all I wanted was a cloud database, where I can store and retrieve JSON objects, create user validation, and get real-time data update. Fortunately for me, Eric already decided on us using Firebase which had all the functions we needed.

So having figured out everything, it was time to start coding…

 

…I don’t want to bore you with some geek_talks.

So I will skip the coding details except you want me to tell you the details. But I can tell you that I spent months in development, bug fixes, and testing until finally, it was stable enough to be tested by someone else in our QA team.

 

But here is what’s under the hood…

I built the server on REST architecture with Firebase as the base. For search options within the application itself, I used Algolia platform. I specifically used Firebase because it allows users to quickly but intuitively login into the application using their Facebook accounts. That was not the only reason why I used Firebase, it as well provided me the possibility of implementing a chat feature inside the application itself. One of the undoubted advantages of using Firebase was the fact that it has the ability to instantly receive updated data right about the same time the data is being changed in the database. I couldn’t implement the push message distribution without the help of Firebase Cloud Messaging. This particular feature allows the users of the application to receive instant messages at any time.

 

The coolest feature in the app?

In my opinion, it is the food recognition feature. Though I wasn’t the one who wrote the code for this feature I thought I should share it with you. Remember Jian Yang’s Seafood (Not hotdog) App demo in the TV Show Silicon Valley? Unlike that Jian Yang’s app, FitStack’s app can actually recognize food.

“You can take a picture of what you are going to eat, and the app will recognize what kind of food it is and you can add it to your meal plan”

 

So there you go the whole story of how we build the FitStack mobile app from an idea to a fully functional and ready to be deployed app. Thumbs up to the team on whose shoulders I stood – project manager Valeria and the sales manager Michael – you guys are the best in the game. On to the next project!

 

What else would you like to know about the project? Tell me in the comments.

skype: coderedmobiledev

manager@opengeekslab.com