I recently finished building and deploying a strength training-focused workout app. I wanted to share it here and see what you guys think about it. Love it, hate it, have suggestions to improve it further or features you would like to see added? I'm all ears!
The tech-stack used for the project:
- Next.js as my React framework of choice
- Firebase Authentication for logging in (Google and Facebook providers)
- Firebase's Firestore database to store all the workout data
- Tailwind and Windmill UI for all my styling needs
These are features I have added to the app so far:
-
Sign in with Google or Facebook to create a profile:
After signing in, Firebase creates a special
user UIDfor each email, thus allowing that person to access their account and track their workouts.
-
Allows users to select body part specific exercises:
Each body part consists of various exercises including compound and isolation exercises.
-
Add sets, repetitions, and weight for every exercise:
Add, remove, update or delete sets and exercises as you please!
-
Add, update, and track your physical stats:
The app also allows users to track several physical stats such as weight, height, daily calories, and body fat percentage.
-
Go back and view, add, update or delete past workouts:
The calendar helps users to go back and add, update or delete previous workouts.
-
Copy previous workouts and paste them to your current session:
If you are repeating a workout session on multiple occasions, you can now copy and paste it wherever needed and add/edit/delete those specific workouts.
Features I am planning to add in the future:
I am currently using this app for almost a month now and adding more features as I see they fit. Some of these include,
- Kgs to lbs and vice-versa conversion
Copy a particular previous workout and paste it to your current session- A dashboard to track your body weight, and daily calories
- A dashboard to track strength gains for specific exercises
Please feel free to tinker around and let me know if you like it! ๐
Top comments (23)
Amazing effort and congratulations on what you were able to accomplish.
On a side note I believe there maybe some issue with the Authenticator from fire base. I am getting a error while I try to login!
For some reasons the in app browser from DEV is not recognised by google.
Yeah, unfortunately the firebase authentication is kind of a pain. I'm gonna see if I can add anonymous authentication to avoid all this.
That is expected behavior from an authenticator.
Nice work Mr. Birajdar. The app looks great. It is simple to use. I would love to see metric units for sure. And also there should be a simple email login option too. On the other hand, I have noticed a small bug. When you go to the profile page (/profile), there is a slight blank space on the right side of the page. It can be only seen at dark mode.
Thank you for the feedback! Yeah, I just noticed the white space. I'll get it fixed.
A great idea and a great implementation! Congratulations to you! I just recently started training. Accidentally read an article about the benefits of a treadmill on treadmillreviewsite.co.uk/what-are... and decided to buy it for myself. For 3 weeks now, I've been starting my morning with a run before breakfast and I really feel better. I see a lot of people who train here, can you tell me how to burn fat faster with a treadmill and what to eat for breakfast after training. Thanks.
Wow, really dope!
Color scheme, dope, optional light theme, dope, flow and layout of workouts and amount of selection dope.
I did have a couple ideas:
Overall awesome stuff! Can't wait for the future iterations!
Thanks a lot, mate!
Those are some really cool feature ideas. I might try and implement that. I'm more focused on getting the lbs/kgs conversions and displaying some visual graphs for weekly strength gains and weight loss/gains over weeks/months.
Thank you for the suggestions though!
Great UX! Nice app, would love to see the kgs / metric system included.
Thanks! I will be adding that soon. Glad you liked it.
Awesome work, just curious why Facebook auth with the privacy issues?
Thanks mate! Not exactly sure what you mean by privacy issues.
Just the fact that FB is known for data harvesting and such. Would be the last place I want my fitness data exposed too.
How much React would you recommend someone to know before trying out Next.JS?, Beginner, Experienced React developer..etc
Oh, Facebook Auth is only used to capture the username and email. All of the fitness data is stored on Firebase and Google (who owns Firebase) does not share this data with any Auth providers.
Honestly, I tried Next.js after working with React on 2 projects. It's not really that different from CRA.
nice , bro . can u public source code for me ? thank for help
Love it! Would love to try out the workout tracker if itโs live somewhere!
It is!
Here you go: lift-next.vercel.app
Cool, what Auth approach do you use for the server?
Firebase Auth takes care of all the auth stuff for me. I have no experience with any back-end technologies, and firebase basically took take of all it which allowed me to focus on building my front end.
WOW! awesome work!
Do you use any tool to work with Firestore? I found refiapp.io/ is really helpful for the case
I have not. Honestly, I didn't know there were tools to help with Firestone. It was a pain trying to understand the Firebase nuances tbh. ๐