DEV Community

Cover image for One Punch Man Workout App + Source Code
Andreas Riedmüller
Andreas Riedmüller

Posted on

One Punch Man Workout App + Source Code

In early January, my cousin asked me to join him doing the One Punch Man workout for a month. It was new to me, but essentially, it involves 100 push-ups, 100 sit-ups, 100 squats, and a 10km run every day. It’s kind of a controversial training method, but I committed for one month (without the running part 😅).

After a few days, the process of documenting my reps with pen and paper became quite cumbersome. The urge to create an app for this became incredibly strong; maybe you know this feeling too.

I ran npx create-react-app and started hacking, the lines of code flowed like a waterfall from my fingertips. And after a second session the next day, the app did its job and I have been using it ever since.

The app can easily be hosted on a simple static file host as all data is stored in the browsers Local Storage. For these kind of projects I love to use It provides a simple CLI interface that lets you publish a static website with a single command.

Isn’t it great that we now have the tools to do stuff like this? And so fast? It reminded me how much I love the Web, JavaScript and React.

The app is not 100% done yet, I would have liked to have a calendar at the bottom where you can see check marks for each completed day. And maybe a setting with some checkboxes where you can set which of the exercises to track (for example, if you want to opt out of the 10km running).

You can try the app right now in your browser:

If you want to see how it works or even contribute with a pull request, you can find the source code on my GitHub:

Not every project needs to be the next unicorn, creating small projects and finishing them is really refreshing.

Let me know about your last small project in the comments.

Top comments (0)