Welcome

projects

back to projects

Workout Checklist App

This web app was created for me to do an exercise routine. Figuring out how to build a web app is a huge help for me in learning Javascript, Typescript, Ionic framework, and some other web technologies.

Fatured
  • Status: Active
  • Duration: 2022 - present
  • Type: Design and Development
  • Tools: Ionic, Vue
  • Link: workout.vannrith.com

This web app was created for me to do an exercise routine. Figuring out how to build a web app is a huge help for me in learning Javascript, Typescript, Ionic framework, and some other web technologies.

Design

Workout website

There is no groundbreaking design to implement here. When the user opens the app on Android or the web, it will use material design style, when the user opens the app on Apple devices, it will use iOS style. This behavior is great for keeping the UX as simple as possible.

The Ionic framework does this out of the box, with the support of Dark and Light modes as well.

Development

WOrkout checklist Ionic is a great framework for making mobile and web apps. It forces me to use Typescript as much as possible, so I did. Currently, the app doesn’t have a server to store and manage data, I’m using a local JSON file to store everything, and the app only read from the file. Another interesting thing for me is Pinia, it’s been fun to play with.

Features

The app is pretty much minimal, as of this writing it has:

  • Arms, legs, core workouts
  • Each workout has short tutorial link in the thumbnail
  • Tap to check as done
  • Each workout has 2 rounds
  • Timer for the whole workout
broke lol

need designs?

send me a message, I reply fast (wink wink). let’s have a chat.