Skip to content
A MERN stack application that allows you to log and keep track of your health information all in one place so that you can easily share and discuss that information with your doctor at your next visit.
JavaScript HTML CSS
Branch: master
Clone or download
Latest commit 9f085e6 Aug 12, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
authtests
client cleaning up errors Aug 13, 2018
controllers
models
project_planning
readme_images
routes
scripts single attachment seed May 5, 2018
temp
.eslintrc.js
.gitignore cleaned up compile errors May 4, 2018
Procfile
README.md
nodemon.json
package.json
server.js
yarn.lock

README.md

HealthTracker

HealthTracker is a MERN stack application that allows you to log and keep track of your health information so that you can easily share and discuss that information with your doctor at your next visit.

Table of contents

Live

http://myhealthtracker.herokuapp.com/

Presentation

The app was presented at the University of Minnesota Coding Bootcamp Demo Day on May 10, 2018.

The slides from that presentation are available here.

Contributors

The HealthTracker app was created by a team of 4 developers at the University of Minnesota.

Sara Bracewell

Defined database architecture/models and developed data visualization charts to track height and weight measurements over time.


Kayla Kotewall

Developed feature that allows attachments (for example, lab reports) to be uploaded to Amazon S3 and helped implement user authentication using Passport.js.


Jerridd Speidel

Developed user authentication using Passport.js, which ensures that a user is always authenticated when using the app and the user’s health information is protected.


Phil Stubbs

Designed UX flow, developed UI using React, and helped managed project using GitHub task board/agile methodology.

Screenshots

Login page

Sign up page

Home page

My health log

My symptom journal

Appointments

Prescriptions

Doctors list

Clinics list

Charts

404 Not found page

About this project

Many people visit the doctor office on a regular basis (sometimes multiple times per week) and have no way of accurately and efficiently keeping track of their health information, such as upcoming appointments, prescriptions, symptoms they experience away from the doctor office, notes from their doctors, and height and weight measurements.

Managing all that information can be quite the challenge because it is often written on paper and scattered across multiple documents and files. Also, information often comes from multiple doctors and clinics. Plus, there is no one, central location to store the information. For example, appointments might be scheduled on a paper calendar, but the notes from that appointment are located in a separate notebook. You might experience a symptom away from the doctor office, but you don't write it down and forget to tell your doctor at your next visit. As you can see, there are many problems with the current methods for managing one's health. Keeping track of this information is a time-consuming, manual process. As a result, this information can easily be lost, misplaced, or forgotten over time.

So, it is safe to say that managing our health information is difficult. It gets even more complex and challenging when trying to manage that inforation for someone else (for example, a child or grandparent).

This is where HealthTracker comes in. HealthTracker is a web application that allows you to log and keep track of health information so that you can easily share and discuss that information with your doctor(s) during your next visit. It is one app that you can use to create and maintain a health journal for yourself or for another person. No more having to carry around bulky notebooks, papers, and files to each and every doctor visit. Instead, all you need to do is bring your tablet to the doctor office, open up the app, and all the relevant information is there for the doctor to see.

How the app is built

On the front end side, this project is built using React, which is an open-source Javascript library developed at Facebook specifically for the task of developing user interfaces. React relies on a component-based architecture where elements of the user interface are broken into small chunks of code called components. Material UI is a css framework that helps with building these components. Material UI is a React component library that implements Google’s material design.

On the back end side, this project uses MongoDB, Node, Express, Mongoose ORM (Object Relational Mapper), Passport, and various third party packages. Node, MongoDB, and Mongoose are used to query and route data in the app. Express is the backend web framework used for this app. Passport is authentication middleware for Node.js (that is, the technology used to log users into the app).

App workflow

Authentication

When you first visit the app, you will be prompted to log in (if you have already created an account) or sign up (if you are a new user). To sign up, you will need to provide an email address as well as create a username and password. Authentication is required because it ensures that a user's health information is protected and blocked from other users.

Home

After you authenticate, you are taken to the Home/Landing page. From this page, you can navigate to all the different pages with the app to keep track of your health information.

My health log

The My health log page is where you can manually record doctor appointment information, including doctor being seen, date of visit, reason for visit, weight, height, and visit notes. You can track your height and weight measurements over time from the Charts page.

My symptom journal

The My symptom journal page is a log of symptoms that you can share with your doctor at your next doctor visit. You can record symptoms you experience away from the doctor office, the time when the symptom occurred, and add comments to each entry. You have a list of symptoms to choose from (for example, Dizzy, Shortness of Breath, Fainted, Swelling, Heart Fluttering, Fatigue, Other). You have a text field where you can enter more information about a symptom and list any useful information that will help you remember details of the symptom when you see your doctor at your next visit.

Appointments

The Appointments page lists your upcoming appoinments and related information in table format. You can add and remove appointments from this page.

Prescriptions

The Prescriptions page is where you can enter information about medications prescribed by your doctor, including prescription name, name of doctor who prescribed the medication, date prescribed, number of tablets, and directions for use.

Doctors and clinics

The Doctors and clinics page has contact information for each of your doctors, such as doctor name, email address, and office location. You can also add contact information for each clinic. After you add your doctors and clinics, you can associate these doctors and clinics with other information, such as appointments, in the app.

Charts

The Charts page includes two line graphs. The top graph displays your weight data over time. This data is pulled from the weight measurements you entered on the My health log page. The second graph is similar. It displays your height data over time.

Structure of the project

After you clone the repository, navigate to the project root directory (MedLog). The project directory structure is set up as follows:

  • client
    • public: The public folder contains the index.html file. This HTML file is a template. The file is empty. So, if you open it directly in a browser, you will get an empty page. Rather than placing the HTML code directly in index.html, this app uses a React component-based architecture to create, build, and render UI components to the page.
    • src: The src folder is where the React app components reside.
      • assets: Contains the images/icons used in the app.
      • index.js: The index.js file is the top level file of the React app. In index.js, the App.js file is imported, and the ReactDOM.render method is used to render App.js to the page.
      • App.js: The App.js file is where the app components are imported and rendered, such as the navigation bar, footer, and various pages.
      • Components: The Components folder is where the app components that are reused across the app are located. Each file represents a separate component. For example, AppBar.js is the top navigation bar component.
      • containers: Holds all the pages of the app and the child components within those pages. For example, inside of the containers folder, there is an Appointments folder. The Appointments folder contains a top-level parent container/page called Appointments.js that has two child containers (AppointmentsForm.js and AppointmentsList.js).
      • utils: Contains all the axios requests used to get health information from the database.
      • App.css and index.css: The external css stylesheets for the app.
    • package.json: Lists the project dependencies and their version numbers.
    • yarn.lock: Dependency tree for the project. Lists all the client dependencies and their versions.
  • Controllers: The controllers are the routes that are used to pass information to and from the view and model objects.
  • models: The models define the database schema or structure of the database.
  • routes: These files are the key to how the back end and front end can communicate with each other. They give the server a map of how to respond when users visit or request data from various URLs.
  • scripts
    • build.js: Run yarn build in the project root directory to create a production build of the app, which you can use to deploy the app to Heroku.
    • seedDB.js: Run yarn seed to populate your development database with information.
    • start-client: Script used to start the React development server.
  • .eslintrc.js: List of rules and their definitions for ESLint.
  • .gitignore: Anything listed inside this file (for example, node_modules) will not be tracked by GitHub or Heroku when code is committed.
  • package.json: Lists the project dependencies and their version numbers. It also contains various scripts to start the server, create a production build, seed the database, etc.
  • Procfile: This file tells Heroku to run the server file with node once it's built.
  • server.js: This file does the following:
    • Defines and requires the dependencies, including express, body-parser, and mongoose.
    • Sets up the Express server to handle data parsing using body-parser.
    • Points the server to the API routes, which gives the server a map of how to respond when users visit or request data from various URLs.
    • Defines the port the server is listening on.
    • Starts the server and React server.
    • Allows the app to serve static content.
    • Sets up Passport, which allows the user to authenticate/log in to the app.
    • Uses Mongoose (orm) to connect to MongoDB, which allows us to have access to the MongoDB commands to perform various operations on the database.
  • yarn.lock: Dependency tree for the project. Lists the project dependencies and their versions.

Getting started

The following section will take you through the steps of setting up this app and getting it running locally on your computer.

If you don't want to set up this project locally and just want to see the deployed application, go to https://myhealthtracker.herokuapp.com/.

To set up this application locally on your computer, perform the following steps:

  1. Clone the repository
  2. Install Node.js
  3. Install the project dependencies
  4. Install yarn
  5. Install MongoDB
  6. Start the daemon for MongoDB
  7. Start the MongoDB shell
  8. Install Robo 3T
  9. Seed MongoDB
  10. Start the Express server and React development server

1. Clone the repository

The first step is to clone the project repository to a local directory on your computer. To clone the repository, run the following commands:

git clone https://github.com/philipstubbs13/MedLog.git
cd ./MedLog

2. Install Node.js

If you don't already have Node.js installed on your computer, you can install the latest version here.

3. Install yarn

To be able to install the dependencies and start the application locally, you will need to install yarn. Yarn is a package manager like npm.

To install yarn, run the following command:

npm install -g yarn

For more information about yarn and other installation options, see the yarn documentation: https://yarnpkg.com/en/.

4. Install the project dependencies.

The following packages are dependencies to the project.

Version information for each of these packages is available in the package.json file in the project root directory and in the client directory.

After you clone the repository to a local directory, change directory to the project root directory and run the following command to install the required packages:

yarn install

Change directory to the MedLog/client directory and run the following command to install the client dependencies.

yarn install

5. Install MongoDB

For installation instructions, see Installing MongoDB.

6. Start the daemon for MongoDB

Open another terminal window and run the following command to start the daemon process for MongoDB, which handles data requests, manages data access, and performs background management operations.

mongod

Note: You want to keep the mongod process running in the background during development.

7. Start the MongoDB shell

In a separate terminal window, run the following command to start up the MongoDB shell.

mongo

8. Install Robo 3T

If you don't already have Robo 3T installed on your computer, you can install the latest version here.

For this project, Robo 3T is similar to MySQL Workbench (if you are used to working with MySQL databases). Robo 3T is not required. But, similar to MySQL Workbench, it is a graphical user interface that is used to visually see the database and database collections (as opposed to using the command line interface for MongoDB).

9. Seed the database.

Run the following command from the project root directory (MedLog) to populate your local development database with dummy data.

yarn seed

10. Start the Express server and React development server.

After performing all of the setup steps in the Getting started section, navigate to the project root directory (MedLog) and run the following command to start the Express server and React development server.

yarn start

After the development server has started, a Chrome browser window should open, and you should see the login screen for the application. If the browser does not automatically open after the server starts, you can verify that the application is working locally on your computer by opening Chrome and going to http://localhost:3000.

Deploying the app

This app is deployed to Heroku. To deploy the app, you will need to build a production version of the app as well as have Heroku CLI installed.

  1. Download and install the Heroku CLI. You can install the Heroku CLI here.

  2. If you haven't already, log in to your Heroku account and follow the prompts to create a new SSH public key.

heroku login
  1. Change directory to the project root directory (MedLog).

  2. If you have deployed the app before, delete the MedLog/client/build folder.

  3. Run the following command to build a production version of the app.

yarn build

This command creates a folder called build inside of the client folder.

  1. Deploy your changes
git add .
git commit -am "make it better"
git push heroku master

If you run into any issues with deploying the app to Heroku, run the following command in the project root directory to see the Heroku logs.

heroku logs

There are also a lot of other resources, such as Stackoverflow and blog posts, that provide some useful information on deploying to Heroku. Here are just a few:

Technologies used to create app

Back end technologies

Front end technologies

Direction for future development

Source code will be developed over time to handle bug fixes and new features.

The following is a list of potential enhancements for future code development.

  • Physical activity - Add page that allows users to track physical health information, such as heart rate, number of steps, distance, calories burned, etc.

  • Allergy information - Add page that allows users to keep a list of medicine and food allergies.

  • Insurance - Add page that has information about a user's insurance company, including company name, policy holder name, policy number, insurance company contact information, and comments.

  • Health goals - Add page where you can set health goals for yourself and keep track of your progress, making it easier to accomplish your goals.

  • Additional Charting Options - Ability to chart blood pressure, blood sugar, and other important information that will help you and your doctor better track your health.

Issues

If you find an issue while using the app or have a request, log the issue or request here. These issues will be addressed in a future code update.

You can’t perform that action at this time.