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 al…


This content originally appeared on DEV Community and was authored by Pranav Birajdar

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! ?


This content originally appeared on DEV Community and was authored by Pranav Birajdar


Print Share Comment Cite Upload Translate Updates
APA

Pranav Birajdar | Sciencx (2021-03-31T18:20:52+00:00) I Built a Workout Tracking App using Next.js and Firebase!?. Retrieved from https://www.scien.cx/2021/03/31/i-built-a-workout-tracking-app-using-next-js-and-firebase%f0%9f%92%aa/

MLA
" » I Built a Workout Tracking App using Next.js and Firebase!?." Pranav Birajdar | Sciencx - Wednesday March 31, 2021, https://www.scien.cx/2021/03/31/i-built-a-workout-tracking-app-using-next-js-and-firebase%f0%9f%92%aa/
HARVARD
Pranav Birajdar | Sciencx Wednesday March 31, 2021 » I Built a Workout Tracking App using Next.js and Firebase!?., viewed ,<https://www.scien.cx/2021/03/31/i-built-a-workout-tracking-app-using-next-js-and-firebase%f0%9f%92%aa/>
VANCOUVER
Pranav Birajdar | Sciencx - » I Built a Workout Tracking App using Next.js and Firebase!?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/03/31/i-built-a-workout-tracking-app-using-next-js-and-firebase%f0%9f%92%aa/
CHICAGO
" » I Built a Workout Tracking App using Next.js and Firebase!?." Pranav Birajdar | Sciencx - Accessed . https://www.scien.cx/2021/03/31/i-built-a-workout-tracking-app-using-next-js-and-firebase%f0%9f%92%aa/
IEEE
" » I Built a Workout Tracking App using Next.js and Firebase!?." Pranav Birajdar | Sciencx [Online]. Available: https://www.scien.cx/2021/03/31/i-built-a-workout-tracking-app-using-next-js-and-firebase%f0%9f%92%aa/. [Accessed: ]
rf:citation
» I Built a Workout Tracking App using Next.js and Firebase!? | Pranav Birajdar | Sciencx | https://www.scien.cx/2021/03/31/i-built-a-workout-tracking-app-using-next-js-and-firebase%f0%9f%92%aa/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.