Code Monkey home page Code Monkey logo

capstone-project's Introduction

Patiententagebuch (patient diary)

capstone project for neuefische web dev bootcamp

In Patiententagebuch you can keep track of your medications and body sign measurements. To have an overview you can see how those develop over time in different charts. All the data is stored in local storage so that only the user can access it.

The app is responsive, however it is best viewed on a mobile device.

Tech-Stack

  • React
  • React Router
  • D3
  • Storybook
  • Vercel

URL

capstone-project-bice.vercel.app

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.\

npm test

Launches the test runner in the interactive watch mode.
npm run build

Builds the app for production to the build folder.\

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

capstone-project's People

Contributors

anniviz avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Forkers

j-toscani

capstone-project's Issues

Backend

Value statement - a requirement, not a solution

As a user
I need to have access to my data from multiple devices
so that I can share and fill my data with multiple care takers

Description (Text, Scribble, Wireframe, Design)

Acceptance criteria

  • (functional descriptions)

Tasks

  • Setup Backend server

Complexity

high

Statistics

Value statement - a requirement, not a solution

As a user
I need to see charts of my observations
so that I have an overview how my observations have developed

Description (Text, Scribble, Wireframe, Design)

Acceptance criteria

  • (functional descriptions)

Tasks

  • (todos for the team)

Complexity

(low, medium, high)

React Router

Value statement - a requirement, not a solution

As a user
I need a good routing structure
so that I can navigate in the app smoothly

Description (Text, Scribble, Wireframe, Design)

Acceptance criteria

  • All pages have specific routes

Tasks

  • Feature branch
  • Implement React Router

Complexity

low

Observations form

Value statement - a requirement, not a solution

As a user
I need add my own observations
so that I can keep track of my actual vital signs

Description (Text, Scribble, Wireframe, Design)

Observations – user story form

Acceptance criteria

  • Header shows selected date
  • User can select from a (predefined) dropdown menu which observation he wants to track
  • There is a menu item for notes (Notizen)
  • Time is prefilled with current time but can be changed by the user

Tasks

  • Feature branch
  • Create drop down component w/ storybook and tests
  • Create form page for observations w/storybook and tests

Complexity

(low, medium, high)

Medication card form

Value statement - a requirement, not a solution

As a user
I need to create a medication card
so that I can add my personal medication

Description (Text, Scribble, Wireframe, Design)

med-form-1
med-form-2
med-form-3

Acceptance criteria

  • Save data to local storage
  • when there is no content for the main page, this is the first screen
  • "zurück" button brings you back to main page and empties the form
  • "erstellen" button is disabled until there is content for the main page
  • "Hinzufügen" (start page) is fixed at the top of the screen (and not pushed down by cards)
  • The url does not change

Tasks

  • Feature branch
  • Component for "Zurück" ???
  • Form component w/ storybook and test
  • Button component w/ storybook and test
  • Update App with components and logic
  • Add localStorage

Complexity

medium

Edit medication card

Value statement - a requirement, not a solution

As a user
I need to edit my medication
so that I can always see my current medication

Description (Text, Scribble, Wireframe, Design)

edit-med-card-1
edit-med-card-2
edit-med-card-3

Acceptance criteria

  • After click on "Bearbeiten" (edit) "Hinzufügen" (add) is hidden, "Abbrechen" (cancel) is visible and the user can choose a card which he wants to edit
  • After click on "Abbbrechen" (cancel) the normal main page is shown
  • After clicking the card that the user wants to edit the form will be shown
  • The form is prefilled with the text from the card the user wants to edit
  • After clicking the "löschen" (delete) button the form will be cleared out, the placeholder text will be shown and the focus is on the time text field
  • After click on"zurück" (back) the main page is shown (with "Hinzufügen" and "Bearbeiten") and the card is not edited
  • After click on "speichern" (save) the main page is shown and the card is updated (on the screen and in local storage)

Tasks

  • Feature branch
  • Update App with components and logic
  • Update tests

Complexity

medium

Calendar

Value statement - a requirement, not a solution

As a user
I need be able to see switch days in a calendar
so that I can see my medication on specific days

Description (Text, Scribble, Wireframe, Design)

history

Acceptance criteria

  • The user can switch days in a calendar
  • Plans in the past can be edited
  • Selected date is shown in header

Tasks

  • Feature branch
  • Calendar component (from dependency)
  • Set up new data format
  • Update App with components and logic

Complexity

high

List of observations

Value statement - a requirement, not a solution

As a user
I need to see what my vital signs are / have been
so that I can keep track of them and show them to my doctor

Description (Text, Scribble, Wireframe, Design)

Observations – user story

Acceptance criteria

  • A set of vital signs is rendered
  • The obbservations are sorted alphabetically (Notizen (notes) are always first)
  • The user can switch pages in a navigation bar

Tasks

  • Feature branch
  • Example array
  • Observation component w/ storybook and tests
  • Navigation component w/ storybook and tests
  • Add components to App with logic

Complexity

low

Medication list

Value statement - a requirement, not a solution

As a user
I need to see my medication list
so that I can take the right medicine

Description (Text, Scribble, Wireframe, Design)

med-list

Acceptance criteria

  • A set of cards is rendered (a hard coded array is the basis)
  • Cards are sorted time ascending
  • The header shows the system date

Tasks

  • Feature branch
  • Example array
  • Card component w/ storybook and test
  • Header component w/ storybook and test
  • Add components to App with logic

Complexity

low

history

Value statement - a requirement, not a solution

As a user
I need to get my medications automated
so that I don't need to type in my medication every day

Description (Text, Scribble, Wireframe, Design)

When the user opens the app on a new day, the medications for the day will be prefilled (the same like it was the day before). This happens also for the days in between, when the user doesn't open the app for several days.

Acceptance criteria

  • First entry on the day the app was first used by the user
  • Every day there will be a new medication plan (generated from the plan of the day before)
  • On days where the app is not used there is a medication plan (all cards are marked as not done)
  • The last saved version of the plan will be saved for the day

Tasks

  • Feature branch
  • Create functionality to set medications automatically

Complexity

high

Mark medication as done

Value statement - a requirement, not a solution

As a user
I need to mark my medication as done
so that I can see which medicine I have to take

Description (Text, Scribble, Wireframe, Design)

mark-as-done-1

mark-as-done-2

Medication List

Acceptance criteria

  • After clicking the check button it will turn green
  • The status of the check will be stored in the data
  • All check buttons are reset when the list of medications in copied into another day

Tasks

  • Feature branch
  • Create done component w/ storybook and tests
  • Update App with components and logic

Complexity

low

Design

Value statement - a requirement, not a solution

As a user
I need an appealing design
so that I like using the app

Description (Text, Scribble, Wireframe, Design)

Medication List – only meds
Medication List – only meds - edit
Medication List – only meds - form

Acceptance criteria

  • Keep all functions
  • Apply design

Tasks

  • Feature branch
  • Add design to all components

Complexity

high

Edit observation

Value statement - a requirement, not a solution

As a user
I need to edit my observation
so that I can correct myself if I saved something wrong

Description (Text, Scribble, Wireframe, Design)

same design like in the medication group

Acceptance criteria

  • After click on the edit icon the icon changes to back icon is visible and every observation has an icon for edit and delete
  • After click on the back icon the edit mode is closed
  • After click on the delete icon the observation is deleted
  • After click on the edit icon the matching form will be shown
  • The form is prefilled with the time and value from the observation the user wants to edit
  • After click on"zurück" (back) (in the form) the observations page is shown and the observation is not edited
  • After click on "speichern" (save) the observations page is shown and the card is updated (on the screen and in local storage)

Tasks

  • Feature branch
  • Update App with components and logic
  • Update tests

Complexity

medium

Contacts

Value statement - a requirement, not a solution

As a user
I need to have my important contacts quickly at hand
so that I can contact my doctors in an emergency case

Description (Text, Scribble, Wireframe, Design)

Acceptance criteria

  • List of important contacts

Tasks

  • Feature branch
  • Update Navigation
  • Create Contact page

Complexity

low

Copy day

Value statement - a requirement, not a solution

As a user
I need to copy the medication list of a whole day
so that don't have to type in the medications each day

Description (Text, Scribble, Wireframe, Design)

Copy day
Copy day – 1

Acceptance criteria

  • After clicking the edit icon there is the option to copy the day (Tag kopieren)
  • In a calendar the user can select the day he wants to copy the medication list for the whole day
  • After clicking "kopieren" all medications are saved in the medicationsDiary, if there was already a medication for that day it will be overwritten

Tasks

  • Feature branch
  • Update App with components and logic
  • Update storybook and tests

Complexity

low

Delete medication card

Value statement - a requirement, not a solution

As a user
I need to delete a medication card
so that I don't see medication I don't need anymore

Description (Text, Scribble, Wireframe, Design)

delete-med-card

Acceptance criteria

  • By hitting the '-' button the card will be deleted (on the screen and local storage)
  • After deleting the last card the form is the active screen

Tasks

  • Feature branch
  • '-' button component w/ storybook and tests
  • Update App with components and logic

Complexity

low

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.