A web app to help you see how different habits, behaviors and external factors affect you.
JavaScript CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
UX Design
app
backend
config
dist
test_data
views
.bowerrc
.gitignore
.jshintrc
Gruntfile.js
Procfile
README.md
bower.json
package.json
server.js

README.md

A web app to help you see how different habits, behaviors and external factors affect you.

Development

Backend Front-end Testing Development tools
Mongodb Angular Mocha Grunt
Mongoose jQuery Chai Browserify
Node.js D3 (data visualization) Karma & karma-browserify Bower & debowerify
Express Sass, Bourbon Protractor

Tasks, bugs, to-dos

  • Asana for tasks that don't involve the codebase (research, etc).
  • Github issue tracker for tasks that do involve the codebase.
  • Assign yourself to anything that you're currently working on.

Project structure

Based on meanjs.org folder structure and angular docs, with some adaptations (folder naming conventions, project size).

Notes/explanation:

  • Angular and meanjs.org both recommend completely modularizing pieces of your app
    • Each module can potentially have it's own styling, images, etc. as well as angular components
    • The 'core' module holds things that apply to everything (base styles, etc)
    • They put a tests folder inside each module, which I actually kind of like (rather than having a test directory in root with a bunch of subdirectories). It should be easy to set up test runners using a pattern, and makes it obvious how much testing you have set up for each module.
  • Meanjs has a very complicated configuration setup that seems like overkill for our scope, and also automates angular module loading, which I think would be useful if you already know angular, but might be more confusing for us. So I left that out, but I liked a couple things from it:
    • If needed, having a config.js file where we define paths in our folder that we can reuse in other files (karma conf, gruntfile, maybe others)
    • Putting config files in a folder rather than root, where possible
  • I'm not 100% sure on the best place to handle client-side routes, but it looks from angular docs like that goes in the main module file.
  • Changed: I originally had folders for each component (controllers, directives, etc) within each module, but when I started working on the sleep module that seemed like overkill, so I've changed it: a folder for each component that will typically hold more than one file (tests, templates). Other components can be in a file.
├── app                               client-side code
│   ├── application.js                define and configure the angular application
│   ├── modules                       angular modules
│   │   ├── core                      core module for app-wide code
│   │   │   ├── core-controllers.js   angular controllers
│   │   │   ├── core-directives.js    angular directives
│   │   │   ├── core-services.js      angular services
│   │   │   ├── templates             angular templates (html with angular attributes/elements)
│   │   │   ├── img                   images
│   │   │   ├── styles                Sass and the bourbon mixin library for Sass
│   │   │   ├── tests                 tests for this module
│   │   │   └── core-module.js        defines and configures the model, including routes
│   │   └── users                     just as an example, we might have another module for handling users
│   │       ├── user-controllers.js
│   │       ├── user-services.js
│   │       ├── templates
│   │       ├── tests
│   │       └── user-module.js
│   │
│   └── bower_components               client-side external packages
│       ├── angular
│       ├── angular-route              gives us $routeProvider service
│       ├── angular-resource           gives us $resourceProvider service
│       └── d3                         if we end up using it
│
├── backend                            server-side code
│   ├── models                         mongoose schemas & models
│   ├── api                            REST api code for communication with front-end
│   ├── templates                      html pages served by express
│   │   ├── 404.html                   custom not found page
│   │   └── 500.html                   custom server error page
│   ├── tests                          tests for server-side code
│   └── router.js                      express router
│
├── views                              server-side handlebars templates. would ideally be inside backend
│
├── config                             application configuration (anything that doesn't need to be in root folder)
│   ├── config.js                      if we have any config we'd use outside of gruntfile (file globs etc)
│   └── karma.conf.js                  karma configuration (we can set up gruntfile so karma know to find conf file here)
│
├── dist                               processed, minified client-side code
│
├── db                                 local mongo database (.gitignored)
│
├── node_modules                       non-client-side deps (mostly dev deps)
│
├── bower.json                         define bower package dependencies
├── .bowerrc                           tell bower to install at app/bower_components
├── .gitignore                         don't version control db, node_modules, bower_components
├── Gruntfile.js
├── .jshintrc                          agreed upon linting rules for project
├── package.json                       npm dependencies
├── Procfile                           if we use heroku, tells it how to launch app
├── README.md
└── server.js                          create node/express server, connect to db