athleanx-home-workout-app

Wanna see the app in action? show me!

Based on https://www.youtube.com/watch?v=vc1E5CfRfos

This App makes it easier to do this workout

Tasks

MVP:

User experience:

• App displays all exercises for A and B sequentially
• The last 5 seconds, once per second sound alarm
• When timer reaches 0 sound longer alarm than in last 5 seconds
• App displays well on mobile
• App looks the same on desktop as it does on mobile, with mobile max width and some reasonable max height
• Videos don't show unnecessary black bands
• When timer reaches zero, automatically switch to next group / exercise
• When workout finishes, show complete screen
• Clicking on the timer does not change it right out, one second elapses
• Keep in localStorage last workout done
• In home indicate which was the last workout done
• Mobile view shows everything without need to scroll

PWA:

• Deploy app in netlify and run performance audit

• Workouts can be accessed offline (PWA)

• Remove tests

• Clean up unused files

Load data asynchronously

• Load data ascynchronously (an async function)
• Handle loading state

Use Vuex store

• Current exercise being grabbed from workout store
• Replace eventbus emitters by store actions
• Prev and next btns for exercises update store

Other:

• Burger menu opens drawer
• Home gives credit to Athleanx
• Add accept cookies modal

Issues:

• Timer doesn't reset when switching exercise

• All videos are always same size

• Fix video ordering (some videos are not matching the exercise)

• When going to prev exercise, sometimes it goes to 1st exercise of previous group, instead of last one

• Last exercise end goes to completed page

• Other round button breaks, all internal links must be router-link

• Pause screen is semi-transparent

• Another round button doesnt reset exercises index to 0

• Message" I am not affiliated to AthleanX

Nice to have:

Support

• Add donation button

Reach

• Share icons in menu
• Share workout in Instagram when workout is finished, with custom message
• Links to my facebook and twitter

Design

• Make 'home' a bit nicer
  • Select workout, then 2 buttons: Day A, Day B
• Tweak fonts to make them a bit better
• Tweak color palette, perhaps decrease contrast
• Make timer have circumference with moving circle around
• Use colors to distinguish different groups
• Refactor: set default styles once for links and text (color, size, etc) instead of defining them for each component separately

User experience

• At end of workout give option to repeat again
• Handle workout error state
• App is fully responsive
• Burger menu toggles
  • Donate button
  • Link to athleanx channel and site
• Improve variant usability
  • Show next / prev variant at the borders as interaction cues
  • Switch variant with a swipe (so prev and next btns can be removed on mobile)
  • Add red border around current variant
  • Swiping does not trigger timer
• FAQ page
• Contact
• User login and save user data in their google drive or in a DB

Statistics

• Keep track of workouts and days in calendar
• Keep track of number of times workout is done per session
• Keep track of number of 'pauses' in each exercise, and have some measure of improvement
• Give audio cues when an exercise performance is going to be improved on

Infrastructure

• Host media in S3