Breath.md

Breath

So you are taking on the adventure of creating your first real hackathon experiment, a blood pressure monitor. You have decided to use Meteor JS for you're contribution to the system, the web ui, great choice! I know you will do well. Here are some quick tips and thoughts in order to help bring your blood pressure down. Nothing in this tip list is rock solid, meaning you don't need to follow every bit down to the end. You can write your application how ever you want, just breath, think about what your objective is and let the code flow.

1. Creating the Application

Justing kidding, Marcus i know you know how to do this ;P, but if you did decide on using TMC's base, you can find it on The Meteor Chef

2. Adding Dependencies

Based on the quick list of questions you have had thus far, i'd say a good list of dependencies for you're application are as follows:

UI

• meteor npm install react react-dom --save
• meteor npm install react-mounter --save
• meteor npm install react-komposer --save
• meteor npm install chart.js --save
• npm install react-chartjs2 --save
• meteor npm install material-ui --save

Routing

• meteor add kadira:flow-router
• meteor add nimble:restivus

So the first few dependencies up there are ones you should be use to with the react. But probably not ChartJS or Material-ui. So here are some links and examples of how you could use them together. ChartJS && React ChartJS && Material-ui

Code Examples

import React from 'react';
import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';
import RC2 from 'react-chartjs2';

const CardExampleWithAvatar = () => (
  <Card>
    <CardHeader
      title="Patient X"
      subtitle="Blood Pressure"
      avatar="http://www.material-ui.com/images/jsa-128.jpg"
    />
    <CardMedia
      overlay={<CardTitle title="Blood Pressure" subtitle="Current: 120/80" />}
    >
      <RC2 data={chartData} options={chartOptions} type='line' />;
    </CardMedia>
    <CardTitle title="Recommended Notes" />
    <CardText>
      Patients blood pressure seems to be in line with the normal average human. However, there seems the be a historical difference that may require additional monitoring. I would recommend a heart monitor for 1 week, due to the inconsistency of this Patients blood pressure
    </CardText>
    <CardActions>
      <FlatButton label="Request Heart Monitor" />
      <FlatButton label="Decline" />
    </CardActions>
  </Card>
);

export default CardExampleWithAvatar;

Most other example can be found in the docs of the dependancies listed above, don't hesitate to ask if you need more tho.

Deployment

For deployment you should follow the Meteor Buildpack Black Horse it is a buildpack for Heroku that many people use.