Welcome to our innovative workout app! Designed to empower users in their fitness journey, our app provides a dynamic platform for creating custom exercises and tracking personal progress. With our user-friendly interface and comprehensive features, achieving your fitness goals has never been easier. Whether you're a beginner or a seasoned fitness enthusiast, our app offers a seamless experience for creating and managing your workout routines. From designing exercises tailored to your specific needs to monitoring your progress over time, our app is your ultimate fitness companion. Get ready to take charge of your workouts and witness remarkable transformations as you embark on your fitness adventure with our state-of-the-art workout app.

You can view the live site here - Workout Log

You can view the live API here - Workout Log DRF API

You can view the back-end README.md here - Workout Log Back-End README

• 1. UX
  • 1.1. Strategy
    • Project Goals
      • User Goals:
      • User stories
      • Strategy Table
• 2. Wireframes
• 3. Surface
• 4. Components
• 4. Technologies Used
• 5. Testing
• 6. Deployment
• 7. Known Bugs
• 8. Credits

1. The website should showcase a contemporary design that utilizes minimalistic colors, prioritizing the content and maintaining a clean aesthetic.
2. The website should be thoughtfully designed to provide optimal accessibility by adapting seamlessly to various screen sizes. This woulde ensure that users can easily access and navigate the website regardless of the device they are using.
3. User operations such as registration, login/logout, user profile creation, and CRUD should be simple
4. As a user, I want to easily create new data.
5. As a user, I want to be able to make changes to my existing data.
6. As a user, I want to be able to delete my existing data.
7. As a user, I want to be able to track my existing data.

Throughout the project, I effectively utilized the GitHub Projects board as my project management tool. This involved logging all user stories, allowing me to stay organized and on track. By moving relevant tasks to the "in progress" lane as I worked on them and subsequently shifting them to the "done" lane upon completion, I maintained a clear overview of my progress and ensured efficient task management.

Backlog 1:

Backlog 2:

Backlog 3:

The strategy table indicates that not all features can be immediately implemented in the initial release of the project. As a result, the project will be broken down into multiple phases. The initial phase will focus on incorporating the essential features necessary to create the minimum viable product.

Phase 1, MVP:

• CRUD functionality for Exercise, Workout and Sets
• Provide the option for users to create an account
• Design that adapts to different screen sizes

Landing page:

Sign up / sign in:

List of workouts:

Workout specific:

The website primarily utilizes the following colors:

• Gold: #F6CA80
• Dark grey: #36454F
• Light grey: #dfe0df
• Light Blue: #BECFDB
• The inherent colors from Bootstrap
• White
• Black

The website has been tested for accessibility using WebAIM's contrast checker to ensure that the text and background colors used on the website provide enough contrast for users to read the information displayed on the web.

Contrast check 1:

Contrast check 2:

The main font used throughout the website is Poppins. In case Poppins is not imported correctly, the fallback font will be a sans-serif font. The choice of Poppins was made after researching fonts that are optimized for reading

In this Front-End application, I have demonstrated a clear understanding of the React architecture by implementing component reusability. The following five components were utilized in this project, showcasing the reusability aspect of React:

• Set.js: This component is responsible for rendering a set of exercises within a workout routine. It encapsulates the logic and rendering for a single set, making it reusable across multiple workout scenarios.

• Workout.js: The Workout component represents a complete workout session, composed of multiple sets. By creating a separate Workout component, we can easily reuse and manage workout-related functionality and UI across different parts of the application.

• Exercise.js: The Exercise component handles the rendering of individual exercises within a set or workout. It encapsulates the logic and rendering for a specific exercise, making it reusable across different sets or workout routines.

• Navbar.js: The Navbar component provides the navigation bar for the application. By extracting this into a separate component, we can reuse it across various pages or sections of the application, ensuring consistent navigation throughout.

• Footer.js: The Footer component represents the footer section of the application. By separating it into its own component, we can reuse it across different pages or sections, providing a consistent footer experience.

By organizing the application into these distinct reusable components, we promote code reusability, maintainability, and separation of concerns. Each component serves a specific purpose and can be easily integrated and reused within the application. This modular approach helps to enhance the overall architecture and scalability of the Front-End application.

• JavaScript - A dynamic programming language that's used for web development
• HTML5 - A markup language used for structuring and presenting content
• CSS3 - A style sheet language used for describing the presentation of a document

• React - Advanced front-end JavaScript library for building user interfaces
• Bootstrap - Popular CSS Framework for developing responsive and mobile-first websites
• Font Awesome - A font and icon toolkit based on CSS
• Google Fonts - A library of 1482 open source font families and APIs for convenient use via CSS

• PropTypes: PropTypes is a package used for defining the types of props passed to React components. It provides a way to specify the expected data types and shapes of props, helping to ensure the correctness and consistency of data flowing through the application.
• react-notificationsA package used for implementing notifications in React. It provides functionality to display success and error notifications for user actions.
• axios - An HTTP client library for making network requests from a React application. It simplifies the process of sending HTTP requests and handling responses.
• jwt-decode - Library for decoding JWT tokens.
• react-bootstrap - React components for using Bootstrap with React.
• react-dom - React library for rendering components on the DOM
• react-router-dom - Library for routing in single-page applications.
• react-scripts - Scripts for creating and building React projects with Create React App.

• WebAIM - Used to test the contrast and accessibility.
• GitPod - Used to create and edit the website.
• GitHub - Used to host and deploy the website as well as manage the project.
• Google Chrome DevTools - Used to test responsiveness and debug.
• Responsive Design Checker - Used to test responsiveness.
• Figma - Used to create mock-up designs.
• Heroku - Used to deploy the website
• ESLint Validation - Used to validate JavaScript code

I have performed comprehensive responsive testing on all pages of the application across a diverse range of devices. The devices I have specifically tested include:

• iPhone SE
• iPhone XR
• iPhone 12 Pro
• Pixel 5
• Samsung Galaxy S8

To create a new Heroku app, you can follow these steps:

• Sign into Heroku: Go to the Heroku website and sign in to your account.

• Select New: Once you're logged in, navigate to your dashboard or the Heroku dashboard homepage.

• Select Create New App: Look for the "New" button or link, usually located in the top right corner of the dashboard. Click on it to create a new app.

• Enter a relevant app name: In the app creation form, provide a name for your app. Choose a name that is descriptive and relevant to the project you're working on.

• Select the appropriate region: Heroku provides several regions where you can deploy your app. Choose the region that is closest to your target audience or where you prefer your app to be hosted.

• Click the Create App button: Once you have filled in the necessary information, click the "Create App" button to create your new Heroku app.

• Commit and push all files to GitHub: Ensure that all the files related to your project are committed and pushed to your GitHub repository. This step ensures that the latest code changes are available for deployment.

• Deploy to Heroku: In your Heroku app dashboard, navigate to the "Deploy" tab.

• Manual deploy: Scroll down to the "Manual deploy" section, where you'll find options to deploy your app from different branches. Select the branch you want to deploy.

• Click the "Deploy Branch" button: Once you have chosen the branch, click on the "Deploy Branch" button. Heroku will start the deployment process and build your app using the provided code from the selected branch.

There are two known bugs in the set creation feature that need to be addressed:

Incorrect exercise selection in the dropdown: Currently, the dropdown allows the selection of all exercises, regardless of whether they belong to the user or not. The intended behavior is to only permit the selection of exercises that belong to the user. This bug needs to be fixed so that only the user's exercises are available for selection in the dropdown.

Mandatory entry for unit 2: Presently, when creating a set, the value for unit 2 is required to be filled, even if the exercise does not have a second unit. This is an issue because some exercises may not have a second unit. The bug needs to be addressed by allowing the unit 2 field to be optional when it is not applicable to the exercise.

There is a known bug in the workout editing feature that affects the date field. When attempting to edit the date of a workout, the system returns a date that is one day earlier than the selected date. This issue needs to be addressed as it is causing incorrect dates to be saved in the system.

To resolve the first bug, the following steps can be taken:

• Retrieve the list of exercises belonging to the user.
• Update the dropdown menu to populate only with the exercises from the user's list. -Ensure that the selection mechanism filters out any exercises that are not owned by the user.

To address the second bug, the following approach can be adopted:

• Modify the set creation form to include a checkbox or toggle indicating whether the exercise has a second unit.
• When the checkbox is selected or toggled to indicate the presence of a second unit, the unit 2 field should be made mandatory.
• When the checkbox is deselected or toggled to indicate the absence of a second unit, the unit 2 field should become optional, allowing the user to leave it blank.
• By implementing these fixes, users will only be able to select their own exercises from the dropdown, and they will have the flexibility to enter a value for unit 2 only when it is applicable to the exercise being added to the set. These updates will enhance the user experience and improve the accuracy of the set creation process.

This project was inspired by the Code Institute walk-through Moments project and has been heavily modified

The files which have been created and used for the Workout Log project that have been copied from the Moments walkthrough project were the following

• CurrentUserContext.js
• useRedirect.js
• axiosDefault.js