DEV Community 👩‍💻👨‍💻

Cover image for I Built a Workout Tracking App using Next.js and Firebase!💪
Pranav Birajdar
Pranav Birajdar

Posted on • Originally published at pranav-birajdar.vercel.app

I Built a Workout Tracking App using Next.js and Firebase!💪

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 UID for each email, thus allowing that person to access their account and track their workouts.
    Alt Text

  • Allows users to select body part specific exercises:

    Each body part consists of various exercises including compound and isolation exercises.
    Alt Text

  • Add sets, repetitions, and weight for every exercise:

    Add, remove, update or delete sets and exercises as you please!
    Alt Text

  • 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.
    Alt Text

  • Go back and view, add, update or delete past workouts:

    The calendar helps users to go back and add, update or delete previous workouts.
    Alt Text

  • 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.
    Alt Text

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)

Collapse
 
theclever_dev profile image
Ashish Nandan Singh

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.

Collapse
 
prnvbirajdar profile image
Pranav Birajdar Author

Yeah, unfortunately the firebase authentication is kind of a pain. I'm gonna see if I can add anonymous authentication to avoid all this.

Collapse
 
joelnwalkley profile image
Joel N. Walkley

That is expected behavior from an authenticator.

Collapse
 
anilsansak profile image
Yaşar Anıl Sansak

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.

Collapse
 
prnvbirajdar profile image
Pranav Birajdar Author

Thank you for the feedback! Yeah, I just noticed the white space. I'll get it fixed.

Collapse
 
decamagum profile image
decamagum • Edited on

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.

Collapse
 
w00st profile image
W00ST

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:

  1. letting the user decide if they want to add the weight and reps
  2. When you have multiple sets, being able to delete or like check-off reps that you have completed before you delete it from the list
  3. and random fandom for mobile adding the functionality for swipe to delete

Overall awesome stuff! Can't wait for the future iterations!

Collapse
 
prnvbirajdar profile image
Pranav Birajdar Author

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!

Collapse
 
sanderdebr profile image
sanderdebr

Great UX! Nice app, would love to see the kgs / metric system included.

Collapse
 
prnvbirajdar profile image
Pranav Birajdar Author

Thanks! I will be adding that soon. Glad you liked it.

Collapse
 
bscott profile image
Brian Scott

Awesome work, just curious why Facebook auth with the privacy issues?

Collapse
 
prnvbirajdar profile image
Pranav Birajdar Author

Thanks mate! Not exactly sure what you mean by privacy issues.

Collapse
 
bscott profile image
Brian Scott

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

Thread Thread
 
prnvbirajdar profile image
Pranav Birajdar Author

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.

Collapse
 
huydzzz profile image
Pơ Híp

nice , bro . can u public source code for me ? thank for help

Collapse
 
ivavay profile image
Ivy Chen

Love it! Would love to try out the workout tracker if it’s live somewhere!

Collapse
 
prnvbirajdar profile image
Pranav Birajdar Author • Edited on

It is!

Here you go: lift-next.vercel.app

Collapse
 
fsolarv profile image
FelipeS

Cool, what Auth approach do you use for the server?

Collapse
 
prnvbirajdar profile image
Pranav Birajdar Author

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.

Collapse
 
thanhlm profile image
Thanh Minh

WOW! awesome work!

Do you use any tool to work with Firestore? I found refiapp.io/ is really helpful for the case

Collapse
 
prnvbirajdar profile image
Pranav Birajdar Author

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

Collapse
 
leonardoscorza profile image
Leonardo Scorza

Congratulations 😁🤘

Collapse
 
jream profile image
Jesse • Edited on

Awesome! Love me some nextjs too.

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.