Workout Tracking

• 

  Home screen

• 

  Edit logs screen

• 

  User profile screen

Inspiration

There are a lot of similar websites and applications, but I wanted to create a simpler version without excessive functionality because I didn’t want to see any advertisements, tutorial videos, and pre-set workout menus.

What it does

Users can record daily training records, and edit and delete each log. Also, they can edit the user profile (e.g. name, email, weight (kg or lbs))

How I built it

I used the basic MERN technologies (React, Node, Express, MongoDB). And, I used CSS and Tailwind for designing.

Challenges I ran into

One of the hardest parts of this project was thinking about the idea of recording each date, training, rep, time, distance, and user information because usually, users create the training record during the workout or after that. So, I needed to manage the daily log by date at least. I wanted to put the "Edit" button, but when I put all of the buttons I thought those were necessary, the looks were messy and not simple. So, I decided to put only the "Add" and "Delete" buttons for each training and rep logs to fix them. Another part was the structure of the database. I set the "users" and "logs" collections in the database. I wanted to create one more collection that saves each training log by the date, but I couldn't manage them because after a few users started this application, there were a lot of training logs and the order was not followed by the timeline. So, I set the training logs in the array by the user to manage the user logs by the user account. Also, each training has an array to record the reps and weight.

Accomplishments that I'm proud of

I think I could improve the code, function, and structure in the future, but at least I could make that as much as I could. Creating the types of full-stack applications is important to make a plan and a road map for working correctly without wasting time.

What I learned

I learned how to create MERN applications and deploy the projects using Vercel. Those are basic knowledge and experience for any developer, but it was the second time for me and I could be getting confident of that.

Built With

• express.js
• mongodb
• node.js
• react
• tailwind