/HealthPortal

Monitor how your patients are doing.

Primary LanguageJavaScriptMIT LicenseMIT

HealthPortal

App Description

This repo is created for the code challenge by Baleen.io.

HealthPortal

The app is built with React.js and Redux for the front-end and Node.js for the back-end.

The back-end can interface with a remote PostgresSQL database on AWS.

More development info can be viewed on Built With Section.

The example CSV file is also uploaded for the purpose of displaying data and testing the app.

The app provides users with a landing page to log in. As in the task requirement, a fake login component presents on a landing page.

A doctor gives his/her ID and hits 'send', which will trigger the fake login. If the ID exists in our database, his/her patient data will be returned and the app will go to his/her profile page (/dashboard/:doctor_id).

The profile page is in dashboard style with all of a doctor's patient data presented as charts. The last 10 data in the database is fetched for each patient.

Each chart area consists of a title with patient name and ID, charts title, and the chart itself.

Each chart has its legend on the top of the chart, X, Y axes, and the data presented as sparklines.

Each chart area is draggable and zoomable. For convenience, I set the width of each chart area to the full width of the page. But generally, it's configurable.

Two data show up in the chart, temperature and heart rate in red and black.

Each data point is interactive. When a user hovers one of it, a tooltip will show up with more details of it.

When a user clicks on the chart area, more data of this patient will be fetched, and the app will go to the patient page (/dashboard/:doctor_id/:patient_id).

On the patient page, the user can see the name and ID of the patient he/she just selected. And below that, it's a chart with all of the data of this particular patient.

The chart is roughly the same with charts in the dashboard with a few differences.

First, all data of the patient is on the chart.

Second, with the control of the checkbox, the user can view the average of the data as dotted mark lines.

As in the task requirement, an admin app is created as well (at /admin). No authentication is created, and currently, we can access it by typing the URL.

When an admin at the admin page, a list of available databases will be listed in the left navigation menu. By default, no database is selected.

When the admin clicks any of the databases, first 25 rows of data will be returned and displayed in a table on the right. Currently, showing more data is not implemented and admin can only see a database at a time.

The data table is sortable and filterable. The small area under each column is the sort button for each column. Admin can sort the data in the descendent or ascendant manner by number or by word.

The input box for each column is the filter input box. It will automatically filter in real time as admin types.

Currently, admin can only read the database data. CREATE, UPDATE AND DELETE are implemented as API endpoints but functionalities are not available in the front-end. More todos can be found in the Todos Section.

Getting Started

  • Get the project from Github

    git clone https://github.com/lianliu/HealthRecord.git HealthPortal

  • Install the dependencies

    cd HealthPortal && npm install

  • Run the front-end from one terminal

    npm start

  • Run the back-end

    cd server && node index

    if you use nodemon

    cd server && nodemon index

  • open your browser and go to localhost:8080

Deployment

Currently, deployment is not provided. More information can be viewed in Todo Section.

Built With

Todos

  • Admin CREATE, UPDATE, DELETE functionality APIs

  • Admin able to CREATE, UPDATE, DELETE

  • UI Abstraction

  • Better back-end routes design

  • Page loading animation

  • Performance

  • Page Design

Authors

Acknowledgments

  • Hat tip to anyone who's code was used