Fitness Tracker Cloud Based Service

Page contents

  1. Project description
  2. Technologies used
  3. Architecture design
  4. Web and Mobile user interface
  5. Data representation
  6. Links

Project description

This is on of my projects where I play around with different technologies. In this case I decided to make a cloud based fitness application that has support from mobile applications. This is where I test new web application methods, technologies, techniques, libraries etc and also playing around with mobile apps.

The application is very simple: You register in the application, you log in, you create a sets(groups) of Exercises and you start added activities to those exercises. Different metrics and data is recorded while you add or start activities such as dates, activity types and attributes, GEO Location. Data is then displayed with a charts components and by Google maps to show you progress if you are performing a sport activity on the move.

It’s a work in progress so bugs and weird behavior is expected, well at least by me :).

Technologies used

Presently used technologies/Methods/Techniques etc:

  1. Azure hosted SQL Database, MVC Web Appliation and WebAPI Service
  2. Microsoft MVC Web Application
  3. Microsoft WebAPI
  4. Microsoft SignalR
  5. Azure Service Bus Notification Hub
  6. Azure Table Storage
  7. Android application with Android Studio
  8. JQuery
  9. AngularJS(work in progress)
  10. Visual Studio 2013
  11. Android Studio 1.2
  12. HighCharts.js
  13. Java
  14. C#
  15. JavaScript
  16. HTML
  17. CSS
  18. Google Maps implementation for web and mobile devices with GEO Location support
  19. Azure SQL Database
  20. GitHub
  21. JSON
  22. Xamarin.iOS
  23. Xamarin.Android
  24. Xamarin Studio

Architecture design

Architecture Design
Architecture Design

The fitness service works through either a MVC(Single Page App, work in progress) web application (3) or a mobile client(Android OS support only at the moment).

The MVC Web Application, WebAPI and the Mobile Client all communicate through a SignalR hub to keep the UI of the users up to date. If you do something on a mobile client those all other devices or access points which are registered to the same client(by user ID) are notified. That target device or access point will do something then based on the event. The SignalR hub uses Azure Storage Table to manage client connections.

The fitness service also uses Azure Service Bus – Notification hub to pass on notifications from MVC Web Application or the WebAPI to mobile clients(at the moment).

The mobile clients will only communicate with the WebAPI service for data from the database.

The MVC Web Application will communicate directly to the database or through the WebAPI (in the case of the Single Page App functionalities).

The database is a Azure SQL Database which will hold all of the data coming from either the MVC app or the mobile client.

Web and Mobile user interface

iOS(Made with Xamarin Studio + Visual Studio):



Images from the application and its services:

Android(made with Android Studio):

Android App Log In Screen
Android App Main Screen

User activity sports results

User activity sports results

Web application with Google Maps
Web application with Google Maps

Data representation

Database data diagram


High Charts data represestation
Charts data representation


Code available to poke around :):

One thought on “Fitness Tracker Cloud Based Service

  1. Pingback: How to use: Azure Service Bus – Notification hub, Azure hosted SignalR Hub with .NET clients, Android clients and web JavaScript clients | For the love of problems :)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.