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.
- Live
- Presentation
- Contributors
- Screenshots
- About this project
- Getting started
- Deploying the application
- Technologies used to create app
- Direction for future development
- Issues
http://myhealthtracker.herokuapp.com/
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.
The HealthTracker app was created by a team of 4 developers at the University of Minnesota.
Defined database architecture/models and developed data visualization charts to track height and weight measurements over time.
Developed feature that allows attachments (for example, lab reports) to be uploaded to Amazon S3 and helped implement user authentication using Passport.js.
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.
Designed UX flow, developed UI using React, and helped managed project using GitHub task board/agile methodology.
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.
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).
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.
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.
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.
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.
The Appointments page lists your upcoming appoinments and related information in table format. You can add and remove appointments from this page.
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.
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.
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.
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.
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:
- Clone the repository
- Install Node.js
- Install the project dependencies
- Install yarn
- Install MongoDB
- Start the daemon for MongoDB
- Start the MongoDB shell
- Install Robo 3T
- Seed MongoDB
- Start the Express server and React development server
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
If you don't already have Node.js installed on your computer, you can install the latest version here.
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/.
The following packages are dependencies to the project.
- express - a Node.js web application framework (https://www.npmjs.com/package/express).
- body-parser - a package used to parse incoming request bodies in a middleware. (https://www.npmjs.com/package/body-parser)
- axios - a promise based HTTP client for the browser and node.js (https://www.npmjs.com/package/axios)
- mongoose - an ORM that allows you to connect to your MongoDB database and allows you to have access to the MongoDB commands to perform create, read, update, and delete operations on the database (https://www.npmjs.com/package/mongoose).
- morgan - an HTML request logger middleware for Node.js that is used to log requests to your application (https://www.npmjs.com/package/morgan).
- connect-mongo - MongoDB session store used for user authentication ()
- express-session - Express and Mongoose session storage for user authentication ()
- fusioncharts: package that includes simple and complex charts (https://www.npmjs.com/package/fusioncharts).
- chartist: package for creating customizable, responsive charts (https://gionkunz.github.io/chartist-js/)
- react-chartist: package for creating React chart components (https://www.npmjs.com/package/react-chartist)
- material-ui - a React component library that implements Google's material design (https://material-ui-next.com)
- moment - package used for formatting dates (https://www.npmjs.com/package/moment)
- passport - package used for authenticating requests (https://www.npmjs.com/package/passport)
- passport-local - package that allows you to authenticate using a username and password in a Node.js application (https://www.npmjs.com/package/passport-local)
- react - package for accessing React (https://www.npmjs.com/package/react)
- react-dom - serves as the entry point of the DOM-related rendering paths (https://www.npmjs.com/package/react-dom).
- react-fusioncharts - React component for FusionCharts (https://www.npmjs.com/package/react-fusioncharts)
- react-router - package that provides the core routing functionality (https://www.npmjs.com/package/react-router).
- react-router-dom - a third party routing library ()
- react-scripts: package that includes scripts and configuration used by Create React App (https://www.npmjs.com/package/react-scripts)
- rebass - library of UI components for React (https://www.npmjs.com/package/rebass)
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
For installation instructions, see Installing 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.
In a separate terminal window, run the following command to start up the MongoDB shell.
mongo
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).
Run the following command from the project root directory (MedLog) to populate your local development database with dummy data.
yarn seed
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.
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.
-
Download and install the Heroku CLI. You can install the Heroku CLI here.
-
If you haven't already, log in to your Heroku account and follow the prompts to create a new SSH public key.
heroku login
-
Change directory to the project root directory (MedLog).
-
If you have deployed the app before, delete the MedLog/client/build folder.
-
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.
- 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:
- https://coursework.vschool.io/deploying-mern-with-heroku/
- https://medium.com/@s1akr/deploying-a-mern-mongo-express-react-node-stack-web-app-on-to-heroku-d6a7745f88ba
- nodejs/node-v0.x-archive#6000
- Node.js (https://nodejs.org/en/)
- MongoDB (https://www.mongodb.com/)
- Express (http://expressjs.com/)
- Mongoose ORM (http://mongoosejs.com/)
- Javascript
- AWS S3 Buckets (https://aws.amazon.com/s3/)
- HTML
- CSS
- Javascript
- React (https://reactjs.org/)
- Material UI Next (https://material-ui-next.com/)
- FusionCharts (https://www.fusioncharts.com/)
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.
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.