Show HN: Workout Tracker PWA | Hacker News Reader

Show HN: Workout Tracker PWA

workout.olzhasar.com

100 pointsolzhasar48 comments

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.

This comment is the perfect summary of the state of PWA. Supposedly great but not used

Self explanatory UI is a helluva tall order, but I think my local-first PWA-aspiring software designs are instant, frictionless and, well, local-first and privacy conscious? Check out https://druthers.app with a friend.

I really like and use https://darebee.com.

Thank you so much for your feedback!

Data syncing is definitely the next step, will try to keep it simple.

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

> 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.

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

Why so aggressive?

It is 100% a skill issue (in communications skills)

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?

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.)

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

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?

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.

> 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. ;)

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

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!

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!

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.

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.

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

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.

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...

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

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.

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

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.

iPhone PWA are notoriously broken, they have to use the safari API and as far as I know are basically impossible to get working.

They’re not broken, this one is.

Oh… he’s right.

Thank you for pointing that out. Just fixed, it should now be available to use offline

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

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/

Looks cool. Will check it out!

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

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.

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

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

I'm opening this in Brazil, what are you getting?

This is so clean. Mad props.

Thank you so much!

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.

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

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.

What libraries have you used?

The app was built with Vue.js 3 and Tailwind

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.

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.

Reply on news.ycombinator.com