A tool for learning intervals by ear. A SE 390 group project.

You need to have node installed.

Then, in Mac or Linux, run:

git clone [email protected]:jnetterf/intervals.git
cd ./intervals
npm install

To run the app and live-update on changes, run

npm start

Then, open up localhost:8080 in a browser. So far, it's only been tested in Chrome.

To lint and test the app, run

npm test

• src/index.tsx: defines routes and launches application
• src/views/...: individual route components and components the routes use go here
• src/data/actions.ts: defines the app state and defines all actions that can be done in the app, but does not perform the actions. See the Redux tutorial below.
• src/data/reducers.ts: defined functions for performing actions. See the Redux tutorial below.
• src/satie: Sheet music rendering. A git subtree of https://github.com/jnetterf/satie
• src/dragon: MIDI/Audio A git subtree with tools for declarative Audio/MIDI output

Intervals uses a few tools. Links here are for documentation

• React for rendering to the DOM and to audio declaratively.
• TypeScript for ES 2015 and types. See the TypeScript link for an overview of types. Babel provides an excellent ES 2015 guide
• React router for URLs.
• Redux for actions
• React bootstrap for components.
• CSS modules

Please see the ES 2015 guide and TypeScript guides above for a more details.

• let and const are blocked-scoped versions of var. const only means a variable cannot be set. If it points to an object/array, the object/array can still be modified.
• return (arg) => arg + 4 is shorthand for return function(arg) { return arg + 4; }
• return (arg) => this.save(arg) is shorthand for let self = this; return function(arg) { return self.save(arg); }
• let {a} = foo; is shorthand for let a = foo.a.
• as is TypeScript's casting operator (so a as number is like (cast(number) a))
• The : after let or const is used to set a variable's type (e.g., let a: number = null;). It's not needed when the type can already be determined.

TypeScript provides multiple ways of importing:

• import React = require("react"); is used to import CommonJS (old-style) modules with typing.
• import {isEqual, find, findIndex} from "lodash"; is used to selectively import from CommonJS or ES 6 modules with typing.
• import Foo from "foo"; is used to import the default export (i.e., the export named "default") from an ES 6 module with typing.
• const thunkMiddleware = require("redux-thunk"); is used to import CommonJS (old-style) modules without typing.

Visual Studio Code and Atom both have TypeScript + JSX integration. In Atom, you need atom-typescript. In Code, to get full language support for TSX files, you need to install the latest TypeScript 1.6 version (npm install -g [email protected]) and configure VS Code to use it with the typescript.tsdk setting (see Code settings)