I Built a Workout Tracking App using Next.js and Firebase!๐Ÿ’ช

prnvbirajdar

Pranav Birajdar

Posted on March 31, 2021

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! ๐Ÿ˜Š

๐Ÿ’– ๐Ÿ’ช ๐Ÿ™… ๐Ÿšฉ
prnvbirajdar
Pranav Birajdar

Posted on March 31, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

ยฉ TheLazy.dev

About