This Workouts App is a full-stack CRUD application built using the MERN stack (MongoDB, Express, React, Node.js) with authentication implemented using Bcrypt and JWT. The app allows users to create, update, view, and delete workouts once they are authenticated. Contributions are welcome to improve styling, fix bugs, and add features.
0
stars
2
forks
source link
Enhance Workouts Home Page Along with Sorting, Filtering and Other Features. #7
This PR addresses Issue #6 by introducing several enhancements to the Workouts Home page, focusing on improving user experience through better search, filter, and sorting functionalities.
Changes Made:
Added Sorting Functionality:
Implemented a custom dropdown menu using Material-UI's Select component to allow users to sort workouts by Load, Reps, Time, and Title.
This improves usability by allowing users to find workouts based on their preferred criteria quickly.
Enhanced Filtering Options:
Introduced input fields for filtering workouts by Title, allowing users to quickly narrow down their options.
Added range sliders for Load and Reps filtering, enabling users to easily set specific ranges for their searches.
Search Functionality:
Implemented a search input that filters workouts by title. This allows users to find specific workouts without scrolling through the entire list, enhancing accessibility and efficiency.
Improved Layout and Design:
Organized the layout to separate filters and the workout list clearly, enhancing the overall visual structure and user experience.
Used Material-UI components for a more cohesive design and improved responsiveness on various screen sizes.
Performance Improvements:
Utilized memoization for sorting and filtering operations, ensuring that the UI remains responsive, especially with larger datasets.
Added useEffect hooks to manage workout fetching based on user authentication, optimizing data retrieval.
Benefits of Changes:
User Experience: These enhancements make it easier for users to interact with the workouts, find what they're looking for quickly, and customize their view based on personal preferences.
Maintainability: The use of Material-UI components enhances the code's maintainability and scalability, allowing for easier updates and style adjustments in the future.
Responsiveness: The new layout and design adjustments ensure a better user experience across different devices, making the application more accessible.
How to Test:
Navigate to the Workouts Home page.
Use the search bar to filter workouts by title.
Experiment with the sorting options to see if workouts are sorted correctly based on your selection.
Adjust the range sliders for Load and Reps to filter workouts dynamically.
Ensure that all filters and sorting options work seamlessly together.
This PR addresses Issue #6 by introducing several enhancements to the Workouts Home page, focusing on improving user experience through better search, filter, and sorting functionalities.
Changes Made:
Added Sorting Functionality:
Implemented a custom dropdown menu using Material-UI's Select component to allow users to sort workouts by Load, Reps, Time, and Title. This improves usability by allowing users to find workouts based on their preferred criteria quickly.
Enhanced Filtering Options:
Introduced input fields for filtering workouts by Title, allowing users to quickly narrow down their options. Added range sliders for Load and Reps filtering, enabling users to easily set specific ranges for their searches.
Search Functionality:
Implemented a search input that filters workouts by title. This allows users to find specific workouts without scrolling through the entire list, enhancing accessibility and efficiency.
Improved Layout and Design:
Organized the layout to separate filters and the workout list clearly, enhancing the overall visual structure and user experience. Used Material-UI components for a more cohesive design and improved responsiveness on various screen sizes.
Performance Improvements: Utilized memoization for sorting and filtering operations, ensuring that the UI remains responsive, especially with larger datasets. Added useEffect hooks to manage workout fetching based on user authentication, optimizing data retrieval.
Benefits of Changes:
User Experience: These enhancements make it easier for users to interact with the workouts, find what they're looking for quickly, and customize their view based on personal preferences.
Maintainability: The use of Material-UI components enhances the code's maintainability and scalability, allowing for easier updates and style adjustments in the future.
Responsiveness: The new layout and design adjustments ensure a better user experience across different devices, making the application more accessible.
How to Test:
Navigate to the Workouts Home page. Use the search bar to filter workouts by title. Experiment with the sorting options to see if workouts are sorted correctly based on your selection. Adjust the range sliders for Load and Reps to filter workouts dynamically. Ensure that all filters and sorting options work seamlessly together.
A Quick Demo Of The New Page and the Features Added screen-capture.webm