I built this cool little fitness app called Athletix

Hello everyone. For the past couple of months I've been working hard to build this little personal project of mine. It's basically a fitness app called Athletics. And I wanted to build this because I wanted to take some time to improve my skills. Especially in XJS which is a React framework. To learn that and obviously the best way to learn is to build projects. So this is what I decided to build. Also, I also wanted to improve my design skills, which is something that most developers aren't really good at. They can copy a design or take some designer's work and recreate it in code, but they can't create any original designs and I didn't want to be limited by that. So I built this project mainly just to practice and improve my skills and I'm just going to take 10 minutes of your time and explore this we're gonna explore this all the functionalities and the features that I built in here and yeah let's have fun with it so we're just gonna go to the official web for this app which is right here I deployed this on Vercel this is just a basic landing page but then click here we're gonna go to the github for this project and i'm just gonna clone this repository over here i'm gonna delete this this is just an old copy okay i'm gonna open up vs code in this folder and we're going to clone the repository and then compile it and then we'll run it and explore some of the features let's see okay okay now i'm gonna cd into this okay that was wrong cd into this and then just run it to open compose up and this is gonna build all the images that we need the the front end and the back end in the database. It's going to build all of them and it's going to compile them and run the application. So this is going to take like 5 or 10 minutes to finish so I'll just skip ahead to that point. Okay it's finally done. So the front end is running on port 3001, the back end on port 8000 and the database on port 5432. so I'm just gonna head over to localhost 3001 and there we go we have this app over here so first things first I'm gonna create a new account and it takes me to my dashboard over here now it does also show me a tutorial of sorts I used react joyride over here and this basically like gives me a interactive tutorial to and a walkthrough to the dashboard uh-huh we were coming workouts here when any workout samples repeat those over here so this just basically helps you to understand how everything works over here this is our dashboard and it's obviously really empty right now because I just created this account it shows you your upcoming workouts it shows you the history your past history of workouts we're gonna go we're gonna go to this sidebar over here we have some pages dashboard workouts templates measurements exercises I going to start by going to the workouts page Obviously currently it empty I going to create a new workout and just create what I did today which would be chest and side balance. We're going to add some exercises over here. let's see incline chest press how about that and you can see it automatically fills in the set from the last data so if i have 25 kg and 14 reps over here and i create a new set but i just use the same values because like that's usually how I would prefer this to be it's just a little user experience that will benefit exercises over here simple chest fly let's say 50 kg 12 reps for presets and then I'm gonna have final exercises lateral raise dumbbell version and yeah we also have these autofill suggestions for every single exercise I have a big list of exercises that I took from this table and I just added them to the database and it just filters to all of them to like give you some suggestions based on what you're typing so we're gonna fill all of this up let's say five sets I can also add any notes or anything to this workout I just say it was a good workout I'll click Save and then it's gonna take me to that workout there we go so now this has been added you can view it show all the exercises I did all the records I made so for instance check it check this out it gives me the set tag of weight basically this means that this is the heaviest weight that I've lifted in my entire history of doing this exercise same thing I'll be doing over here so this basically we have like three set tags weight PR and best set so these three basically get assigned to one of these sets based on how well you perform currently since this is just the first workout so the system doesn't have a lot of data obviously this is just the first workout so it just automatically get a assigns this tag to the first set let's move on I'm gonna let's say I want to create a weekly training split let's say I want to create a push-pull leg split so if I want to do that I'm gonna go to the templates page over here we're gonna create six templates for push pull legs workouts I'm just gonna create some sample workouts over here and any exercises because I just want to show you how this template system works so I'm just gonna create some test exercises over here we're gonna set this repeat to weekly I'm gonna repeat the push workout on Monday and Thursday add template and as you can see it's gonna repeat every week on every Monday and Thursday we're gonna add a pull workout so test exercise and I gonna repeat this weekly on Tuesday and Friday And lastly I gonna go do the same thing for Test exercise repeat this weekly on Wednesday and Saturday. We're gonna keep Sunday as a rest day So with all three of these templates added let's go back to the dashboard and And in the upcoming section here you can see that we get a complete overview of our weekly training split. So for instance every Tuesday and Friday I want to have a pull workout. It's going to tell me that every Tuesday and Friday I have a pull workout. Same thing for legs, same thing for push workouts. So what this basically does is it looks ahead like 6 to 14 days. And it analyzes the dates of every single template you add. and it just combines those two and tries to see which dates match so it can tell on which day which template is supposed to repeat and then it just shows you these results over here so you can easily see what workout you're supposed to do tomorrow what workout you're supposed to do a couple days from now or next week or the week after that and yeah this is really helpful for like seeing your future workouts so now let's go back to or let's go to the measurements page we have another tutorial over here this just tells you what this page is all about measure and track your p-metrics here and then this one to add a new one a new record this button is to mark your measurement is as a favorite and if you do that it shows up on the dashboard for you so you can track it more easily so we have these measurements over here calories weight body fat percentage and we also have measurements for all our body parts like chest waist hips biceps triceps upper abs left thigh calves all of these so let me just try adding some weight measurements let's say on the 24th I am 89 kg just get added over here I don't know why it's repeating that tutorial let's say on 25th I am 80 kg and these are just example values obviously ok now I notice another bug in this application if I add a new record it somehow repeats the tutorial for some reason I'm gonna fix that later anyway so we're gonna click show all over here and it shows you the a graph of your progress in this measurement over time so basically we go from 79 to 80 kg and this graph just shows that and we also show all the past records down here now let's hide this and let's mark these three measurements as favorite because I want to show you what this looks like on the dashboard I'm also gonna add a couple measurements over here let's say 2500 calories and on 24th let's say 2700 calories for body fat percentage I'm gonna say let's say 15% now let's head back to the dashboard and as you can see we now have these three weight and calories and body fat we have these three measurements showing up over here on the dashboard which we previously didn't have but since we marked these as favorite they show up on the on the dashboard for us it just makes it easier to track these measurements and track your progress in them if you're trying to go up or go down in one or two measurements like if you tracking your weight it would make sense to have your weight and probably your calories as well on your dashboard so you can just view them easily okay with X measurements done let's go to the exercises page right here so I basically just used a table library I used react table to build this because I just didn't want to build the different systems like sorting say searching pagination and filtering and all the other table systems from scratch I just wanted to offload that to a library so I used react table to build this anyway so this page is pretty self-explanatory there's not much to explore here one thing that I do like and I do want to talk about is the exercise stats over here like your estimated one rep max your max volume and max weight now these are calculated every time you log a workout or you add a new workout to your to this app so if you remember we added a chest workout earlier in the video and we added some exercises over there I'm just gonna search for those exercises and as you can see it does add these records over here for us you can view the details and not only does it show us all of these records for us for each exercise that we do. It also shows us a graph of this exercise and our performance in it over time. This is the graph for max volume and this is a graph for your estimated one rep max and generally if both these things are going up that means you're making progress in the exercise. Now currently you don't really see much of a graph because we only really added one workout so there's not really a lot of data to draw a graph over here but as you add more workouts in here you should see a proper graph line going up and down up and down okay let's move on from this lastly we have the profile page there's not really much to see here there's just a section for fitness goals you can add your goals over here let's add a couple for instance let's say i want to bench um 200 kg I can add that. I can add a description maybe. And I can save that. And it gets added over here. Let's say another goal. I want to squat 250 kg. Let's say. I can add that over here. I can track my goals over here. I can mark them as completed. I can clear the completed goals. There's really not much else to this page. It's just to track your personal goals and your fitness journey. the other thing is the settings there's not really much settings again it's just to we only have one setting and that's just to change your unit for weight for from gram to pounds or from pounds to kilogram depending on which unit you use in your country and lastly i just have these tutorials that we talked about earlier if you want to restart one of these tutorials you can do that through here and it will just when you go back to that page you will see that tutorial again so for instance I have restarted all of them if I go back to the dashboard it gives me that tutorial again like so over here as well okay let's go back and yeah then all we have left is a logout button and this is just going to log you out and take you back to the login page. Anyway yeah that's that's all I really have to show in this app. I mainly just wanted to build up my skills and I wanted to create an app that I personally would want to use and I think I accomplished both. So yeah just wanted to show what I built over here. Thanks for watching.