tsoporan / fittrak

A data-driven workout tracking tool for the quantified-self 💪 🤓

A data-driven workout tracking tool for the quantified-self 🤓.

NOTE: This is the core, open sourced version, of FitTrak and may be lagging behind the deployed version at https://fittrak.ca!

---

Requirements

For local dev you'll require:

• Back-end:
  • Docker
  • docker-compose
• Front-end:
  • npm

Back-end

The back-end consists of a Django powered Python application which exposes a GraphQL API using Graphene. Django is being used to deal with authentication, and other various functions, and as such there are some views which are rendered from Django. You may think of Django as rendering the template which houses the front-end SPA.

Front-end

The front-end is a Vue powered Javascript application which uses Apollo as a GraphQL client. When deployed in production this simply makes API calls to /graphql and benefits from the rest of the Django machinery.

NOTE: For local dev the back-end must be up and running as that is where the API (GraphQL server) runs (requests to /graphql will fail otherwise!) Authentication is based on sessions with IDs stored on cookies, which will be on localhost in dev, this works fine as only the ports change between the two servers. Keep an eye out for issues pertaining to authentication as the default behaviour, at the moment, is to return a 302, rediret to /login, which will present an error on the front-end console.

---

Development

Clone the repo:

git clone [email protected]:tsoporan/fittrak.git && cd fittrak

Back-end

The preferred way to bring up the stack is using Docker and docker-compose.

cd fittrak
# Bring up only the API to run migrations
docker-compose up
docker-compose run api python fittrak/manage.py migrate

# Create the first user (admin)
docker-compose run api python fittrak/manage.py createsuperuser

You can also run everything independently, which would require: postgresql, python3.7 and pipenv.

With docker we can conveniently package these up and not worry about external deps.

NOTE: When running independently make sure you're aware of the env variables required (check env.example and set .env)

There are two services that comprise the back-end: api and fittrak_db. docker-compose up brings them all up though you may start each one with their respective docker-compose up <service_name> command.

It is also useful to know how to work with docker and docker-compose, in general, as you may need to rebuild and interact with containers during dev.

Front-end

Using npm:

cd fittrak-client && npm install

export VUE_API_URL=http://localhost:8000/graphql

npm run serve

Migrations

To apply DB migrations we can run a command in the container:

• docker-compose run api python fittrak/manage.py makemigrations
• docker-compose run api python fittrak/manage.py migrate

Tests

Tests can be run with the usual:

• docker-compose run api python fittrak/manage.py test
• npm run test:unit

---

Deployment

Firstly check how the app behaves in production mode:

# Build production bundle

cd fittrak-client
NODE_ENV=production npm run build

# This will dump the assets in ../fittrak/assets which will be picked up
# by the "render_bundle" template tag in Django

# Set DEBUG to "False" in docker-compose
docker-compose up

# Visit http://localhost:8000

The application currently sits on a GCP VM and uses Cloud SQL (PostgreSQL 9.6). SSL is through LetsEncrypt and the Nginx Certbot

Future plans may include IaC, and moving to a more robust container solution, such as k8s, though it's fairly overkill at the moment.

fittrak's Issues

Workout mutations

Mutations for working with Workouts, create, remove, etc.

Dockerize application

As a first step of a container-based deployment, we'll need an image.

Template rendering in dev relies on chunk vendors

This currently leads to an error unless you've already built once (which places the assets correctly).

Setup SSL

Currently hosted on GCP, set up SSL.

Signature expires

The signature will sometimes expire between API requests causing a failure. Need to figure out what's causing this.

Edit/Update Sets

Should be able to edit set field such as the reps and weight. You should also be able to remove/discard a set.

Set up graphql on the backend

Using Graphene

Fix sidebar width on mobile

Currently does not scale with content inside.

Current workouts on home page

The home page will serve to show you current workouts - that is workouts that have been started, and finished workouts (relevant to date), and finally allow you to start a new workout.

History page

The history page should contain all the workouts performed by the user. There should also be filtering options to view by status.

Recent workouts

There are a couple issues with this currently:

• Not styled correctly
• Remove action does not work

Offline Mode

The main usage of the app will be on mobile this also means we should deal with no connectivity. Standard web apps are pretty terrible in this regard, follow some of the recommendations from this talk: https://www.youtube.com/watch?v=cmGr0RszHc8

Some things to keep in mind:

• Not everyone will have a connection, the app should still work when there is NO connection, this means local caching + synching mechanism
• Initial download as small as possible
• Flakey connection on a website can still be terrible UX, need to investigate ways to figure out we're in this semi-working state

Add Sets

A Set contains repetitions, e.g 3 x 8 (3 sets, 8 reps). In weight training this makes sense though does not gel well with things like cardio training where it may be more useful to track duration (and other modifiers based on equipment). For simplicity, sets will be implemented first.

Sets should be attach-able to an Exercise

Populate exercise db

Need some fixtures for initial exercise db.

User settings

The Settings page will house the various user settings for the app. One such setting would be the preferred weight units as well as other profile specific settings.

Date handling

Dates should be in a human friendly format, look at using: https://date-fns.org/

Registration

This will use djangos registration on the backend, but the front-end UI and email templates need to be developed.

Write getting started documentation

Finish Workout

The user should have an option to conclude the workout.

Add exercises

A workout is just a container for exercises which further contains sets. While workouts can now be created (#51) exercises need to be added.

Test framework setup

For Django the built in tests should be sufficient though testing the GraphQL API may require some additional handling.

As for Vue investigate if Jest can be used or otherwise stick with Karma

Support status filtering

Workouts need the ability to be filtered down by statuses for various UIs. ex. Pending workouts, Completed, etc.

Support limit to WorkoutList

Should be able to limit by a certain amount, currently everything is returned.

Autocomplete exercise names

Exercise names should populate from various sources (default set + user set). This can be made more intelligent in the future.

Remove exercise

Seed data

Initial exercise data is needed. Investigate.

Fix broken CI

Builds failing, most likely due to incorrect/outdated config.

Finish Workout Behaviour

This should redirect you back to your workouts and mark the workout read-only. It should be re-openable.

Exercise List and Item Views

Need to display exercises on a given workout.

Set up Apollo on the frontend

Graphql client, using Vue so should also use vue-apollo

Index route does not check for auth correctly

This is due to it not requiring auth. If we already are authed we should redirect to /track

Steps to reproduce: refresh page on /

Error logging

Look into using https://sentry.io/welcome/

Basic styling

Look at CSS frameworks to assist with this, ex: https://github.com/jgthms/bulma

Remove workouts

Should be able to remove existing workouts, this will be a soft delete.

Set List and Set Item views

Need a list and item component view for Sets. These should display as part of their parent exercise.

Back navigation

There should always be a way to go to where you came from. This should be visible in the UI, placed towards the top so that it does not fall out of view.

Secure API with https

Will become more of an issue before prod deployment.

Fixture loading doesn't work

This is due to changes in the schema. Will have to re-dump working data.

Mailgun hook up in production

As mentioned in #125 this requires further DNS hook up in GCP in order to work in production.

Switch to Vuetify

Initially this project started out with a UI framework but I grew dissatisfied with the lack of quality and mature options for Vue at the time.

I made the switch to Bulma which came with its own set of issues specifically around integration with Vue, and mobile. Mostly it came down to not wanting to work with custom components and avoiding boilerplate code.

After another view of the landscape I decided to go with Vuetify as it seems to be the most active and mature (>1.0) project out there at the moment.

Only show sidebar toggle to authed user

Currently shows on all routes.

Edit/Update Workouts

Display a workout detail view, this will linked to from Latest/Current workouts and possibly other places.

Requirements:

• Need to be able to edit workout fields such as start time and end time
• Need to be able to delete workout

Remove set

Creating workouts

The create workout flow is:

• Click "New workout"
• Add an exercise in the workout staging area
• Add a set to each exercise
• Click "Done" to save/publish workout

Clicking away from sidebar should close

This requires a bit of a workaround with Vuejs as there is no built-in "click outside" element - as far as I can tell. Look at using: https://www.npmjs.com/package/vue-clickaway

User activation

Right now users are able to register and they are signed in automatically. This is to improve the UX, though their state will still be "unverified". An activation email should be sent along with added ability to activate.

Buttons overflowing on mobile

Noticed with the Start button on the workout details page.

Loading indication

Vue Apollo has a built in prop that can be used when there is loading happening, e.g <div v-if="$apollo.loading">Loading...</div>

This should be used throughout to provide a better experience.

Need a way to persist state to server side

While Vuex takes care of state management on the client we'll need a way to persist this data to the back-end.

Some appealing options:

1. Pouch DB - https://pouchdb.com/
   • ex. http://www.pocketjavascript.com/blog/2015/11/23/introducing-pokedex-org
2. Look at using middleware for persisting state on Vuex
   • ex. https://github.com/robinvdvleuten/vuex-persistedstate

Helm chart for deployment

Use helm.sh to package up the app instead of keeping around all the static manifests.

Related to #60