Workout is a web app that allows the user selects exercises from a list with the aim of setting up a workout

This is a Lab project created with the aim of exploring the advantages of using React.js | Material-ui | React Router | Redux... among other third parties libraries in the development of responsive SPA's

ToDoList for the project that shows functionalities. The check mark describes what has been completed:

• Pre load muscles and some exercise by default for testing.

• Burger menu that draw a menu on the right side with some navigation links.

  • Index: direct the user to the index of the app (Will show a text field to insert a workout code or create a new workout)
  • Exercises: Go to exercise grid list
  • About

• Muscles list

  • User can see a list of muscles through tabs.
  • Click a tab and load the exercises related with the tab selected

• User can see a list of exercises on a Grid View.

  • Make it Responsive (List view for mobile devices)
  • Exercises Distribuited in Card views
    • Card views with photo
    • Card views without photo
  • Hit the Select Button and add the exercise to your workout
  • Hit the card to see an Exercise Overview
    • Display a fullwidth dialog with photos and a main description
    • More than 2 photos will allow the user scroll/swipe photos depending on the screen size
    • Swipe Photos on mobile devices
    • Select Button added on the toolbar

• Add New exercise

  • User click the Add button located on the top-left-side to open the form in a responsive dialog
  • (Required fields) Title, Muscle, Description
  • (Validation) required fields
  • (Optionals) Image url
  • (Optionals) Charge instagram pics and videos
  • (Optionals) Charge youtube videos

• Go to Workout section (In UX definition)

A Trello Board will be added here to continue the description of all functionalities and the ToDoList of the project

Click here to see it in action

This is a Solo Project developed by Cristian Sanchez. Take a look of what he has used:

• Codesanbox as online editor
• Visual Studio Code as local editor
• React main JavaScript library for building the user interfaces
• Material-UI to implement Google's Material Design on React components
• Redux for the state management
• React-Router for components navigation
• Thunk middleware for Redux
• UX design chasing user satisfaction improving the usability and interaction with the app

Copyright [2019] [Cristian Sanchez]