About the projects

As someone who goes to the gym regularly, I know the importance of tracking weights to monitor progress. I have tried multiple apps to track my weight, but they were either too complicated or had ads and paywalls. That's why I wanted to create my own weight tracker.

The application allows users to create workouts and add exercises to them. Users can track their weights per exercise. The application shows all the previous sessions and has a chart to display progress.

I built the frontend of the application with React, while the backend was built in .NET to securely store user data.

Personal goals

I started this project to learn more about full stack development and create something I need. Here are the goals I set for this project.

Learn React-query

In previous projects, I struggled with fetching and caching data, so I used React-query to address this issue. I used it to fetch and cache workouts, exercises, and sessions.

Practise tailwind

Tailwind is an in-HTML CSS solution that allows you to write CSS in the class of an element. Although I had tried it a few times, I wanted to improve my skills with it. For this project, I used Tailwind exclusively and became faster with it than with normal CSS.

Practise frontend reusability

React is a component-oriented framework that enables you to reuse pieces of frontend code. In previous projects, I didn't pay much attention to reusing components, resulting in a lot of duplicate code. In this project, I created a small component library for standard elements such as buttons, cards, and pop-ups, resulting in less code.

Features

Here is a description of the features of the application:

• Authentication: The application allows users to create an account and log in securely, protecting their personal data and workout information. This feature ensures that only authorized individuals have access to the user's data.

• Track weights: The application enables users to track their weights for every exercise in each session. This feature helps users monitor their progress accurately. This is done by displaying all the previous sessions and a chart.

• Create, edit, and delete: The application allows users to create customized workouts, add exercises to them, and keep track of sessions. Users can edit or delete any of these elements, providing full controll over all the data of the user.

Deployment and CI/CD

GitHub was used as the version control system. I added a GitHub Action that automatically deploys the code to an Azure App Service whenever I push code to the main branch. This feature is very useful because it allows for quick changes to be made and deployed to production rapidly.

Future enhancements

• Account page: A page where the user can see and edit account data.
• Demo mode: Instead of logging into an account, you can click on a button to acces the application to see how it works.