DevelopingMobility

• Overview
• MVP
  • Goals
  • Libraries and Dependencies
  • Client (Front End)
    • Wireframes
    • Component Tree
    • Component Architecture
    • Time Estimates
  • Server (Back End)
    • ERD Model
• Post-MVP
• Code Showcase
• Code Issues & Resolutions

Overview

DevelopingMobility is a platform designed to help the user alleviate pain and discomfort in our new work from home world. Users are able to select areas where they feel tension or pain from a clickable model on the home page. When the user clicks a body part will be redirected to a page containing streches and mobility drills for that muscle group. Users can click on specifc stretches to see more information. On the stretch details page they can favorite stretches and add them to a routine. Users have their own profile page where they can view their favorites stretches and routines.

MVP

The DevelopingMobility MVP will include a home page with clickable human body model that will redirect the user to specific muscle detail pages. The muscle detail pages will contain a list of streches and mobility drills that will each redirect to a detail page with a video and more information about the stretch. Users can add a stretch to a drop down list of their routines or add as a favorite. Users can edit their routines and their profile details.

Goals

• A home page that will redirect the user to specific muscle detail pages based on their selection
• Muscle detail page that lists available stretches
• Strech detail page that shows information about the stretch, a button to save as favorite, and a drop down list to add to routine
• Full user authentication
• User profile page that displays information about the user as well as showing their favorited stretches and saved routines
• User can edit profile
• User can create or edit routines

Libraries and Dependencies

Library	Description
React	Library used for building UI components.
React Router	Library used to enable dynamic routing.
Axios	Library allowing us to make http requests and communicate with the backend.
Material UI	Library used for frontend styling.
Rails	Framework used for the development of the backend of the website.
PostgreSQL	Database management system used for backend.
Bcrypt	Dependency used for password hashing for authentication.
Jwt	Dependency for transmitting data securly between frontend and backend.

Client (Front End)

Wireframes

• Landing

• Sign Up

• Sign In

• Home

• Stretches

• Stretch Detail

• User Profile

• Edit User Profile

• Routine

• Edit Routine

Wireframe Link

Component Tree

Component Tree

Component Architecture

src
|__ containers/
      |__ MainContainer.jsx
|__ layouts/
      |__ Layout.jsx
|__ screens/
      |__ LandingPage
          |__ LandingPage.jsx
          |__ LandingPage.css
      |__ Home
          |__ Home.jsx
          |__ Home.css
      |__ Stretches
          |__ Stretches.jsx
          |__ Stretches.css
      |__ StretchDetail
          |__ StretchDetail.jsx
          |__ StretchDetail.css
      |__ UserProfile
          |__ UserProfile.jsx
          |__ UserProfile.css
      |__ EditUserProfile
          |__ EditUserProfile.jsx
          |__ EditUserProfile.css
      |__ Routine Details
          |__ RoutineDetails.jsx
          |__ RoutineDetails.css
      |__ EditRoutine
          |__ EditRoutine.jsx
          |__ EditRoutine.css
      |__ SignUp
          |__ SignUp.jsx
          |__ SignUp.css
      |__ SignIn
          |__ SignIn.jsx
          |__ SignIn.css
|__ services/
      |__ auth.js
      |__ config.js
      |__ stretches.jsx
      |__ routines.js

Time Estimates

Component	Priority	Estimated Time	Time Invested	Actual Time
Setup Rails and Database	H	6hrs	0hrs	0hrs
Seed Database	H	4hrs	0hrs	0hrs
Setup React and Frontend	H	2hrs	0hrs	0hrs
Link front and back ends	H	2hrs	0hrs	0hrs
Create Layout	H	2hrs	0hrs	0hrs
Create Containers	H	6hrs	0hrs	0hrs
Create Screens	H	12hrs	0hrs	0hrs
Material UI Styling	H	20hrs	0hrs	0hrs
Material UI Grid	H	5hrs	0hrs	0hrs
Media Queries	H	5hrs	0hrs	0hrs
Total	H	64hrs	0hrs	0hrs

Server (Back End)

ERD Model

ERD Link

---

Post-MVP

• Dark mode
• Usable timer widget
• Users can comment on stretches and give them ratings

---

Code Showcase

Coming soon.

Code Issues & Resolutions

Coming soon.