Settings

Theme

Show HN: Workout Tracker PWA

workout.olzhasar.com

100 points by olzhasar 2 years ago · 50 comments

Reader

alexose 2 years ago

This is what all web apps should be like: Zero barrier to entry, loads instantly, self explanatory UI, privacy first. While I probably won't use it to track workouts, it only took me a few seconds to evaluate.

Complexity will set in as you allow users to import, export, and sync data. But based on the great start you have here, I bet you can pull it off.

mvkel 2 years ago

Nice and clean!

As a fellow web slinger, I recently went down the road of trying to build a simple veggie tracker as a PWA.

I realized pretty quickly that the PWA world still feels like a hacky mess, with weird CSS rules to make it feel more, but never fully, native.

Most of the issues from way back in the pre-App-Store days remain.

For example, double tapping on the screen triggers a zoom, and there's no way to disable it.

After a full week trying to make my PWA not feel clunky, I resorted to making my first native iOS app with the help of chatty G.

It was surprisingly easy. It took two days to build, and because it's native, everything just works.

PWAs as a platform have so much potential, this app being a great example. It's frustrating that developments aren't further along than they are. I'd think Google especially would have interest in supporting such a platform

  • anon373839 2 years ago

    > For example, double tapping on the screen triggers a zoom, and there's no way to disable it.

    That can be disabled: https://stackoverflow.com/questions/59732074/disable-double-...

    Actually, all of the layout and gesture jank problems in web apps can be fixed, but it does take some effort. I’m tempted to put in the time to open-source a reference for this, but then I cynically wonder if Apple would then find a way to break it. ;)

  • olzhasarOP 2 years ago

    Thanks for the feedback!

    This a hobby project for now, so I tried to do it in a cheapest way possible, and PWA looked like a good approach, as there is no need to buy developer subscription.

    Have you used Swift to develop your IOS app or any cross-platform solution?

    • mvkel 2 years ago

      Makes total sense!

      I basically did whatever chatgpt told me, which was Swift with UIKit, and Storyboards for the interface design.

      Took me a bit to learn some of the conventions and syntax, but they've come a long way in making it much more intuitive for web dev folks.

  • NorwegianDude 2 years ago

    > For example, double tapping on the screen triggers a zoom, and there's no way to disable it.

    That's objectively BS and 100 % skill issue on your side. A simple "disable zoom PWA" search on google would definitely give a bunch of sites telling you how to do it. It's super simple, just add a viewport meta tag.

    • mvkel 2 years ago

      It's not a viewport meta tag. It's { touch-action: manipulation; }.

      And it doesn't work consistently. Very easy to break it if you double tap on the background and not somewhere in the text, for example.

      Thanks for your... encouragement?

      • anon373839 2 years ago

        Try:

          * { touch-action: manipulation; }
        
        While you're at it:

          * { 
              user-select: none; 
              -webkit-user-select: none;
              -webkit-tap-highlight-color: transparent;
              -webkit-touch-callout: none; 
          }
        
        Then, you can override these if needed for specific elements.

        Since the "frame" of a native app isn't wiggly and pinchable, I also suggest something like:

          html {   
            height: 100svh;
            overflow: hidden;
            overscroll-behavior: none;
            position: fixed;
          }
        
          body { 
            height: 100svh;
            width: 100vw;
            overflow: hidden;
            touch-action: none;
            position: fixed;
          }
        
        The idea is to never let html or body exceed the size of the viewport, lock them down completely, and then enable overflow scrolling only in the divs that need it. This also eliminates pull-to-refresh when the app is used inside the browser. (If you want PTR functionality in the app, of course you can watch for overscroll on a particular div and implement it yourself. But your app skeleton will stay put.)
        • mvkel 2 years ago

          Thanks for sharing these! Locking down the size of the viewport did the trick

    • beretguy 2 years ago

      > That's objectively BS and 100 % skill issue on your side.

      Why so aggressive?

conor_f 2 years ago

Another interesting thing in this space is Traindown[1]. It's simply Markdown for your exercises. As an example for those who need convincing to go to a link, this could be a simple workout:

  @ Mar 03 2024 08:00
  
  # Unit: kg
  # Bodyweight: 70
  
  Squat:
    40 12r
    65 8r 2s
    40 12r
  
  Assisted Pull Up:
    bw-20 12r
    bw-5 6r
    bw 2r

It's much more free-form than this, which is a bonus for me and allows me to track metadata such as weight, time of day I'm exercising at, or general mood/feeling about the workout. I can ultimately just take these plain markdown files from the app (I use a basic Android app that visualizes this Markdown[2]), import them and do whatever processing I like in Python.

Highly recommended!

[1] https://traindown.com/

[2]https://github.com/traindown/transponder

  • endofreach 2 years ago

    Interesting. I wrote a small program some time ago that would have needed it... well i am needing the workout... so i should go and refactor the app instead of refactoring the body...

    Anyway thanks for sharing!

  • Player6225 2 years ago

    There it is! I've been looking for something like this!

    I've been using my own homebrewed toml spec, but since I am more experienced with code than training, I was concerned if it would still work well as I become more experienced. Not sure if I'll use this, but good to see another interpretation of this kind of data!

kokanee 2 years ago

Wouldn't work for me without the ability to add other exercises. I'm also not familiar with a lot of these exercises, so descriptions and images would be very helpful.

  • olzhasarOP 2 years ago

    Thank you for your feedback. This is a hobby project for now, so images are a bit hard to do on budget. But I will definitely add descriptions soon.

abound 2 years ago

Shameless plug: I've written a similar tool [1] that I use daily, similarly straightforward (but much less attractive than the tool in this post). Main difference is that it focuses on 5/3/1 + strength training (e.g. how many reps do I need on this set for a personal record?), and you configure your workout (weeks, sets, reps, etc) in a JSON file instead of the UI.

[1] https://github.com/bcspragu/stronk

NoPicklez 2 years ago

This is simple I'll give it that but it does lack many critical features.

I've been using the Strong app on my iPhone for over a year as it seems to provide the simplest approach to workout tracking with enough detail without over cluttering the UI.

This solution needs more way exercises, particularly those using barbells, dumbbells, for instance there is no lat pulldown in the upper body section.

The solution needs the ability to add in the weight, sets and reps performed on particular exercises. I should then be able to reorder these exercises as part of the developed routine. Once I created a workout I could seem to create other different workouts, or replace/edit the workout I'd just created.

I think these are core requirements.

Then you can add in other nice to haves like timed rest periods between sets. Statistics around total volume, PB's both in a rep and set.

I implore you to check out the Strong app to see a well built app that is simple, not overly complicated and includes key features.

suprjami 2 years ago

Good idea, but I don't want to rely on an internet connection for this. I'd also just prefer to own the data.

I use a simple Seinfeld-style habit tracker for mine:

https://play.google.com/store/apps/details?id=org.isoron.uha...

  • ffsm8 2 years ago

    A pwa doesn't need an Internet connection. That's part of the definition of the term. Are you confusing the term with SPA?

    > A web application is considered a PWA if it satisfies the installation criteria, thus can work offline and can be added to the device's home screen

    • MrGilbert 2 years ago

      Then this should not be called "PWA"?

      When putting the iPhone in Flight Mode and deactivating WiFi, this site won’t load after it got added to the home screen.

  • olzhasarOP 2 years ago

    There was an issue with caching. Just fixed, should now work offline without issues.

    As of owning the data, right now everything is stored in the localstorage of your browser. So you technically own it. There is no way to export it yet though, will be added in future

  • jcul 2 years ago

    I love this app, I've used it many times in the past for tracking habits.

    Just want to point out that its also open source and available on F-Droid.

    https://github.com/iSoron/uhabits

  • smeej 2 years ago

    I love this app, except that it takes FOREVER to reach "100%."

    If I've completed a habit every day for even 10 days, I want my 100%, but this required more than 200 when I used it.

kev_dev 2 years ago

Workout tracking is a fun project. It's relatively simple in scope and you can customize it for an audience of 1 -- I did something similar to brush up on RN development:

https://www.workoutsios.com/

e12e 2 years ago

Neat that it's to the point - but some information would be welcome. Where is the date stored, for one. Future pricing?

  • olzhasarOP 2 years ago

    Thank you!

    There is no server syncing right now; everything is stored in the local storage of your browser. Current features will remain free. I might add a paid subscription for syncing data between devices in future.

neogodless 2 years ago

Currently lacks flexibility. Cannot add weights to deadlift, or find barbell squats. Need weights, not just reps.

fbormann 2 years ago

I can't open this in Brazil, any barriers to do so? Nor does the link shows up on Google.

asynchronous 2 years ago

This is so clean. Mad props.

sigmonsays 2 years ago

i track my workouts in simple note.

Why does it have to be so complicated?

Entering a workout should not be so difficult. This app requires clicking 5 times to add a workout.

SleepilyLimping 2 years ago

Would love if I could self-host this with Docker.

  • olzhasarOP 2 years ago

    There is currently no point in self-hosting this cause the data is not being synced to any server, it is stored on your device. I might add self-hosting option in future once syncing will be implemented.

andreidd 2 years ago

What libraries have you used?

xnx 2 years ago

Neat. Is there a way to backup or save results? I currently use Jefit on Android but have noticed the enshittification creeping in. It probably won't be long before seeing any historical data requires a monthly subscription.

  • olzhasarOP 2 years ago

    Thank you for your feedback! Ability to export and import data will be implemented soon. As of subscriptions, current functionality will 100% remain free with data being stored on your device. I might add subscription to store data on the server and sync between devices in future.

Keyboard Shortcuts

j
Next item
k
Previous item
o / Enter
Open selected item
?
Show this help
Esc
Close modal / clear selection