Workout web application built with React.js and Firebase to easily build, save, and view user workouts
I designed and built this mobile friendly, responsive workout web app with React.js, including React Hooks. I used both custom style sheets (CSS modules) with CSS3 and the Material UI (v5 4.2) library to style components. Additionally, I used Atlassian's 'react-beautiful-dnd' to add drag and drop functionality.
- React Router to create a single page application with navigation
- Managing and Lifting State with useState() hook to dynamically change UI
- Passing workout data with props after creating in the workout builder page to the all workouts library page and to the today's workout display
- Styling React components with Material UI (v5 4.2) as well as custom CSS style sheets
- Drag and drop functionality for the workout builder so the user can order the excercises how they wish (using react-beautiful-dnd npm package)
- Creating auth pages for logging in and signing up users with form validation
- Saving users and their workouts to Firebase Authentication and Realtime Database for backend functionality
Passing user form data (nested arrays of objects) through multiple component layers presented some challenges at first but really helped me with strengthening my React skillset. As I have moved on to other projects these JS methods and mental approach has been extremely helpful in seamlessly working with other nested data.
- After signing up and logging in, the first page the user sees is the workout builder where the user can create exercises by filling out input information for exercise name, setsxreps, and weight for each exercise
- The user has the ability to delete any exercises after creation
- The user can also drag and drop workouts to edit the order of exercises within the workout
- After completing the workout, the user can save the workout and either create more workouts or view in the all workouts page
- The second page is where the user can view all of the workouts that they have created in the workout builder. In this page the user can also delete a workout from their workout library
- The third page is where the user can select from a drop down to view their workout that they will do for the day for easy reference
The idea for this app came as I have been using other apps like Apple Notes and Notion to track my workouts but I wanted to build something more workout specific. After completing a To Do list web app with React.js as part of an online course, I came up with this idea as many of the basic principles overlapped. I plan to use this to track my workouts on my iPhone so I made sure for a responsive layout that is perfect for mobile screensizes. A goal of mine was to have the workout builder have drag and drop functionality for added customization so I made sure to find an appropriate library.
The previous version is located on a separate repository and was hosted with GitHub Pages. After completing the first version of the app I wanted to include the ability to create user profiles and save workouts so opted to learn more about Firebase to do so. Additionally, I improved the UI/UX as well as a few bugs with the hosting configuration.
- Use a state management library or tool like useContext or Redux to avoid prop chaining while passing state between multiple component levels
- Using TypeScript to help catch errors earlier in the IDE rather than at runtime
- Material UI was intuitive and made building this easier in some cases but I prefer more control over my styles so I would opt to use CSS modules
- After building my portfolio website with Next.js I have become a huge fan and will build most apps with it moving forward for the advantages of having server side rending and dynamic client side rendering for added SEO/performance and UX
- Functionality to edit each 'Today' workout live when user is working out to reflect any changes in the workout for that day
- Styling improvements to have everything within the viewport and not as much scrolling
Hosted with Firebase My Workout App
