FitTrackr

A web application where users can set goals for their workouts and track their progress over time. Users can create and log their own workout sessions. User data is visualized through various types of graphs.

URL to deployed site

FitTrackr.

Development

1. Install dependencies:

   npm install

2. Run development server:

   npm run dev

3. Open the url localhost:5137 in your browser.

Tech stack

• Typescript
• React
• Vite
• Material UI
  • Components
  • Icons
• Firebase
  • Authentication
  • Realtime Database
  • Hosting
• Tanstack Router
• Redux with Redux Toolkit
• Recharts

APIs

Exercises API
Calories burned API

3rd party components

All charts to visualize data are from Recharts (except the calendar heat map which is from uiw). The calendar date picker used when adding a workout is from Material UI.

File structure

• .github/workflows - github actions for automatically deploying to firebase hosting on new commits and pull requests
• public/ - public files and assets
• src/ - source files
  • Model/ - redux slices and type definitions for page features
    • addWorkout/ - state and types for the add workout feature
    • goals/ - state and types for the add goals feature
    • profile/ - state and types for the profile feature
    • workouts/ - state and types for the workouts feature
  • PresenterUtils - folder for utility functions to presenters
    • handlers.tsx handlers used by several presenters
  • routes/ - folder for Presenters (Tanstack Router routes)
    • __root.tsx - root layout for rendering sidebar menu and common parts between routes
    • _index/ - route for index page with overview dashboard
    • add-workout/ - route for add workout page with exercise search and select
    • goals/ - route for goals page with goals list and create goal menu
    • profile/ - route for profile page with user profile and data
    • progress/ - route for progress page with statistics for workouts, goals and more
    • workouts/ - route for workouts page with todays, upcoming and previous workouts
  • views/
    • Application/ - folder for high level application views
    • Goals/ - folder for different views on the goals page
    • Overview/ - folder for different metrics cards on the overview page
    • Profile/ - folder for diffferent profile related views and login
    • Progress/ - folder for different statistics views and charts on the Progress page
    • Search/ folder for Search related views
    • Workout/ folder for workout views
  • firebase.ts - firebase config and initialization
  • helpers.ts - common helper functions
  • main.tsx - main component for react with providers for redux store, MUI theme and Tanstack router
  • routeTree.gen.ts - auto generated file from Tanstack router
  • store.ts - main store for all the separate feature reducers & slices
  • theme.tsx - theme config for Material UI
  • vite-env.d.ts - auto generated file for Vite types
• .env - environment variables: currently only VITE_API_NINJAS_API_KEY
• .eslintrc - Eslint linting config with typescript and React rules
• .firebaserc - firebase project id for hosting
• .gitignore - files that should not be added to git
• database.rules.json - rules for the firebase realtime database
• firebase.json - firebase hosting config for Vite
• index.html - main mountpoint for the SPA
• package-lock.json - exact versions of dependencies
• package.json - dependencies and project scripts
• README.md - this README
• tsconfig.json - typescript configuration from Vite
• tsconfig.node.json - typescript configuration from Vite for nodejs
• vite.config.ts - Vite config

User feedback at the prototyping stage (30 min)

User feedback document

To solve the confusion of how a workout is added we tried to make the button as explicit as possible and most of the users later thought the flow was clear when it was an interactive app rather than a pdf. The lack of a "Forgot Password" button sas solved by using google as the sign in option. The feedback about being a "corporate aesthetic" was not acted upon. After showing the deployed version the user believed the design looked good. The user feedback about not being able to delete a workout was implemented successfully.

User feedback at the formative evaluation stage (30 min)

User feedback document

The creative solution that was implemented based on user feedback was a chart visualizing the proportions between different exercise types. This way the user can see if they should prioritize cardio, strength training, stretching, etc.

The problem of showing the text "lower_back" was fixed on the progress page by using a custom function toFriendlyString. The problem of the instructions being too narrow in the add exercise card was solved by making the card wider and redesigning it. We also changed the grey minus sign to a red trash can on the add workout page to make the functionality of it more obvious. The users thought 10 kg was the default value for the weight when adding an exercise, this was a minor bug that was fixed by resetting the values to their default value (0) after adding an exercise.

Other comments

The group is aiming for grade A