WorkoutNothing
WorkoutNothing is a React-TypeScript application built to help you workout and keep track of your progress. Each exercise has its own dedicated page for stats and allows the user to have full control over their profile and workouts.
- Type
- Practice
- Stack
- React
- TypeScript
- React Query
- Styled Componets
- React Hook Form
- Supabase
- Netlify
Project Purpose and Goal
This project included the 4 following phases and iterations of the site. The first phase creating settings that would allow users to customize their profile, units and general settings. The second phase is adding exercises, measures and creating pages for each one so user can have every info about their progress and instructions if they don't know to perform certain exercises. The third phase is enabling users to start a workout and add exercise to their workout by keeping track of the time and allowing users to add rest time for each set and exercise. The fourth phase involves creating a history of workouts, allowing users to create workout templates, edit their previous workouts, and display stats on the dashboard.
The most effective approach I found to implement these 4 phases is to create settings, exercises and connect everything to them, and after that to create the logic of creating a workout and submitting it with updating exercises records.
- React
- TypeScript
- React Query
- Styled Components
- React Hook Form
- Supabase
- Netlify
Web Stack and Explanation
I chose React for this application because I wanted to practice using React with TypeScript. For data base I chose Supabase with incredible support for TypeScript and very good combination with ReactQuery.
ReactQuery is used across the entire project to provide the fastest performance, because we can store stale data in it and as we go to the same page that is using that data loading will be significantly faster. I chose to work with React Context so that it can store current data from workout and the time (of the workout) since I wanted to use it in a large project instead of Redux. React Hook Form came to mind first for using the forms, because of how fast and easy you can work with it. For styling, I used styled components because they are efficient and don't need a huge amount of files because they are written in react. Netlify is also an obvious choice for deployment because of its speed and reliability.
Problems and Thought Process
Like with most projects, always some sort of a problem appears on your journey, the most difficult one was creating whole logic with workout context and working with best practices while using TypeScript with it so I don't provoke errors
As well for the application, to be the fastest possible I was making components as reusable as they can be because of how complex and big workout context was and how many exercises are in the data base because it needs a lot of time so they can be loaded so other things needed to be small and reusable. That's why i used styled components, because the structure of CSS in JS is much easier to use, especially because styled components use their own props too.
Lessons Learned
I could spend all day describing the lessons that I learned while working on this project, but the most important ones are involved in my newfound understanding of TypeScipt and React. I always wanted to create such an application for working out and to understand how to implement such a logic allowing people to be more productive and to have a better workout
Other Projects
The Wild Oasis
The Wild Oasis is a user friendly hotel management application. That helps employees manage everything about hotel data.
View Project
The Bug Book
An fullstack social media application built to help you find other people and talk with them.
View ProjectWant to get in touch?
Send me a message!
If you're searching for a developer, need help with something, or just want to connect, don't hesitate to get in touch.