{metric}

A post-mortem -- Metric: Building a quantitative self app in Meteor and React

Status: "core functionality complete", working towards Alpha - Progress through Tumblr screenshots

What is {metric} (or more correctly, what am I building it to become):

• An app I'm using to keep track of different metrics for self-improvement in a relational manner (Health tracking is dependent on metrics relating to my Diabetes, exercise, eating habits, Happiness is related to my self-actualization, social belonging, etc.)
• A modern take on what spreadsheets are supposed to do - take data and compute things. We use Web tech, JavaScript and libraries instead of MACROS and plugins. We use objects categorised and stored in databases rather than tables (2D arrays) to represent data.
• An experiment, and my new life's work.

Key points:

• unlike Excel, we don't do tables
• we do smart dashboards!
• we do metrics and records
• metrics are dynamically computed functions written in JavaScript, a record is just a JSON object
• it's all built with web tech, it's real-time using Meteor and React
• as a result of its client-server architecture, it can be hosted and accessed from multiple clients, and the metric computation thread is separated from the UI
• unlike Excel, we also can handle and do natural arithmetic on dates and hours/mins/seconds

Install

1. Install Meteor
2. Clone the project
3. Run meteor and open localhost:8000

Later when functional I'll bundle it up as an single-file app.

License

Copyright Liam Edwards-Playne 2015. Licensed under Creative Commons Attribution-Sharealike 4.0 International License and GPL v3.

Development practices

I admit this project does not adhere to several development practices -- the reason for this is that I am trying to develop it as quickly as possible and since I don't envision anyone else maintaining this, there's no point going the extra 20% until later. Nonetheless, I've commented all areas where things could definitely be improved.

Ideas

While developing any project, I always have too many ideas and never end up building it. So in the spirit of MVP, here's a dream list of features:

• hotkey nav for menu
• markdown rendering for text inputs in records, and a basic editor too
• data visualisation using d3/graph.js
• editable HTML React-based view for metrics
• install NPM packages
• natural language search interface
• reactive visualisation of metric inputs à la LightTable
• SQL query interface for record overview
• integration/stealing design from Jupyter, Personal API hacks
• metrics retrieving data from external services (Fitbit)
• import/export data to CSV based on the category schema
• replacing the text-based code-editor with a visual frontend, using sliders, controls, live visual update of react component view

Thanks

This uses these projects:

• Meteor
• React.js, React-Router
• Semantic UI
• classNames by @JedWatson
• javascript-editor by @maxogden, and subsequently Esprima and CodeMirror
• sugar.js - date parsing and such
• ReactGridLayout by @STRML - dashboard <3