ProDev

Fitness Tracker Application Created With AWS Amplify, React Native, and React.

Photo by Bruno Nascimento on Unsplash

Fitness Tracker Application Created With AWS Amplify, React Native, and React.

Abdulrasaq jamiu adewuyi's photo
Abdulrasaq jamiu adewuyi
·

9 min read

Table of contents

In today's fast-paced world, prioritizing our health and fitness has become increasingly vital. Let me introduce you to Befit - an innovative fitness tracker application that aims to revolutionize how we manage our well-being. I developed this cutting-edge mobile app, utilizing AWS Amplify, React Native, and React to provide users with a seamless and personalized fitness coaching experience.

In this article, I will take you through creating a comprehensive fitness-tracking mobile application with React Native. Additionally, I'll show you how I built the corresponding content management web application with ReactJS, all powered by AWS Amplify as the backend. Get ready to explore the exciting process behind Befit's development and discover its potential for enhancing your fitness journey!

The Problem And Solution.

After the global Coronavirus pandemic, remote work became the norm for many technical employees, including developers, designers, and others. However, this shift to working from home also brought about a challenging trend, where fitness and well-being often took a backseat in daily routines.

Enter Befit - an app designed to revolutionize how we prioritize fitness and well-being. As a personal fitness coach and tracker, Befit empowers users to perform exercises and enhance their wellness, even amidst their work-at-home responsibilities.

Exciting news! I'm thrilled to share that I'll submit this app and its code to the 2023 July Hackathon on Hashnode, hosted by AWS Amplify.

Why AWS Amplify?

AWS Amplify simplifies starting with AWS for web and mobile app development due to its user-friendly nature and adaptability. It provides a command line interface (CLI) and a graphical user interface (GUI) through which you can easily configure AWS services. It supports IOS, Flutter, Andriod, and JavaScript frameworks such as React, React-native, NextJS, and VueJS.

It can be used to build the application's backend. With AWS Amplify, we can enable hosting, storage, authentication, and file storage, ready to be consumed by the front end, which we will explore in the article.

Prerequisite.

To fully grasp the concepts presented in this tutorial, the following are required:

Project Overview

I chose this project because it was helpful enough to examine various AWS Amplify features and functionality and to explore all the possibilities of building an application with Amplify.

In this project, I will build a mobile application (fitness coaching) and a web application for content management.

Below are some of what we will be working on within this project:

  • ReactNative: JavaScript framework of choice. I will use this framework to build the mobile application frontend.

  • ReactJS: I will use this framework to develop the web application frontend (Content management system).

  • AWS Amplify: I will use this to build the backend. This project will use the Amplify GUI, CLI, libraries, and hosting.

AWS Amplify Features We Will Be Using

  • Authentication: uses Amazon Cognito for authentication

  • Storage: uses Amazon S3 For storing images

  • Amplify hosting: uses Amazon CloudFront, Amazon Route 53, etc. For hosting

  • Amplify UI Library: For building web application UI components

  • App sync: It is managed GraphQL service with a build-in web socket support

  • Dynamo DB: For storing information (database)

Project Business Logic

In this project, we will have two applications, which are a mobile application and a web application. Also, we will have two types of users, The end-user and the admin.

The end-user will use the mobile application, while the web app will serve as a content management system that the admin will use.

End User - Mobile Application

Below are what the mobile app user should be able to do:

  • Signup and log in.

  • Complete registration.

  • View different workout plans.

  • View all exercises within a workout plan.

  • Start a workout plan

  • See workout progress

Admin - Web Application.

Below are what the admin user should be able to do:

  • Log in.

  • View the list of registered users.

  • Add, edit, and delete exercises

  • Add, edit, and delete workouts

AWS Amplify Service.

This section will demonstrate Amplify services and how it has been used for this project.

AWS Amplify NPM Packages.

To get started with using Amplify packages, we need to install the packages:

npm install aws-amplify

or

yarn install aws-amplify

For a detailed installation guide, check the official documentation.

aws-amplify is available in the most popular programming languages and frameworks as shown below.

AWS Amplify UI Library.

The Amplify UI library is a cloud-based, open-source UI library that integrates seamlessly into any application and is infinitely customizable.

To get started with using Amplify UI library, we need to install the packages:

npm install @aws-amplify/ui-react

For a detailed installation guide, check the official documentation.

One of the most exciting things about the Amplify UI library is how flexible we can create a fully managed authentication flow with a few codes, Check here to see for yourself.

Additionally, Amplify UI comes with theming capabilities for customizing its appearance to match your brand.

Using the Amplify UI library, my defined data model was used to generate the below form.

Amplify DataStore

Amplify DataStore provides a programming model for leveraging shared and distributed data without writing additional code for offline and online scenarios. I find it helpful in managing CRUD operations properly, especially for organizing clean code.

const progress = { 
        "workout_id": fetchedWorkout.id,
        "total_exercise": fetchedWorkout.exercises.length,
        "completed_exercise_ids": [],
        "userID": dbUser?.id
      }
//add item
 await DataStore.save( new Progress(progress))

//fetch items
 await DataStore.query(Progress)

//fetch item by id
 await DataStore.query(Progress, p => p.id.eq('progress id here'))

//delete item
 await DataStore.delete(Progress, id)

//update item
const res = await DataStore.query(Progress, p => p.id.eq('progress id here'))
 await DataStore.delete(Progress.copyOf(res, (updated) => { Object.assign(updated, newData); })

Amplify Studio.

The AWS Amplify Studio provides developers with a graphical user interface for building and deploying complete web and mobile apps quickly and easily.

Using Amplify Studio tools, we can manage the user privilege and design an application backend seamlessly.

I utilized Amplify Studio to configure Befit's Backend, such as:

Authentication.

With Amplify Studio, we can readily add Amazon Cognito authentication to your app. The authentication UI component is provided upon specifying the log-in method, such as email address and password, Amazon, Google, Facebook, or Sign in with Apple. Check here for more details on Amplify authentication.

Befit authentication backend is configured to use the username and Google login mechanisms as shown:

Data Model.

Data Models in Amplify is likened to creating a database table (DynamoDB table).

Check here for more details on Amplify data modelling.

Befit data model is configured as shown below:

Befit App data model

Amplify Storage.

AWS Amplify Storage provides a simple mechanism for managing user content such as images, video, audio, or any media content. The Amazon S3 service manages it. Check here for more details on Amplify storage.

Amplify Analytics.

Amplify Analytics is designed to help developers track and analyze user behaviour and engagement within their web or mobile applications.

With Amplify Analytics, developers can easily integrate analytics capabilities into their applications without implementing complex setups or custom tracking.

Befit uses the Amplify analytics to track user sessions, Workout clicks, Workout start, Workout end, etc.

Check out the Amplify analytics documentation for more insight.

GraphQL API.

GraphQL API powered by AWS AppSync. AppSync is a fully managed service that simplifies building scalable and real-time applications. It enables the creation of GraphQL APIs quickly without manually configuring servers and databases or handling network infrastructure.

Amplify CLI.

Virtually everything that you do from the Amplify studio can be done with the Amplify CLI, such as:

  • amplify add auth to add and configure authentication.

  • amplify add storage to add and configure storage.

  • amplify add api to add and configure rest API or graphql API .

  • and so on.

Check out the documentation for more insight.

Amplify Hosting.

Amplify hosting is also another great feature of AWS Amplify.

From Amplify documentation.

Amplify Hosting is a fully managed CI/CD and hosting service for fast, secure, and reliable static and server-side rendered apps that scale with your business.

Simply by connecting the repository (Github, AWS CodeCommit, Bitbucket etc.) and a few clicks, our updates are live and ready for users to enjoy. It has awesome features like continuous deployment from your Git repository (CI/CD) and custom domain setup configuration.

This was used to deploy the Befit's Admin Web application at https://main.d1ci7wwycacdcd.amplifyapp.com/

Project Demo.

Demo Video:

https://youtu.be/WcZAMgj8d28

Screenshots from the mobile application.

Onboarding screen:

App home screen: The user can see a list of available free and pro workouts on this screen.

Workout view screen: The user can see all workout exercises on this screen.

Exercise view screen: The user can see exercise details on this screen.

Screenshots from the web application.

Login page: The Admin user login page was built and customized with Amplify Authenticator UI library. Only authenticated admin users can access the platform.

Users page: The admin can see a list of registered users.

Exercise page: The admin can see a list of added exercises, can add new exercises, can update existing ones, and can also delete.

Workout page: The admin can see a list of added workout plans, can add new workouts, can update existing ones, and can also delete.

GitHub links:

Befit user mobile app Github link: https://github.com/jaymeeu/befit-fitness-app

Befit admin web app Github link: https://github.com/jaymeeu/befit-admin-app

Login credentials:

Befit app login credentials:

username:

password: 111111

Befit admin login credentials:

username:

password: 111111

Live project links:

Befit's admin web app live link: https://main.d1ci7wwycacdcd.amplifyapp.com/

Befit's mobile application live link: The mobile application (ios/android) has not been deployed to their respective store yet; however, to run this app:

For Android: Download the .apk file and install it on your phone. Click here to download.

For IOS: The installation file is not available at the moment.

Wrapping up and Next Steps

Thank you so much for spending time reading this article until the end.

What is our take on this? This exciting article highlighted how I built a fitness coach/tracker mobile application with AWS Amplify. The application was built utilizing Amplify features, such as: Amplify Authentication, Storage, Data, GraphQL API, Hosting and Analytics. The Amplify features implementation process was seamless and well-documented; kudos to the Amplify team.

What Next? This article will end, but not my last contribution to the project. There's still a lot that can be done on this project:

  • Image/asset optimization.

  • Implement the premium subscription workflow.

  • Personalize workouts based on gender.

  • Personalize workouts based on age.

  • Design custom images (.gif) for exercises.

  • Add a background music player to the exercise screen.

  • And more features to come.

If there is anything you would like to add, you are welcome to Git fork the project and modify it how you see fit. Keep in mind that the sky is your starting point! I also invite you to follow me on this website and connect with me on Twitter for more exciting articles.

Happy coding 👩🏻‍💻

AWS Amplify HackathonAWS Amplify