Project Description

Flex Five - a browser-based full stack tool coded in React using JavaScript and CSS, featuring an API managed using MongoDB, Mongoose and Node.js.

This tool was designed for users to log their workouts. This application will recommend an assortment of workouts and specific weight lift moves based on user preference, with the ability to cycle through options. Users are also able to log a custom workout of their choice. This app was designed with mobile first styling as users would most likely leverage the app on-the-go.

Link to the tool.

Installation Instructions

Click on the link to the tool and navigate in your browser window.

Wire Frames

Screen Shot 2022-01-30 at 7 29 31 PM Screen Shot 2022-01-30 at 7 31 59 PM Screen Shot 2022-01-30 at 7 33 47 PM Screen Shot 2022-01-30 at 7 34 39 PM Screen Shot 2022-01-30 at 7 34 59 PM

Planning Highlights

Initial Stage

First step involved prototyping front-end layout. This included Prototype Wireframe sketches for App Layout, Front-End React,Component Structure and Back-End API Structure Endpoints and Directory Naming Convention.

The sketches component structure and backend structure were shared and discussed in a team meeting. The team collaborated and edited some of the vision’s of the app’s design as a team.

The app had a initial vision of containing a calendar that would organize and display data to the user. This idea was refactored because the integration of a front end calendar with a back end MongoDB had a high chance of delaying the production of the application within the 6 day deadline.

The basic functionality of the app did not differ much from the planning stages the look and layout of the app was adapted more to more simplistic mobile-first approach. Which increases usability of the app in a gym setting.

During Development

The app’s development lead to a mobile first layout and design. The calendar approach was abandoned and a simple more user friendly for the app’s functionality. A custom workout button and form was integrated, so the user can have the freedom of adding a custom workout to the log. The information is saved for the user to have access to the log in the dashboard screen at any time. Delete functionality was added to LogHeader so user can remove undesired workouts.

MVP - User Stories

As a user, I would like a workout personally recommended to me

As a user, I would like to be able to skip certain workouts

As a user, I would like to be able to delete certain workouts from the collection

As a user, I would like a log of my completed workouts

Stetch goals - User Stories

As a user, I would like to be able to add my custom workouts

As a user, I would like my workouts to be logged on a calendar

As a user, I would like to be able to flexibly "snooze" types of workouts or exercises for periods of my choosing

As a user I would like to establish a goal weight, see my current weight, and see my progression

As a user I would like the app to track how many calories I burned per session

Open Issues & Challenges