workout-lol / workout-lol

A simple way to create a workout plan

Workout.lol

The easiest way to create a workout routine

About

• A small web application to create workouts based on your available equipment and the muscles you want to train.

Link

• You can self-host the project or use the web app on workout.lol.

Steps to run it locally

1. Clone the repository to your local machine
   git clone https://github.com/Vincenius/workout-lol.git

2. Navigate to the app directory
   cd workout-lol

3. Install the necessary dependencies
   yarn

4. Initialize the Mongo DB by importing the dump files from lib/dump/prod:

   4.1 For the .metadata.json, you'll have to do this :

   mongoimport --uri mongodb+srv://<USERNAME>:<PASSWORD>@<CLUSTER_NUMBER>.<URI>.mongodb.net/<DATABASE> --collection <COLLECTION> --type json --file <FILEPATH>

   4.2 For the .bson, you'll have to do this : mongorestore --uri mongodb+srv://<USERNAME>:<PASSWORD>@<CLUSTER_NUMBER>.<URI>.mongodb.net/<DATABASE> --collection <COLLECTION> <FILEPATH>

5. copy the .env.dist file to .env and set environment variables as described in the file
   

6. Start the local development server
   npm run dev

7. Open your browser to http://localhost:3000

Steps to run it with docker

1. Clone the repository to your local machine
   git clone https://github.com/Vincenius/workout-lol.git
2. Copy the .env.docker file to .env and set environment variables as described in the file (do not modify the MONGODB_URI if you wish to use the mongodb container)
   
3. Run the docker compose file at the root of the project
   docker compose -f docker/docker-compose.yml up -d --build
4. Wait for the applications to be up (docker ps to get the status)
   
5. Open your browser to http://localhost:3000

Contributors

Supporters

medecau	EL	alvaro	devjev

Become a supporter by donating on Ko-Fi:

https://ko-fi.com/workout_lol

Public Metrics

💸 Cost Breakdown

📈 Analytics

License

workout-lol's Issues

Allow users to continue workout

We store which exercises have been completed in a workout. It would be nice to allow users to continue where they left in case they accidentally close the browser window. Maybe on the profile page or a modal on the landing page that can be dismissed.

I'm open for suggestions :)

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

Refactor database structure

When I created the app I was a bit lazy with the database and just copied the whole "exercises" into the users "workouts". The proper way would be to just store the "_id" and the user specific fields like "sets". Then we can fetch the rest of the exercises on the backend by using the ids.

I'd also propose to store the workouts created by users in a separate database and link them to the user. This way we could do stuff like public workouts, where people can share the workouts they created for others.

Link to GitHub repo is broken

https://github.com/Vincenius/workout-lol/blob/4851af1e1825e693351ccfac9e76573b459b1fa2/components/Footer/Footer.js#L12

Should be https://github.com/Vincenius/workout-lol

Create a native app

I already played around with capacitor (see branch test-capacitor). This approach looks promising for creating a native ios and android app.

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

Add user accounts

We should allow users to persist their progress and share it across devices by creating accounts.

I had good experiences with https://github.com/vvo/iron-session when creating user logic. But this was only for email login.
We could also think about adding more social logins and use https://next-auth.js.org/

The user data can then be stored in our mongodb. We need to find a smart way to keep both systems running next to each other (local storage & database)

Allow users to mark workouts as favorites and add quick access to them

Mark them on the profile via a star button or something like this. Then improve the profile view to make favorite workouts quickly accessible

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

Containerized deployment

Hello, amazing project!

I was looking to self-host this app, and it'd be nice if we could package the app as a container. Do you have a plan to include a Dockerfile or so ... otherwise I'd be happy to make a contribution! Thanks for the work!

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

Add yoga as option

There are already yoga exercises in the database. It would be cool to somehow integrate them to the website.

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

Exercise date is not according to my time zone

I logged exercise on 18th december 00:55 but it is getting logged as 17th december

Add dark mode to login screen

Figure out a way using the next-auth screen or add a custom login screen

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

Add more social logins

Add google social login

should I add another?

Add an exercise difficulty filter

The difficulty data is already available in the database. We need to add a query param + filter to the API endpoint (pages/api/exercises.js). Then add the frontend part (probably on the muscle screen?) and maybe on the "pick exercise" modal.

Bug when re-selecting workout equipment and keeping same muscle groups

Description

The title says it all, but there is a bug that occurs when following these steps:

1. Load the page
2. Select a piece of a equipment ( I chose body-weight )
3. Click continue
4. Select a muscle groups (I chose abs and lower back)
5. Click continue
6. See the results (Should be consistent with the choices)
7. Click the circle at the top (1) that leads back to equipment
8. Deselect the piece of equipment and select another (I deselected body-weight and selected barbell)
9. Click continue
10. Click Continue
11. View Results

Expected Behavior

My results would match my new selection (Barbell exercises for lower back and abs)

What actually happened

The results were unchanged

Notes

I haven't looked at the code, but I think that selecting the muscle group (something I skip, as I leave what was selected) also carries the state of the new equipment as well.

Cool App! Just thought I'd post this!

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

Make the muscle loading screen more obvious

when opening the muscles screen for the first time, it's fetching the amount of exercises per muscle to disable muscles without exercises. It has kind of a subtle css animation as a loading indicator.

I think it might not be obvious to everyone that it's loading and people might think it's not working, bc it's not reacting. Maybe there is a better way to display that it's loading

Improve SVG muscle select

Right now, the muscles are not selected if we click on the whitespace between the muscle sections. This could also cause problems on mobile, because it's not obvious what's clickable.
We should improve this by adding paths to the SVG around the muscle areas and updating the Illustration.js based on this.

fix accessibility issues

The lighthouse score shows some accessibility errors. Those should be fixed!

Maybe also use another tool to test for more errors (eg. https://wave.webaim.org/)

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

Video demonstrations loop whenever you type in the input

Hello,

First of all thank you kindly for such a wonderful project - I've been a faithful user now for around two weeks.

My issue is more of a nitpick; but I've noticed that whenever I type in the input field the video's demonstrating the exercise will momentarily go back into a loading state (I've appended an example bellow).

The good news is that no extra requests are made - It's just slightly annoying.

I've yet to look at the source code - and if PRs are welcome I could try to whip something up - but it looks to me like the state of the input fields should be separate from video loading.

Kind regards

(Many) Workout example videos not loading

For example, in https://workout.lol/?share_id=30c29962-22ad-4808-b912-3ba95264e68a this work out, only Dumbbell Goblet Squat works, but all the rest do not. Only the loading spinner appears, and then nothing.

I've tried multiple different browsers on Mac and iOS, all have the same issue.

Add a dark mode toggle

Use the mantine dark mode: https://mantine.dev/guides/dark-theme/
and probably replace the background with a proper dark one

Allow user to share his finished workout of the day

Hey, just had an idea while coding about shared profiles :
We would add a "Share my journey success" at each end of a workout, which generate a static simple image and add text on it (maybe with html-to-image?)

Exemple : "Congrats for you workout the [date]". You've done [muscle(s)] with X exercices ! (Text to be defined)
This could encourage ppl to share the app

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

Reset password screen

Allow users to reset their password.

I'd propose to handle it like this:

• User clicks "forgot password" on login
• store a "reset_token" (uuid) in the database and maybe a reset token datetime to make it valid for like 2h
• send an email (maybe using nodemailer) with an URL: /reset-password?token=${reset_token}
• user can submit a new password
• backend validates token & date and updates password (don't forget to hash it)
• user gets redirected to login

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

Allow users to navigate freely between exercises while doing the workout by adding a back button

add a "previous exercise" / "back" button

Public profiles

How about allowing users to add an (optional?) username to create public profile pages "workout.lol/u/your_username".
This would allow people to share their profile and progress and workouts they created.

We could also think of a way to make them more beautiful :)

Add Prettier support

Hey @Vincenius , let's add Prettier support to our project! Prettier is a code formatter that can help us maintain consistent code style and reduce formatting errors. It's widely used and can save us time in the long run.

Wider view / bigger videos

Thank you, first of all, for creating this. I stumbled upon it at the perfect time and use it every second day now.

I'm using the site on desktop and I'm quite new to all these exercises so I heavily rely on the videos for each exercise. Unfortunately the page is quite small for me so the details in the videos are hard to figure out sometimes. It would be great if the videos were resizable or the whole UI was just wider.

I'm on a 32" 4k monitor with 150% UI scaling. This is what the UI looks like on my monitor:

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

Your background gradient is interesting!

Your background gradient here is interesting!

How did you do it?

Communicate new features to users

It would be nice if we could inform users about new stuff we add. How about some icon in the header that has an Indicator whenever we deploy something new. On click, it can show a modal with info about new features. We could store it in local storage if the user saw it and remove the indicator on the icon based on that :)

Docker Configuration Issue

Hello!

I'm encountering an issue.

Despite setting up the environment as outlined in the "Steps to run it with Docker" section of the project on a Windows 11 system, I keep running into the following errors.

I've tried numerous approaches and even reinstalled yarn, but the problem persists.

Could there be an issue with the project's configuration file?

=> ERROR [workout-lol deps 4/4] RUN if [ -f yarn.lock ]; then yarn --frozen-lockfile; elif [ -f pa 27.5s

failed to solve: process "/bin/sh -c if [ -f yarn.lock ]; then yarn --frozen-lockfile; elif [ -f package-lock.json ]; then npm ci; elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; else echo \"Lockfile not found.\" && exit 1; fi" did not complete successfully: exit code: 1

Display recommended sets and repetitions

This one is a bit tricky because we don't have the data yet. First step would be to either
a) find the data somewhere online and update the database manually or per script
b) check the possibility to generate the data via AI / GPT-4

Then we only need to display this on the screen while doing the exercise

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

Add cable exercises

MuscleWiki already has cable exercises, would be nice to be able to include them.

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

Crash when attempting to share incomplete workout

Hello,

Once again I'd like to thank you for the wonderful work you've done.
If PRs are welcome I can attempt to whip something up.

As the title suggests sharing an incomplete workout results in a crash (example bellow).

The console prints the following errors

TypeError: can't convert undefined to object 2 .excmds_content.generated.ts:2097:271
TypeError: can't convert undefined to object .excmds_content.generated.ts:2097:27
TypeError: e.mainMuscle is undefined

In an ideal world we'd be able to "resume" as opposed to "share" incomplete workouts.

My use-case is to use this app on my phone - and because of android shenanigans the page will often times "unload" resulting in me losing my progress - which is quite frustrating.

Drag n drop exercise sorting

It would be nice to be able to sort the exercises using drag and drop. This would be on the last setup screen where you can select and replace exercises. Also add an indicator on the left that it's draggable.

Hope to support Chinese

Hope to support Chinese

Show muscle group in "Exercises" view

I've been using the desktop website for about a month now. Usually, I train 3 different muscle groups in my workouts and sometimes I'm not quite sure which exercise is for which muscle. That's probably mostly an issue for people that are new to working out.

The Muscles view shows which workout is for which muscle group:

but the Exercises view does no longer display this information:

For me, it would be helpful to keep showing the muscle groups, so I know when I mess up during the exercise (i.e. the wrong muscles are burning). I had this happen a few times where I wasn't sure if an exercise was for shoulders or traps, for example.

Thanks, again, for creating this website.

Videos not loading

Hi,

Videos don't seem to me loading

Thanks!

[Bug] Lately the workout is not marked as complete for me

on firefox - maybe it's related to multiple workouts (with the same exercises)

Add stretches to workout routine

We have stretches for most (maybe even all) muscles in our database. We could add a setting on the muscle screen to automatically add stretches at the end of the generated workout. Furthermore, we need to add them to the modal for picking exercises.
If we do that, we have to decide if we want to enable this option by default

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

Missing <noscript>

Opening the page, the get a plain blank page with no text.

Please include a <noscript> element with a short description of what this application is doing so users a) get a message informing them to allow JS on the page b) understand what will happen when they do allow (this is a web app, but what kind?). Often the same text as the <description> can suffice.

Make it a progressive web app

It would be nice if people could install it to their phones as a progressive web app. (probably using https://www.npmjs.com/package/next-pwa)

A native app would also be an option, but I don't know if it's worth the effort - probably more of a future topic once we consider the website done / feature complete

Motivate people to donate by displaying them

I created a Ko-Fi page for workout.lol : https://ko-fi.com/workout_lol
First, we could improve how we display the link in the footer - we could add the official kofi button.

We could also offer a special symbol on their profile for people that donate, like lichess does:

Additionally, we could show them in the footer with a link or on an extra "sponsors" page

Add female

Hi

is there a way to add a workout for women? If there is, it’s not very intuitive as I could not find it yet. :)

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

iOS app？

Improve video size on workout

Make the videos a bit bigger depending on the screen size and let the user maximize (resize?) it.

Add PWA support

Should be possible using https://www.npmjs.com/package/next-pwa

Add warm-ups to routine

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

Integrate a stopwatch directly into the app

So the user who has not a watch on his wrist is not forced to go to his "clock" native app.

Maybe it include to purpose how many rest the user want between sets / exercices ?

What do you think ?

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified