Giter VIP home page Giter VIP logo

capstone's Introduction

Description

This app helps weightlifting trainees to create workout plans and track their progress.

Tech Stack

  • Next.js 12
  • Node.js
  • MongoDB
  • Mongoose
  • React
  • Styled-Components

Motivation

This is my final project of a 12 week Web Development Bootcamp at neuefische. I've wanted to not only show my newly acquired Frontend skills, but also some of my desire to work as a Full-Stack Developer. That's why I've used MongoDB and Mongoose for my backend. It's been a wild ride and I am currently working on a second version of this project using Next.js 13. If all goes well, I will enroll in the Java Bootcamp also at neuefische.

Biggest Challenge

Clean Code. I've been coding Frontend for the past two years and Clean Code is my biggest pet peeve. That's why I've decided to create another version of this app, focussing on keeping my code comprehensive and modular.

Preview

Preview of my app's home screen

capstone's People

Contributors

doctype-melvin avatar

Watchers

 avatar

capstone's Issues

[US3] 'Add Exercise' form

Value proposition

As a user
I want to be able to save my exercises for any given workout day
in order to plan my week and see what to do on each day

Description

image

Acceptance criteria

  • users can click a button to add exercises
  • when clicking that button a new form appears in place
  • the form has an input field for each: exercise, sets, reps and weight
  • there is an add button
  • there is also a cancel button to drop out of the process
  • for now, both buttons only toggle between form and workout day view

Tasks

  • create feature branch
  • write a form component for the add exercise feature
  • implement the logic for in-place-toggling between form and workout day view

[US1] Create Button

Value proposition

As a user
I want to find a link that forwards me to a form
in order to create a new workout plan

Description

image

Acceptance criteria

  • there is a link that says 'create plan'
  • clicking the link forwards users to a form
  • the form view has a button to save the data
  • the form view has a button to go back/cancel the operation
  • the user can enter a plan name and how many days the plan should go

Tasks

  • create new branch feature/create-button
  • add a button to pages/index.js
  • create a form component
  • this component has an input field for name and days
  • there are two buttons
  • one button saves the form data
  • the other button allows users to abort plan creation
  • implement form submit to handle user data
  • create form page
  • create a link component (your start button should be a link element)

[US 10] Refactor Components

Value proposition

As a developer
I want to find only index.js files inside my component folders
in order to have my codebase comply with naming conventions

As a user
I want to see some sort of loading indicator
in order to know that my changes or navigation are in process

Description

The current format of ComponentName/ComponentName.js will be changed to ComponentName/index.js
The isLoading state should be communicated clearly.

Acceptance criteria

  • All component folders align with naming conventions
  • The 'Loading...' indicator is replaced with a dedicated component

Tasks

  • Rename all of the js files inside component folders
  • Create a component for the isLoading useSWR state

Size:

[US 9] Select current template

Value proposition

As a user
I want to choose my current workout template
in order to keep track of my workout sessions

Description

Within the individual template component there should be a button to mark a template as current.
This template will then allow users to log their sessions accordingly (implementation at a later point in time).

Acceptance criteria

  • Users can mark a desired template as their current plan
  • After making this selection, users are lead to the dashboard view
  • Here they see a sort of preview of their next session

Tasks

  • implement the state management to set current template
  • take care of the redirect and the preview component
  • handle some of the navbar rendering issues

Size:

[US2] Plan View

Value proposition

As a user
I want to be forwarded to my newly created workout plan
in order to add exercises to my routine

Description

image

Acceptance criteria

  • hook up app to database
  • create the model for Plan app data
  • users are forwarded to the plan's page when saving the form with a name and days
  • they can see the plan's name and the workout frequency (number of days)
  • each workout day has its own component
  • each workout day component has a button to add an exercise

Tasks

  • create a feature/plan-detail branch
  • render the plan's name
  • create a WorkoutDay component
  • the WorkoutDay should show a string e.g. 'Day 1'
  • the WorkoutDay must have a button that says 'add exercise'

[US 8] Delete templates

Value proposition

As a user
I want to be able to remove templates
in order to keep my app tidy

Description

The Overview of all templates should include a delete action for each template.

Acceptance criteria

  • Users can click an icon in order to delete the matching template
  • The view rerenders upon clicking that icon
  • There are now less templates than before

Tasks

  • create branch delete-template-button
  • create components for the template listing view
  • the components show an icon that unambiguously describes the action it's associated with (removing that template)

Size:

[US5] Delete Exercise

Value proposition

As a user
I want to find a delete button when expanding the exercise card
in order to delete a given exercise from my plan

Description

Currently users can create and update exercises. They should also be able to remove any exercise from their template.
The edit view of each exercise has a dumb delete button that does nothing yet.

Acceptance criteria

  • The delete button removes the matching exercise
  • 1. from database
  • 2. from view

Tasks

  • create branch feature/delete-exercise
  • implement logic to remove exercises from database
  • make sure the exercise is removed from the view

Size:

[US 7] Navigation

Value proposition

As a user
I want to find a navigation element
in order to switch between different pages of the app

Description

There's a navigation bar at the bottom of the screen.

Acceptance criteria

  • There's a navigation bar at the bottom of the screen.
  • Icons are used to indicate the navigational destination
  • Tapping icons renders the desired view

Tasks

  • create branch feat/navigation
  • implement a navigation bar at the screen's bottom
  • find conclusive icons
  • link icons to matching pages

Size:

[US 12] Styling

Value proposition

As a user
I want to find coherent styling
in order to find the app aesthetically pleasing

Description

Some elements/components are in severe need of styling.

Acceptance criteria

  • The app has a somewhat appealing appearance
  • PR1.1: When removing a workout set, users now need to confirm the deletion by tapping ✔️
  • PR1.2: When removing a workout template, users now need to confirm the deletion by tapping ✔️

Tasks

  • Make the app look a bit prettier

Size:

[US 6] Save Template

Value proposition

As a user
I want to save my plan
in order to use it as a template

Description

When users have finished creating all of their exercises, they can click a save button which leads them to a template overview page.

Acceptance criteria

  • There's a save button at the end of the createPlan page
  • Clicking the button redirects users to an overview page
  • Here they can see all of their created templates
  • The overview page also has a New Template button to add a new template
  • This button leads users to a form

Tasks

  • branch feat/save-template
  • create link to template overview
  • list all of the user's plans

Size:

[US4] Adding and editing exercises

Value proposition

As a user
I want to see and edit my added exercises
in order to keep my workout plan organized

Description

image

Acceptance criteria

  • Clicking the 'cancel' button allows users to close the form
  • User's are required to enter data to successfully add an exercise
  • Clicking the 'add' button closes the form
  • App now renders the exercise in the matching workout day component
  • The exercise component shows the exercise name as a title
  • The exercise component has a collapsible child
  • Per default this child is collapsed
  • The collapsed child displays the exercise sets, reps and weight
  • The collapsed child should have an indicator icon that suggests expandability
  • The expanded child shows the exercise details and two buttons
  • One button should enable users to edit their exercise name and details (edit button)
  • Clicking the edit button opens the exercise form with the current exercise values
  • The already available exercise form should change the text content of the 'add' button to 'save'
  • The 'cancel' button will not be displayed in this render of the form
  • The 'save' button does two things:
  • 1. Closes the form
  • 2. Updates the exercise component with updated values (if any changed)

Tasks

  • Create new branch feat/process-exercise-data
  • Implement the logic to save form data
  • Write the exercise component
  • Implement the collapsed/expanded view of the exercise details
  • Apply exercise data update functionality
  • Write the conditional rendering logic for exercise form

Size:

[US11] Log workout sets

Value proposition

As a weightlifting trainee and user
I want to enter my repetition numbers at a given weight
in order to track my progress

Description

Since users can now set their current template and are redirected to the next session dashboard, they should also be able to enter their reps for a given set. When users save their changes they can see a new entry in the session view.

Acceptance criteria

  • There is a dashboard icon in the navigation that links to the template's current workout session
  • Users may also click the respective link on the home screen to go to current template
  • Clicking on a day opens the logging view
  • Next to the exercise details is a button to add a new set
  • Clicking the button opens a form with two inputs and a save button
  • After entering numbers and hitting save, a new component is rendered
  • This new component shows the set details
  • Users may now click a button to edit the set details
  • User may now click a button to delete the set

Tasks

  • new branch
  • write frontend components
  • write frontend logic for handling workout set CRUD operations
  • write backend for handling workout set CRUD operations
  • give the whole app some basic styling

Size:

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.