mariniem/trayn

Trayn

Trayn is an App which helps you to create your individual workout from a selection of exercises. You have the option to save your personal workouts and the App will guide you through the exercises: so let’s “Trayn” wherever you are.

https://github.com/mariniem/trayn

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

trayn's Issues

add delete function for created individual workout

Value statement

As a User
I need a delete function
so that I can be flexible and have the opportunity to delete my created workout

Description (Text, Scribble, Wireframe, Design)

• x in every created workout on the third screen (favorites)

Acceptance criteria

• x on image of exercise (right & top)
• delete function
• on click: pop up, to check if the user really wants to delete (ja oder nein)

Tasks

• add a x button with a delete function
• pop-up

Size

S

Integrate Backend Get

Description (Text, Scribble, Wireframe, Design)

Acceptance criteria

• add server
• add services.js
•  install all relevant packages

Tasks

• [ ]

Size

M

create pictures of exercises

Description (Text, Scribble, Wireframe, Design)

• I need a list of pictures from different workout exercises

Acceptance criteria

• add about 12 images/illustrations

Tasks

• search or produce pictures / illustrations of different exercises
• give every exercise a title and a short description and put this Data in .json file

Size

S

README anpassen

Description (Text, Scribble, Wireframe, Design)

Size

S

List of created workouts => third screen

Value statement

As a User
I need an overview with all my individual created workouts
so that can choose a workout, which I created

Description (Text, Scribble, Wireframe, Design)

• I need a list of all created workouts
• Title of Workout and button with "Start Workout"

Acceptance criteria

• list of created workouts
• can be scrolled vertically

Tasks

• create a necessary component WorkoutList in Storybook
• add component in App
• styling
• test in mobile and desktop view

Size

M

info with short description on start screen

Value statement

As a User
I need an info filed
so that I can read the description of this exercise before starting the exercise

Description (Text, Scribble, Wireframe, Design)

• info icon on exercise picture

Acceptance criteria

• info icon
• on click it shows a short description of this exercise

Tasks

• add a info component
• on click description is shown
• test in mobile and desktop

Size

S

Likes for every exercise

Value statement - a requirement, not a solution

As a User
I need a like icon (heart)
so that I can decide if I want this exercise in my personal workout plan

Description (Text, Scribble, Wireframe, Design)

• like heart icon on every exercise

Acceptance criteria

• every exercise has a like heart (on the top, right)
• on click color change
• save in local storage

Tasks

• create a necessary component HeartBookmark in Storybook
• add component in App
• styling and testing
• add local storage

Size

M

replace pictures of exercises

Value statement

• replace pictures of exercises and adjust .json file
• and order exercises

Size

S

search filter on home screen

Value statement - a requirement, not a solution

As a User
I need a search function
so that I can find my exercise easier by a search bar.

Description (Text, Scribble, Wireframe, Design)

• on first screen integrate in header a search bar

Acceptance criteria

• search bar in header on first screen

Tasks

• add a necessary component SearchBar
• testing mobile and in desktop view

Size

M

test styling of app in chrome

Value statement

As a (role)
I need (an action)
so that (a benefit)

Description (Text, Scribble, Wireframe, Design)

Acceptance criteria

• (functional descriptions)

Tasks

• (todos for the team)

Size

(small, medium, large)

start workout screen

Value statement

As a User
I need a screen
so that I can start my created workout

Description (Text, Scribble, Wireframe, Design)

• pictures of choosen exercises with skip function
• timer function

Acceptance criteria

• picture of first choosen exercise
• option to skip exercise
• start timer and then spring to next exercise
• possibility to pause

Tasks

• add component Timer and StartWorkout
• test mobile and in desktop view

Size

L

CreateWorkout form => second screen

Value statement

As a User
I need a form with input fields
so that I can create an individual workout

Description (Text, Scribble, Wireframe, Design)

• form with input fields:
• name of workout
• category (checkbox)
• list of liked exercises (with checkbox)
• evtl. Intervall??

Acceptance criteria

• input field: Name des Workouts
• checkboxes: Kraft, Cardio, Yoga
• list of liked exercises with checkbox
• optional: intervall time (workout / pause)
• Submit Button -> save this workout

Tasks

• create a necessary component Create in Storybook
• add component in App
• styling and testing
• integrate prop types

Size

M

integrate Routing

Value statement - a requirement, not a solution

As a User
I need a **
so that (a benefit)

Description (Text, Scribble, Wireframe, Design)

• integrate routing

Acceptance criteria

• (functional descriptions)

Tasks

• (todos for the team)

Size

S

Footer: color change

Value statement

As a (role)
I need (an action)
so that (a benefit)

Description (Text, Scribble, Wireframe, Design)

• color should change, on what page the user is

Acceptance criteria

• (functional descriptions)

Tasks

• (todos for the team)

Size

S

file structure VS Code

Size

S

Add delete to favorites screen

Value statement

As a User
I need a delete option
so that I can delete my individual created workout.

Description (Text, Scribble, Wireframe, Design)

• delete "x" on every workout in my workout overview

Acceptance criteria

• "x" on every workout card
• add delete function

Tasks

• testing mobile and desktop
• delete in backend

Size

M

list of exercises

Value statement

As a User
I need a list of exercises with workout pictures/illustrations
so that I can create with my favorite exercises an individual workout plan

Description (Text, Scribble, Wireframe, Design)

• it's a list of scrolling exercises
• in first step every exercise contains an illustration
• search and filter functions on the example image can be ignored

Acceptance criteria

• exercises have to be visually separated
• list of exercises are scrolled vertically

Tasks

• create a .json file
• create a necessary component Exercise in Storybook
• add component Exercise in App
• styling (all cards have the same size and gap)
• test in mobile and desktop view

Size

M

Sketch Design

Tasks

• Sketch Design for the next screens

Size

S

Header

Value statement - a requirement, not a solution

As a (role)
I need (an action)
so that (a benefit)

Description (Text, Scribble, Wireframe, Design)

• logo
• search function

Acceptance criteria

• (functional descriptions)

Tasks

• (todos for the team)

Size

(small, medium, large)

cypress testing

Value statement

As a (role)
I need (an action)
so that (a benefit)

Description (Text, Scribble, Wireframe, Design)

Acceptance criteria

• (functional descriptions)

Tasks

• (todos for the team)

Size

S

dynamic routing

Size

S

create form with submit button

Value statement

As a User
I need a form with a submit function
so that I can create my individual workout

Description (Text, Scribble, Wireframe, Design)

• a create form with workout name, category and the list of all liked exercises (with checkboxes)

Acceptance criteria

• input field for workout name
• checkboxes for categories (Kraft, Cardio, Yoga)
• list of all liked exercises with checkboxes for each exercise
• a submit button
• by click on button => info to the user "Workout wurde gespeichert"

Tasks

• create a Create component (second screen)
• create a PersonalWorkoutList component and a Workout component (third screen)
• add submit function to the form
• create new collection workouts
• test in mobile and desktop view

Size

L

Footer : Nav // Header

Value statement - a requirement, not a solution

As a User
I need a navigation bar
so that I can on what screen I am and what screens are in the App

Description (Text, Scribble, Wireframe, Design)

• a navigation with 4 icons: home, plus, heart and workout timer/start symbol (in Footer)
• header preparation

Acceptance criteria

• navigation with 4 columns and 4 icons (grid)
• styling like sketch template
• should always be fixed on screen
• header with correct size and App name logo in center

Tasks

• create a component Footer in Storybook
• add component Footer in App
• add a component Header
• 4 icons as nav symbols
• styling and testing

Size

M

filter toggle button: all exercises vs. liked exercises

Value statement - a requirement, not a solution

As a User
I need a filter function
so that I can see only my liked exercises for an overview

Description (Text, Scribble, Wireframe, Design)

• filter function (all exercises / liked exercises)

Acceptance criteria

• all liked exercises should be shown if the user clicks an the filter "show only liked exercises"

Tasks

• add component FilterToggleButton in Storybook
• add component FilterToggleButton in App
• styling and testing on mobile and desktop view

Size

M

show detailed description of exercise

Value statement

As a User
I need a title and a short description of every exercise
so that I can decide if I want to give this exercise a like

Description (Text, Scribble, Wireframe, Design)

• by click on the button is the title and a short description of this exercise shown
• search and filter functions can be ignored

Acceptance criteria

• title and description are hidden by default
• title and description is shown as an overlay - complete text is shown
• the other Exercise Pictures don't change their position

Tasks

• add a toggle logic to button and card
• finish styling
• test on mobile and desktop

Size

M

add button

Value statement

As a User
I need a button
so that I can see on click title and a short description text

Description (Text, Scribble, Wireframe, Design)

There will be a button (icon show resp. hide)

Acceptance criteria

• title and description are hidden by default
• button with changing icons on click (show and hide)

Tasks

• create ExerciseToggleButton component for every Exercise in Storybook
• add ExerciseToggleButton component to App
• changing icons on click
• finish styling

Size

S

filter menu - body groups

Value statement

As a User
I need a filter menu
so that I can sort exercises by body groups

Description (Text, Scribble, Wireframe, Design)

• in my list of exercises (first screen) I need a filter menu

Acceptance criteria

• filter menu with all available categories = body groups

Tasks

• every exercise need a category
• add a filter menu component
• filter menu with checkboxes
• test in mobile and desktop view

Size

M

Integrate GlobalStyle

Description (Text, Scribble, Wireframe, Design)

• integrate GlobalStyle Component

Size

S

Nav color change

Description (Text, Scribble, Wireframe, Design)

• Footer/Nav: color should change on what page the user is

Size

S