refactor app using babel module-resolver

99 files changed, 335 insertions, 301 deletions

diff --git a/animism-align/frontend/actions.js b/animism-align/frontend/app/actions.js
index 8daf83e..8fa780e 100644
--- a/animism-align/frontend/actions.js
+++ b/animism-align/frontend/app/actions.js
@@ -1,12 +1,12 @@
 import { bindActionCreators } from 'redux'
-// import { actions as crudActions } from './api'
-import { crud_actions } from './api/crud.actions'
+// import { actions as crudActions } from 'app/api'
+import { crud_actions } from 'app/api/crud.actions'
 
-import * as audioActions from './views/audio/audio.actions'
-import * as alignActions from './views/align/align.actions'
-import * as siteActions from './views/site/site.actions'
+import * as audioActions from 'app/views/audio/audio.actions'
+import * as alignActions from 'app/views/align/align.actions'
+import * as siteActions from 'app/views/site/site.actions'
 
-import { store } from './store'
+import { store } from 'app/store'
 
 const crudActions = [
   'paragraph',
diff --git a/animism-align/frontend/api/crud.actions.js b/animism-align/frontend/app/api/crud.actions.js
index 25027a5..86c2948 100644
--- a/animism-align/frontend/api/crud.actions.js
+++ b/animism-align/frontend/app/api/crud.actions.js
@@ -1,7 +1,7 @@
-import { crud_fetch } from './crud.fetch'
-import { as_type } from './crud.types'
-import { upload_action } from './crud.upload'
-import { store } from '../store'
+import { crud_fetch } from 'app/api/crud.fetch'
+import { as_type } from 'app/api/crud.types'
+import { upload_action } from 'app/api/crud.upload'
+import { store } from 'app/store'
 
 export function crud_actions(type) {
   const fetch_type = crud_fetch(type)
diff --git a/animism-align/frontend/api/crud.fetch.js b/animism-align/frontend/app/api/crud.fetch.js
index c88225e..c88225e 100644
--- a/animism-align/frontend/api/crud.fetch.js
+++ b/animism-align/frontend/app/api/crud.fetch.js
diff --git a/animism-align/frontend/api/crud.reducer.js b/animism-align/frontend/app/api/crud.reducer.js
index d94f69d..3ee4974 100644
--- a/animism-align/frontend/api/crud.reducer.js
+++ b/animism-align/frontend/app/api/crud.reducer.js
@@ -1,6 +1,6 @@
-import * as types from '../types'
-import { getOrderedIds, getOrderedIdsFromLookup } from '../util'
-import { session } from '../session'
+import * as types from 'app/types'
+import { getOrderedIds, getOrderedIdsFromLookup } from 'app/utils'
+import { session } from 'app/session'
 
 export const crudState = (type, options) => ({
   index: {},
diff --git a/animism-align/frontend/api/crud.types.js b/animism-align/frontend/app/api/crud.types.js
index 7a64f5c..ac9b3f3 100644
--- a/animism-align/frontend/api/crud.types.js
+++ b/animism-align/frontend/app/api/crud.types.js
@@ -1,4 +1,3 @@
-
 export const as_type = (a, b) => [a, b].join('_').toUpperCase()
 
 export const with_type = (type, actions) =>
diff --git a/animism-align/frontend/api/crud.upload.js b/animism-align/frontend/app/api/crud.upload.js
index beec86c..b4d9d4e 100644
--- a/animism-align/frontend/api/crud.upload.js
+++ b/animism-align/frontend/app/api/crud.upload.js
@@ -1,4 +1,4 @@
-import { as_type } from './crud.types'
+import { as_type } from 'app/api/crud.types'
 
 export function crud_upload(type, data, dispatch) {
   return new Promise( (resolve, reject) => {
diff --git a/animism-align/frontend/api/index.js b/animism-align/frontend/app/api/index.js
index 05f6b8b..f4be118 100644
--- a/animism-align/frontend/api/index.js
+++ b/animism-align/frontend/app/api/index.js
@@ -1,5 +1,5 @@
-import { crud_actions } from './crud.actions'
-import * as util from '../util'
+// import { crud_actions } from 'api/crud.actions'
+// import * as utils from 'app/utils'
 
 /*
 for our crud events, create corresponding actions
@@ -14,4 +14,4 @@ so you can do ...
   folderActions.upload(12, form_data)
 */
 
-export { util }
+// export { utils }
diff --git a/animism-align/frontend/common/app.css b/animism-align/frontend/app/common/app.css
index 362b933..362b933 100644
--- a/animism-align/frontend/common/app.css
+++ b/animism-align/frontend/app/common/app.css
diff --git a/animism-align/frontend/common/copyToClipboardButton.component.js b/animism-align/frontend/app/common/copyToClipboardButton.component.js
index cfe7103..0defba5 100644
--- a/animism-align/frontend/common/copyToClipboardButton.component.js
+++ b/animism-align/frontend/app/common/copyToClipboardButton.component.js
@@ -1,5 +1,5 @@
-import React, { Component } from 'react';
-import { writeToClipboard } from '../util'
+import React, { Component } from 'react'
+import { writeToClipboard } from 'app/utils'
 
 export default class CopyToClipboardButton extends Component {
   state = {
diff --git a/animism-align/frontend/common/fonts.css b/animism-align/frontend/app/common/fonts.css
index c782885..c782885 100644
--- a/animism-align/frontend/common/fonts.css
+++ b/animism-align/frontend/app/common/fonts.css
diff --git a/animism-align/frontend/common/form.component.js b/animism-align/frontend/app/common/form.component.js
index c38a299..c727544 100644
--- a/animism-align/frontend/common/form.component.js
+++ b/animism-align/frontend/app/common/form.component.js
@@ -1,5 +1,5 @@
-import React, { Component } from 'react';
-import { courtesyS } from '../util'
+import React, { Component } from 'react'
+import { courtesyS } from 'app/utils'
 
 export const TextInput = props => (
   <label className={props.error ? 'error' : 'text'}>
diff --git a/animism-align/frontend/common/form.css b/animism-align/frontend/app/common/form.css
index bbee27e..bbee27e 100644
--- a/animism-align/frontend/common/form.css
+++ b/animism-align/frontend/app/common/form.css
diff --git a/animism-align/frontend/common/imageCrop.component.js b/animism-align/frontend/app/common/imageCrop.component.js
index 9cae850..f139dce 100644
--- a/animism-align/frontend/common/imageCrop.component.js
+++ b/animism-align/frontend/app/common/imageCrop.component.js
@@ -1,5 +1,5 @@
-import React, { Component } from 'react';
-import { cropImage } from '../util'
+import React, { Component } from 'react'
+import { cropImage } from 'app/utils'
 
 export default class ImageCrop extends Component {
   state = {
diff --git a/animism-align/frontend/app/common/index.js b/animism-align/frontend/app/common/index.js
new file mode 100644
index 0000000..1f0a61d
--- /dev/null
+++ b/animism-align/frontend/app/common/index.js
@@ -0,0 +1,31 @@
+// export { default as Header } from 'app/common/header.component'
+export {
+  MenuButton, SmallMenuButton, MenuRoute,
+} from 'app/common/menubutton.component'
+export {
+  Select, Checkbox, Radio, FileInput, FileInputField,
+  TextInput, NumberInput, TextArea, SubmitButton,
+  LabelDescription, ColorInput,
+} from 'app/common/form.component'
+export {
+  Loader, Swatch, Dot, Columns, Statistic, Detections, Progress
+} from 'app/common/miscellaneous.component'
+export { default as TableIndex } from 'app/common/tableIndex.component'
+export {
+  TableObject, TableArray, TableTuples,
+  TableRow, TableCell
+} from 'app/common/table.component'
+export { default as CopyToClipboardButton } from 'app/common/copyToClipboardButton.component'
+export { default as ImageCrop } from 'app/common/imageCrop.component'
+export { Modal } from 'app/common/modal.component'
+export { default as UploadImage } from 'app/common/uploadImage.component'
+export { default as Slider } from 'app/common/slider.component'
+
+import './fonts.css'
+import './app.css'
+import './form.css'
+import './loader.css'
+import './table.css'
+import './modal.css'
+import './miscellaneous.css'
+import './upload.css'
diff --git a/animism-align/frontend/common/loader.css b/animism-align/frontend/app/common/loader.css
index f047e8e..f047e8e 100644
--- a/animism-align/frontend/common/loader.css
+++ b/animism-align/frontend/app/common/loader.css
diff --git a/animism-align/frontend/common/menubutton.component.js b/animism-align/frontend/app/common/menubutton.component.js
index a4eea39..ce26d74 100644
--- a/animism-align/frontend/common/menubutton.component.js
+++ b/animism-align/frontend/app/common/menubutton.component.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import { Route, Link } from 'react-router-dom'
-import { history } from '../store'
+import { history } from 'app/store'
 
 const icons = {
   upload: {
diff --git a/animism-align/frontend/common/miscellaneous.component.js b/animism-align/frontend/app/common/miscellaneous.component.js
index 4eb23f1..8021c5d 100644
--- a/animism-align/frontend/common/miscellaneous.component.js
+++ b/animism-align/frontend/app/common/miscellaneous.component.js
@@ -1,6 +1,6 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
-import { clamp, percent } from '../util'
+import { clamp, percent } from 'app/utils'
 
 export const Loader = () => (
   <div>
diff --git a/animism-align/frontend/common/miscellaneous.css b/animism-align/frontend/app/common/miscellaneous.css
index 32c3e7b..32c3e7b 100644
--- a/animism-align/frontend/common/miscellaneous.css
+++ b/animism-align/frontend/app/common/miscellaneous.css
diff --git a/animism-align/frontend/common/modal.component.js b/animism-align/frontend/app/common/modal.component.js
index 75c479c..75c479c 100644
--- a/animism-align/frontend/common/modal.component.js
+++ b/animism-align/frontend/app/common/modal.component.js
diff --git a/animism-align/frontend/common/modal.css b/animism-align/frontend/app/common/modal.css
index 5e95a09..5e95a09 100644
--- a/animism-align/frontend/common/modal.css
+++ b/animism-align/frontend/app/common/modal.css
diff --git a/animism-align/frontend/common/slider.component.js b/animism-align/frontend/app/common/slider.component.js
index 7e42b4d..7e42b4d 100644
--- a/animism-align/frontend/common/slider.component.js
+++ b/animism-align/frontend/app/common/slider.component.js
diff --git a/animism-align/frontend/common/table.component.js b/animism-align/frontend/app/common/table.component.js
index 8a74a79..b26dcba 100644
--- a/animism-align/frontend/common/table.component.js
+++ b/animism-align/frontend/app/common/table.component.js
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { formatName } from '../util'
+import { formatName } from 'app/utils'
 
 const __HR__ = '__HR__'
 
diff --git a/animism-align/frontend/common/table.css b/animism-align/frontend/app/common/table.css
index 4752e21..4752e21 100644
--- a/animism-align/frontend/common/table.css
+++ b/animism-align/frontend/app/common/table.css
diff --git a/animism-align/frontend/common/tableIndex.component.js b/animism-align/frontend/app/common/tableIndex.component.js
index a34a9e9..c58fc35 100644
--- a/animism-align/frontend/common/tableIndex.component.js
+++ b/animism-align/frontend/app/common/tableIndex.component.js
@@ -2,8 +2,8 @@ import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 import { connect } from 'react-redux'
 
-import { formatDateTime } from '../util'
-import { Loader, Swatch, Dot } from '../common'
+import { formatDateTime } from 'app/utils'
+import { Loader, Swatch, Dot } from 'app/common'
 
 /*
   <TableIndex
diff --git a/animism-align/frontend/common/upload.css b/animism-align/frontend/app/common/upload.css
index 719f98c..719f98c 100644
--- a/animism-align/frontend/common/upload.css
+++ b/animism-align/frontend/app/common/upload.css
diff --git a/animism-align/frontend/common/upload.helpers.js b/animism-align/frontend/app/common/upload.helpers.js
index 60d5b82..60d5b82 100644
--- a/animism-align/frontend/common/upload.helpers.js
+++ b/animism-align/frontend/app/common/upload.helpers.js
diff --git a/animism-align/frontend/common/uploadImage.component.js b/animism-align/frontend/app/common/uploadImage.component.js
index f712d6c..8048c8b 100644
--- a/animism-align/frontend/common/uploadImage.component.js
+++ b/animism-align/frontend/app/common/uploadImage.component.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 
-import { renderThumbnail } from './upload.helpers'
+import { renderThumbnail } from 'app/common/upload.helpers'
 
 export default class UploadImageComponent extends Component {
   constructor(props) {
diff --git a/animism-align/frontend/views/align/constants.js b/animism-align/frontend/app/constants.js
index cf504d3..cf504d3 100644
--- a/animism-align/frontend/views/align/constants.js
+++ b/animism-align/frontend/app/constants.js
diff --git a/animism-align/frontend/app.js b/animism-align/frontend/app/router.js
index 6239fa6..bd87cbe 100644
--- a/animism-align/frontend/app.js
+++ b/animism-align/frontend/app/router.js
@@ -2,10 +2,10 @@ import React, { Component } from 'react'
 import { ConnectedRouter } from 'connected-react-router'
 import { Route } from 'react-router'
 
-import actions from './actions'
+import actions from 'app/actions'
 
-import Header from './views/nav/header.component'
-import * as views from './views'
+import Header from 'app/views/nav/header.component'
+import * as views from 'app/views'
 
 const viewList = Object.keys(views).map(name => {
   const view = views[name]
@@ -16,7 +16,7 @@ const viewList = Object.keys(views).map(name => {
   )
 })
 
-export default class App extends Component {
+export default class Router extends Component {
   componentDidMount() {
     actions.site.loadText()
     actions.site.loadPeaks()
diff --git a/animism-align/frontend/session.js b/animism-align/frontend/app/session.js
index aea0db4..ff40fb3 100644
--- a/animism-align/frontend/session.js
+++ b/animism-align/frontend/app/session.js
@@ -1,6 +1,6 @@
 import Storage from 'store2'
 
-export const session = Storage.namespace('vcat.search')
+export const session = Storage.namespace('animism.search')
 
 export const getDefault = (key, def) => {
   const val = session.get(key);
diff --git a/animism-align/frontend/store.js b/animism-align/frontend/app/store.js
index 5854eee..e779ce4 100644
--- a/animism-align/frontend/store.js
+++ b/animism-align/frontend/app/store.js
@@ -3,16 +3,15 @@ import { connectRouter, routerMiddleware } from 'connected-react-router'
 import { createBrowserHistory } from 'history'
 // import createDebounce from 'redux-debounced'
 import thunk from 'redux-thunk'
-// import { login } from './util'
+// import { login } from 'app/utils'
 
-import uploadReducer from './views/upload/upload.reducer'
-import alignReducer from './views/align/align.reducer'
-import audioReducer from './views/audio/audio.reducer'
-import paragraphReducer from './views/paragraph/paragraph.reducer'
-import annotationReducer from './views/annotation/annotation.reducer'
-import siteReducer from './views/site/site.reducer'
-import mediaReducer from './views/media/media.reducer'
-// import collectionReducer from './views/collection/collection.reducer'
+import uploadReducer from 'app/views/upload/upload.reducer'
+import alignReducer from 'app/views/align/align.reducer'
+import audioReducer from 'app/views/audio/audio.reducer'
+import paragraphReducer from 'app/views/paragraph/paragraph.reducer'
+import annotationReducer from 'app/views/annotation/annotation.reducer'
+import siteReducer from 'app/views/site/site.reducer'
+import mediaReducer from 'app/views/media/media.reducer'
 
 const createRootReducer = history => (
   combineReducers({
diff --git a/animism-align/frontend/types.js b/animism-align/frontend/app/types.js
index b84df28..7fb368c 100644
--- a/animism-align/frontend/types.js
+++ b/animism-align/frontend/app/types.js
@@ -1,4 +1,4 @@
-import { with_type, crud_type } from './api/crud.types'
+import { with_type, crud_type } from 'app/api/crud.types'
 
 export const api = crud_type('api', [])
 
diff --git a/animism-align/frontend/util/index.js b/animism-align/frontend/app/utils/index.js
index 3567429..c2dd464 100644
--- a/animism-align/frontend/util/index.js
+++ b/animism-align/frontend/app/utils/index.js
@@ -1,4 +1,4 @@
-import { api as api_type } from '../types'
+import { api as api_type } from 'app/types'
 
 // import { format, formatDistance } from 'date-fns'
 import format from 'date-fns/format'
@@ -78,6 +78,8 @@ export const clamp = (n, a=0, b=1) => n < a ? a : n < b ? n : b
 export const dist = (x1, y1, x2, y2) => Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2))
 export const mod = (n, m) => n - (m * Math.floor(n / m))
 export const angle = (x1, y1, x2, y2) => Math.atan2(y2 - y1, x2 - x1)
+export const floatLT = (a,b) => ((a*10|0) < (b*10|0))
+export const floatLTE = (a,b) => ((a*10|0) === (b*10|0) || floatLT(a,b))
 
 /* URLs */
 
diff --git a/animism-align/frontend/views/align/align.actions.js b/animism-align/frontend/app/views/align/align.actions.js
index 2ace824..5176d81 100644
--- a/animism-align/frontend/views/align/align.actions.js
+++ b/animism-align/frontend/app/views/align/align.actions.js
@@ -1,13 +1,13 @@
-import * as types from '../../types'
-import { store, history, dispatch } from '../../store'
-import { api, post, pad, preloadImage } from '../../util'
-import actions from '../../actions'
-import { session } from '../../session'
+import * as types from 'app/types'
+import { store, history, dispatch } from 'app/store'
+import { api, post, pad, preloadImage } from 'app/utils'
+import actions from 'app/actions'
+// import { session } from 'app/session'
 import throttle from 'lodash.throttle'
 import debounce from 'lodash.debounce'
 
-import { ZOOM_STEPS } from './constants'
-import { getFirstPunctuationMarkIndex, cutFirstSentence } from './align.util'
+import { ZOOM_STEPS } from 'app/constants'
+import { getFirstPunctuationMarkIndex, cutFirstSentence } from 'app/views/align/align.util'
 
 export const setScrollPosition = start_ts => dispatch => (
   dispatch({ type: types.align.set_display_setting, key: 'start_ts', value: start_ts })
diff --git a/animism-align/frontend/views/align/align.container.js b/animism-align/frontend/app/views/align/align.container.js
index 94036e1..a659fdd 100644
--- a/animism-align/frontend/views/align/align.container.js
+++ b/animism-align/frontend/app/views/align/align.container.js
@@ -5,10 +5,9 @@ import { connect } from 'react-redux'
 
 import './align.css'
 
-import Timeline from './containers/timeline.container.js'
-import Script from './containers/script.container.js'
-import actions from '../../actions'
-import { Header } from '../../common'
+import Timeline from 'app/views/align/containers/timeline.container.js'
+import Script from 'app/views/align/containers/script.container.js'
+import actions from 'app/actions'
 
 class Container extends Component {
   componentDidMount() {
diff --git a/animism-align/frontend/views/align/align.css b/animism-align/frontend/app/views/align/align.css
index bbf3bc2..bbf3bc2 100644
--- a/animism-align/frontend/views/align/align.css
+++ b/animism-align/frontend/app/views/align/align.css
diff --git a/animism-align/frontend/views/align/align.reducer.js b/animism-align/frontend/app/views/align/align.reducer.js
index fc948e8..1f79180 100644
--- a/animism-align/frontend/views/align/align.reducer.js
+++ b/animism-align/frontend/app/views/align/align.reducer.js
@@ -1,5 +1,5 @@
-import * as types from '../../types'
-import { session, getDefault, getDefaultInt } from '../../session'
+import * as types from 'app/types'
+import { session, getDefault, getDefaultInt } from 'app/session'
 
 const initialState = {
   timeline: {
diff --git a/animism-align/frontend/views/align/align.util.js b/animism-align/frontend/app/views/align/align.util.js
index 37d4181..e873bbf 100644
--- a/animism-align/frontend/views/align/align.util.js
+++ b/animism-align/frontend/app/views/align/align.util.js
@@ -1,8 +1,8 @@
-import { ZOOM_STEPS } from './constants'
-import { clamp } from '../../util'
-import actions from '../../actions'
+import { ZOOM_STEPS } from 'app/constants'
+import { clamp } from 'app/utils'
+import actions from 'app/actions'
 
-import { HEADER_MARGIN, INNER_HEIGHT } from './constants'
+import { HEADER_MARGIN, INNER_HEIGHT } from 'app/constants'
 
 export const positionToTime = (y, { start_ts, zoom, duration }) => {
   y -= HEADER_MARGIN
diff --git a/animism-align/frontend/views/align/components/annotations/annotation.form.js b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
index 01b1663..7d66272 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.form.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
@@ -3,13 +3,12 @@ import React, { Component } from 'react'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
-import actions from '../../../../actions'
-// import * as alignActions from '../align.actions'
+import actions from 'app/actions'
 
-import { ZOOM_STEPS } from '../../constants'
-import { clamp, timestamp, capitalize } from '../../../../util'
-import { timeToPosition } from '../../align.util'
-import { Select } from '../../../../common'
+import { ZOOM_STEPS } from 'app/constants'
+import { clamp, timestamp, capitalize } from 'app/utils'
+import { timeToPosition } from 'app/views/align/align.util'
+import { Select } from 'app/common'
 
 import {
   AnnotationFormVideo,
diff --git a/animism-align/frontend/views/align/components/annotations/annotation.index.js b/animism-align/frontend/app/views/align/components/annotations/annotation.index.js
index 30dc7c0..aa31268 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.index.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotation.index.js
@@ -2,11 +2,11 @@ import React, { Component } from 'react'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
-import actions from '../../../../actions'
+import actions from 'app/actions'
 
-import { ZOOM_STEPS, INNER_HEIGHT } from '../../constants'
-import { clamp } from '../../../../util'
-import { positionToTime, timeToPosition } from '../../align.util'
+import { ZOOM_STEPS, INNER_HEIGHT } from 'app/constants'
+import { clamp } from 'app/utils'
+import { positionToTime, timeToPosition } from 'app/views/align/align.util'
 
 import { AnnotationElementLookup } from './annotationTypes'
 
diff --git a/animism-align/frontend/views/align/components/annotations/annotationForms/annotationForm.image.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
index e2df98b..8457b68 100644
--- a/animism-align/frontend/views/align/components/annotations/annotationForms/annotationForm.image.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.image.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 
-import { Select } from '../../../../../common'
+import { Select } from 'app/common'
 
 export const AnnotationFormImage = ({ annotation, media, handleSettingsSelect }) => {
   if (!media.lookup) return <div />
diff --git a/animism-align/frontend/views/align/components/annotations/annotationForms/annotationForm.video.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
index 9302ba4..1fb552b 100644
--- a/animism-align/frontend/views/align/components/annotations/annotationForms/annotationForm.video.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/annotationForm.video.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 
-import { Select } from '../../../../../common'
+import { Select } from 'app/common'
 
 export const AnnotationFormVideo = ({ annotation, media, handleSettingsSelect }) => {
   if (!media.lookup) return <div />
diff --git a/animism-align/frontend/views/align/components/annotations/annotationForms/index.js b/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
index 1411efc..1411efc 100644
--- a/animism-align/frontend/views/align/components/annotations/annotationForms/index.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationForms/index.js
diff --git a/animism-align/frontend/views/align/components/annotations/annotationTypes/annotationTypes.image.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.image.js
index c3e0c22..ec4d25e 100644
--- a/animism-align/frontend/views/align/components/annotations/annotationTypes/annotationTypes.image.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.image.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 
-import { thumbnailURL } from '../../../align.util'
+import { thumbnailURL } from 'app/views/align/align.util'
 
 import { checkAnnotationMediaNotReady, AnnotationMediaLoading } from './annotationTypes.util'
 
diff --git a/animism-align/frontend/views/align/components/annotations/annotationTypes/annotationTypes.text.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.text.js
index be4674f..be4674f 100644
--- a/animism-align/frontend/views/align/components/annotations/annotationTypes/annotationTypes.text.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.text.js
diff --git a/animism-align/frontend/views/align/components/annotations/annotationTypes/annotationTypes.util.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.util.js
index 17abebd..17abebd 100644
--- a/animism-align/frontend/views/align/components/annotations/annotationTypes/annotationTypes.util.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.util.js
diff --git a/animism-align/frontend/views/align/components/annotations/annotationTypes/annotationTypes.video.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.video.js
index dc4f469..f51ac71 100644
--- a/animism-align/frontend/views/align/components/annotations/annotationTypes/annotationTypes.video.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.video.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react'
 
-import { thumbnailURL } from '../../../align.util'
-
+import { thumbnailURL } from 'app/views/align/align.util'
 import { checkAnnotationMediaNotReady, AnnotationMediaLoading } from './annotationTypes.util'
 
 export const AnnotationVideo = ({ y, annotation, media, selected, onClick, onDoubleClick }) => {
diff --git a/animism-align/frontend/views/align/components/annotations/annotationTypes/index.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
index 560063b..560063b 100644
--- a/animism-align/frontend/views/align/components/annotations/annotationTypes/index.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
diff --git a/animism-align/frontend/views/align/components/player/playButton.component.js b/animism-align/frontend/app/views/align/components/player/playButton.component.js
index 486eaee..c6a8487 100644
--- a/animism-align/frontend/views/align/components/player/playButton.component.js
+++ b/animism-align/frontend/app/views/align/components/player/playButton.component.js
@@ -3,11 +3,11 @@ import React, { Component } from 'react'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
-import actions from '../../../../actions'
+import actions from 'app/actions'
 // import * as alignActions from '../align.actions'
 
-import { ZOOM_STEPS } from '../../constants'
-import { clamp } from '../../../../util'
+import { ZOOM_STEPS } from 'app/constants'
+import { clamp } from 'app/utils'
 
 const PlayButton = ({ audio }) => {
   return (
diff --git a/animism-align/frontend/views/align/components/timeline/cursor.component.js b/animism-align/frontend/app/views/align/components/timeline/cursor.component.js
index f621b37..4a94100 100644
--- a/animism-align/frontend/views/align/components/timeline/cursor.component.js
+++ b/animism-align/frontend/app/views/align/components/timeline/cursor.component.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 
-import { ZOOM_STEPS } from '../../constants'
-import { timestamp } from '../../../../util'
+import { ZOOM_STEPS } from 'app/constants'
+import { timestamp } from 'app/utils'
 
 const Cursor = ({ timeline, annotation }) => {
   const { start_ts, zoom, cursor_ts, duration } = timeline
diff --git a/animism-align/frontend/views/align/components/timeline/playCursor.component.js b/animism-align/frontend/app/views/align/components/timeline/playCursor.component.js
index e03d212..854c43b 100644
--- a/animism-align/frontend/views/align/components/timeline/playCursor.component.js
+++ b/animism-align/frontend/app/views/align/components/timeline/playCursor.component.js
@@ -3,8 +3,8 @@ import React, { Component } from 'react'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
-import { ZOOM_STEPS } from '../../constants'
-import { timestamp } from '../../../../util'
+import { ZOOM_STEPS } from 'app/constants'
+import { timestamp } from 'app/utils'
 
 const PlayCursor = ({ timeline, audio }) => {
   const { start_ts, zoom, duration } = timeline
diff --git a/animism-align/frontend/views/align/components/timeline/ticks.component.js b/animism-align/frontend/app/views/align/components/timeline/ticks.component.js
index 747fb7a..4530863 100644
--- a/animism-align/frontend/views/align/components/timeline/ticks.component.js
+++ b/animism-align/frontend/app/views/align/components/timeline/ticks.component.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 
-import { ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS, INNER_HEIGHT } from '../../constants'
-import { timestamp } from '../../../../util'
+import { ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS, INNER_HEIGHT } from 'app/constants'
+import { timestamp } from 'app/utils'
 
 export default class Ticks extends Component {
   render() {
diff --git a/animism-align/frontend/views/align/components/timeline/waveform.component.js b/animism-align/frontend/app/views/align/components/timeline/waveform.component.js
index 16ceaf6..023b877 100644
--- a/animism-align/frontend/views/align/components/timeline/waveform.component.js
+++ b/animism-align/frontend/app/views/align/components/timeline/waveform.component.js
@@ -3,10 +3,12 @@ import React, { Component } from 'react'
 // import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
-import actions from '../../../../actions'
-// import * as uploadActions from './upload.actions'
+import actions from 'app/actions'
 
-import { WAVEFORM_SIZE, ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS, INNER_HEIGHT } from '../../constants'
+import {
+  WAVEFORM_SIZE, INNER_HEIGHT,
+  ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS,
+} from 'app/constants'
 
 class Waveform extends Component {
   constructor(props){
diff --git a/animism-align/frontend/views/align/containers/annotations.container.js b/animism-align/frontend/app/views/align/containers/annotations.container.js
index b6cdace..e199bd6 100644
--- a/animism-align/frontend/views/align/containers/annotations.container.js
+++ b/animism-align/frontend/app/views/align/containers/annotations.container.js
@@ -3,15 +3,15 @@ import React, { Component } from 'react'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
-import actions from '../../../actions'
+import actions from 'app/actions'
 // import * as alignActions from '../align.actions'
 
-import { ZOOM_STEPS } from '../constants'
-import { clamp } from '../../../util'
-import { positionToTime } from '../align.util'
+import { ZOOM_STEPS } from 'app/constants'
+import { clamp } from 'app/utils'
+import { positionToTime } from 'app/views/align/align.util'
 
-import AnnotationForm from '../components/annotations/annotation.form'
-import AnnotationIndex from '../components/annotations/annotation.index'
+import AnnotationForm from 'app/views/align/components/annotations/annotation.form'
+import AnnotationIndex from 'app/views/align/components/annotations/annotation.index'
 
 class Annotations extends Component {
   constructor(props){
diff --git a/animism-align/frontend/views/align/containers/script.container.js b/animism-align/frontend/app/views/align/containers/script.container.js
index ce3dee8..cc340c6 100644
--- a/animism-align/frontend/views/align/containers/script.container.js
+++ b/animism-align/frontend/app/views/align/containers/script.container.js
@@ -3,8 +3,7 @@ import React, { Component } from 'react'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
-import actions from '../../../actions'
-// import * as alignActions from '../align.actions'
+import actions from 'app/actions'
 
 class Timeline extends Component {
   constructor(props){
diff --git a/animism-align/frontend/views/align/containers/timeline.container.js b/animism-align/frontend/app/views/align/containers/timeline.container.js
index a924eaf..c208e08 100644
--- a/animism-align/frontend/views/align/containers/timeline.container.js
+++ b/animism-align/frontend/app/views/align/containers/timeline.container.js
@@ -3,19 +3,19 @@ import React, { Component } from 'react'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
-import actions from '../../../actions'
+import actions from 'app/actions'
 // import * as alignActions from '../align.actions'
 
-import Annotations from '../containers/annotations.container'
-import Waveform from '../components/timeline/waveform.component'
-import Ticks from '../components/timeline/ticks.component'
-import Cursor from '../components/timeline/cursor.component'
-import PlayButton from '../components/player/playButton.component'
-import PlayCursor from '../components/timeline/playCursor.component'
+import Annotations from 'app/views/align/containers/annotations.container'
+import Waveform from 'app/views/align/components/timeline/waveform.component'
+import Ticks from 'app/views/align/components/timeline/ticks.component'
+import Cursor from 'app/views/align/components/timeline/cursor.component'
+import PlayButton from 'app/views/align/components/player/playButton.component'
+import PlayCursor from 'app/views/align/components/timeline/playCursor.component'
 
-import { WAVEFORM_SIZE, ZOOM_STEPS, INNER_HEIGHT } from '../constants'
-import { clamp } from '../../../util'
-import { positionToTime } from '../align.util'
+import { WAVEFORM_SIZE, ZOOM_STEPS, INNER_HEIGHT } from 'app/constants'
+import { clamp } from 'app/utils'
+import { positionToTime } from 'app/views/align/align.util'
 
 class Timeline extends Component {
   constructor(props){
diff --git a/animism-align/frontend/views/annotation/annotation.reducer.js b/animism-align/frontend/app/views/annotation/annotation.reducer.js
index 98b785e..50232a9 100644
--- a/animism-align/frontend/views/annotation/annotation.reducer.js
+++ b/animism-align/frontend/app/views/annotation/annotation.reducer.js
@@ -1,7 +1,6 @@
-import * as types from '../../types'
-import { session, getDefault, getDefaultInt } from '../../session'
+import * as types from 'app/types'
 
-import { crudState, crudReducer } from '../../api/crud.reducer'
+import { crudState, crudReducer } from 'app/api/crud.reducer'
 
 const initialState = crudState('annotation', {
   options: {
diff --git a/animism-align/frontend/views/audio/audio.actions.js b/animism-align/frontend/app/views/audio/audio.actions.js
index 64c8215..bd256a4 100644
--- a/animism-align/frontend/views/audio/audio.actions.js
+++ b/animism-align/frontend/app/views/audio/audio.actions.js
@@ -1,7 +1,7 @@
-import * as types from '../../types'
-import { store, history, dispatch } from '../../store'
-import actions from '../../actions'
-import { session } from '../../session'
+import * as types from 'app/types'
+import { store, history, dispatch } from 'app/store'
+import actions from 'app/actions'
+import { session } from 'app/session'
 
 const audioPlayer = document.createElement('audio')
 audioPlayer.src = '/static/data_store/peaks/animismA080720.mp3'
diff --git a/animism-align/frontend/views/audio/audio.reducer.js b/animism-align/frontend/app/views/audio/audio.reducer.js
index e37933d..6149ca6 100644
--- a/animism-align/frontend/views/audio/audio.reducer.js
+++ b/animism-align/frontend/app/views/audio/audio.reducer.js
@@ -1,5 +1,5 @@
-import * as types from '../../types'
-import { session, getDefault, getDefaultInt } from '../../session'
+import * as types from 'app/types'
+import { session, getDefault, getDefaultInt } from 'app/session'
 
 const initialState = {
   playing: false,
diff --git a/animism-align/frontend/views/index.js b/animism-align/frontend/app/views/index.js
index 2c9ee78..2c9ee78 100644
--- a/animism-align/frontend/views/index.js
+++ b/animism-align/frontend/app/views/index.js
diff --git a/animism-align/frontend/views/media/components/media.form.js b/animism-align/frontend/app/views/media/components/media.form.js
index 1463041..af53014 100644
--- a/animism-align/frontend/views/media/components/media.form.js
+++ b/animism-align/frontend/app/views/media/components/media.form.js
@@ -1,10 +1,9 @@
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 
-import { session } from '../../../session'
-import { capitalize } from '../../../util'
+import { capitalize } from 'app/utils'
 
-import { TextInput, LabelDescription, Select, TextArea, Checkbox, SubmitButton, Loader } from '../../../common'
+import { TextInput, LabelDescription, Select, TextArea, Checkbox, SubmitButton, Loader } from 'app/common'
 
 import MediaImageForm from './media.formImage'
 import MediaVideoForm from './media.formVideo'
@@ -132,8 +131,7 @@ export default class MediaForm extends Component {
       this.setState({ errorFields: new Set(errorFields) })
     } else {
       if (isNew) {
-        // side effect: set username if we're creating a new media
-        // session.set('username', data.username)
+        //
       } else {
         validData.id = data.id
       }
diff --git a/animism-align/frontend/views/media/components/media.formImage.js b/animism-align/frontend/app/views/media/components/media.formImage.js
index 4a97112..b6e38be 100644
--- a/animism-align/frontend/views/media/components/media.formImage.js
+++ b/animism-align/frontend/app/views/media/components/media.formImage.js
@@ -1,12 +1,12 @@
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 
-import { session } from '../../../session'
-import actions from '../../../actions'
-import { capitalize, preloadImage, cropImage } from '../../../util'
+import { session } from 'app/session'
+import actions from 'app/actions'
+import { capitalize, preloadImage, cropImage } from 'app/utils'
 
-import { TextInput, LabelDescription, UploadImage, Select, TextArea, Checkbox, SubmitButton, Loader } from '../../../common'
-import { renderThumbnail } from '../../../common/upload.helpers'
+import { TextInput, LabelDescription, UploadImage, Select, TextArea, Checkbox, SubmitButton, Loader } from 'app/common'
+import { renderThumbnail } from 'app/common/upload.helpers'
 
 import ImageSelection from './media.formImageSelection'
 
diff --git a/animism-align/frontend/views/media/components/media.formImageSelection.js b/animism-align/frontend/app/views/media/components/media.formImageSelection.js
index 5572793..966eb58 100644
--- a/animism-align/frontend/views/media/components/media.formImageSelection.js
+++ b/animism-align/frontend/app/views/media/components/media.formImageSelection.js
@@ -4,8 +4,8 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import toBlob from 'data-uri-to-blob'
 
-import { clamp } from '../../../util'
-import { Loader } from '../../../common'
+import { clamp } from 'app/utils'
+import { Loader } from 'app/common'
 
 const defaultState = {
   dragging: false,
diff --git a/animism-align/frontend/views/media/components/media.formVideo.js b/animism-align/frontend/app/views/media/components/media.formVideo.js
index 89954b9..c6b1cf9 100644
--- a/animism-align/frontend/views/media/components/media.formVideo.js
+++ b/animism-align/frontend/app/views/media/components/media.formVideo.js
@@ -2,10 +2,10 @@ import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 import VimeoPlayer from '@u-wave/react-vimeo'
 
-import { capitalize } from '../../../util'
-import { TextInput, LabelDescription, Select, TextArea, Checkbox, SubmitButton, Loader } from '../../../common'
+import { capitalize } from 'app/utils'
+import { TextInput, LabelDescription, Select, TextArea, Checkbox, SubmitButton, Loader } from 'app/common'
 
-import { getVimeoMetadata } from '../media.actions'
+import { getVimeoMetadata } from 'app/views/media/media.actions'
 
 export default class MediaVideoForm extends Component {
   state = {
diff --git a/animism-align/frontend/views/media/components/media.indexOptions.js b/animism-align/frontend/app/views/media/components/media.indexOptions.js
index 5dbc415..09a0f74 100644
--- a/animism-align/frontend/views/media/components/media.indexOptions.js
+++ b/animism-align/frontend/app/views/media/components/media.indexOptions.js
@@ -3,9 +3,9 @@ import { Link } from 'react-router-dom'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
-import actions from '../../../actions'
+import actions from 'app/actions'
 
-import { Select, Checkbox } from '../../../common'
+import { Select, Checkbox } from 'app/common'
 
 const thumbnailOptions = [
   { name: 'th', label: 'Thumbnails', },
diff --git a/animism-align/frontend/views/media/components/media.menu.js b/animism-align/frontend/app/views/media/components/media.menu.js
index 153a5c1..b782cdc 100644
--- a/animism-align/frontend/views/media/components/media.menu.js
+++ b/animism-align/frontend/app/views/media/components/media.menu.js
@@ -2,9 +2,9 @@ import React, { Component } from 'react'
 import { Route, Link } from 'react-router-dom'
 import { connect } from 'react-redux'
 
-import { history } from '../../../store'
-import actions from '../../../actions'
-import { MenuButton, FileInput } from '../../../common'
+import { history } from 'app/store'
+import actions from 'app/actions'
+import { MenuButton, FileInput } from 'app/common'
 
 const mapStateToProps = state => ({
   media: state.media,
diff --git a/animism-align/frontend/views/media/containers/media.edit.js b/animism-align/frontend/app/views/media/containers/media.edit.js
index 143cdfe..cf5f671 100644
--- a/animism-align/frontend/views/media/containers/media.edit.js
+++ b/animism-align/frontend/app/views/media/containers/media.edit.js
@@ -2,10 +2,10 @@ import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 import { connect } from 'react-redux'
 
-import { history } from '../../../store'
-import actions from '../../../actions'
+import { history } from 'app/store'
+import actions from 'app/actions'
 
-import { Loader } from '../../../common'
+import { Loader } from 'app/common'
 
 import MediaForm from '../components/media.form'
 import MediaMenu from '../components/media.menu'
diff --git a/animism-align/frontend/views/media/containers/media.index.js b/animism-align/frontend/app/views/media/containers/media.index.js
index a865522..eaf9db2 100644
--- a/animism-align/frontend/views/media/containers/media.index.js
+++ b/animism-align/frontend/app/views/media/containers/media.index.js
@@ -3,11 +3,11 @@ import { Link } from 'react-router-dom'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
-import { formatDateTime } from '../../../util'
-import { MenuButton, SmallMenuButton, Loader } from '../../../common'
-import actions from '../../../actions'
+import { formatDateTime } from 'app/utils'
+import { MenuButton, SmallMenuButton, Loader } from 'app/common'
+import actions from 'app/actions'
 
-import { thumbnailURL } from '../../align/align.util'
+import { thumbnailURL } from 'app/views/align/align.util'
 
 import MediaIndexOptions from '../components/media.indexOptions'
 import MediaMenu from '../components/media.menu'
diff --git a/animism-align/frontend/views/media/containers/media.new.js b/animism-align/frontend/app/views/media/containers/media.new.js
index 80879cb..c193c2f 100644
--- a/animism-align/frontend/views/media/containers/media.new.js
+++ b/animism-align/frontend/app/views/media/containers/media.new.js
@@ -2,8 +2,8 @@ import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 import { connect } from 'react-redux'
 
-import { history } from '../../../store'
-import actions from '../../../actions'
+import { history } from 'app/store'
+import actions from 'app/actions'
 
 import MediaForm from '../components/media.form'
 import MediaMenu from '../components/media.menu'
diff --git a/animism-align/frontend/views/media/media.actions.js b/animism-align/frontend/app/views/media/media.actions.js
index 1f1ab01..a6d9bbd 100644
--- a/animism-align/frontend/views/media/media.actions.js
+++ b/animism-align/frontend/app/views/media/media.actions.js
@@ -1,5 +1,5 @@
-import * as types from '../../types'
-import { capitalize, api } from '../../util'
+import * as types from 'app/types'
+import { capitalize, api } from 'app/utils'
 
 export const getVimeoMetadata = url => {
   return api(() => {}, types.vimeo, 'vimeo', 'https://vimeo.com/api/oembed.json', { url })
diff --git a/animism-align/frontend/views/media/media.container.js b/animism-align/frontend/app/views/media/media.container.js
index 97a5b08..b597a6c 100644
--- a/animism-align/frontend/views/media/media.container.js
+++ b/animism-align/frontend/app/views/media/media.container.js
@@ -5,7 +5,7 @@ import { connect } from 'react-redux'
 
 import './media.css'
 
-import actions from '../../actions'
+import actions from 'app/actions'
 
 import MediaIndex from './containers/media.index'
 // import MediaShow from './containers/media.show'
diff --git a/animism-align/frontend/views/media/media.css b/animism-align/frontend/app/views/media/media.css
index a2d95c8..a2d95c8 100644
--- a/animism-align/frontend/views/media/media.css
+++ b/animism-align/frontend/app/views/media/media.css
diff --git a/animism-align/frontend/views/media/media.reducer.js b/animism-align/frontend/app/views/media/media.reducer.js
index cb9b91d..f13f9de 100644
--- a/animism-align/frontend/views/media/media.reducer.js
+++ b/animism-align/frontend/app/views/media/media.reducer.js
@@ -1,7 +1,7 @@
-import * as types from '../../types'
-import { session, getDefault, getDefaultInt } from '../../session'
+import * as types from 'app/types'
+import { session, getDefault, getDefaultInt } from 'app/session'
 
-import { crudState, crudReducer } from '../../api/crud.reducer'
+import { crudState, crudReducer } from 'app/api/crud.reducer'
 
 const initialState = crudState('media', {
   options: {
diff --git a/animism-align/frontend/views/nav/header.component.js b/animism-align/frontend/app/views/nav/header.component.js
index efbaf08..b03d833 100644
--- a/animism-align/frontend/views/nav/header.component.js
+++ b/animism-align/frontend/app/views/nav/header.component.js
@@ -3,7 +3,7 @@ import React from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 
-import PlayButton from '../align/components/player/playButton.component'
+import PlayButton from 'app/views/align/components/player/playButton.component'
 
 import './nav.css'
 
diff --git a/animism-align/frontend/views/nav/nav.css b/animism-align/frontend/app/views/nav/nav.css
index 485ace2..485ace2 100644
--- a/animism-align/frontend/views/nav/nav.css
+++ b/animism-align/frontend/app/views/nav/nav.css
diff --git a/animism-align/frontend/views/paragraph/components/paragraph.form.js b/animism-align/frontend/app/views/paragraph/components/paragraph.form.js
index de3114c..751ec7f 100644
--- a/animism-align/frontend/views/paragraph/components/paragraph.form.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraph.form.js
@@ -3,10 +3,10 @@ import React, { Component } from 'react'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
-import actions from '../../../actions'
+import actions from 'app/actions'
 
-import { clamp, timestamp, capitalize } from '../../../util'
-import { Select } from '../../../common'
+import { clamp, timestamp, capitalize } from 'app/utils'
+import { Select } from 'app/common'
 
 const PARAGRAPH_TYPES = [
   'paragraph', 'blockquote', 'hidden',
diff --git a/animism-align/frontend/views/paragraph/containers/paragraphList.container.js b/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
index 4c54808..1b8a0ac 100644
--- a/animism-align/frontend/views/paragraph/containers/paragraphList.container.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraph.list.js
@@ -3,29 +3,20 @@ import { Route } from 'react-router-dom'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
-import actions from '../../../actions'
+import { floatLT, floatLTE } from 'app/utils'
+import actions from 'app/actions'
 import ParagraphForm from '../components/paragraph.form'
 
-const floatLT = (a,b) => ((a*10|0) < (b*10|0))
-const floatLTE = (a,b) => ((a*10|0) === (b*10|0) || floatLT(a,b))
-
-const MEDIA_TYPES = new Set(['image', 'gallery', 'vitrine', 'video'])
+const MEDIA_TYPES = new Set([
+  'image', 'gallery', 'vitrine',
+  'video',
+])
 
 class ParagraphList extends Component {
   state = {
     paragraphs: [],
     currentParagraph: -1,
     currentAnnotation: -1,
-    selectedParagraph: null,
-    selectedParagraphOffset: 0,
-  }
-  
-  constructor(props) {
-    super(props)
-    this.handleAnnotationClick = this.handleAnnotationClick.bind(this)
-    this.handleParagraphDoubleClick = this.handleParagraphDoubleClick.bind(this)
-    this.handleCloseParagraphForm = this.handleCloseParagraphForm.bind(this)
-    this.updateSelectedParagraph = this.updateSelectedParagraph.bind(this)
   }
   
   componentDidMount() {
@@ -124,65 +115,33 @@ class ParagraphList extends Component {
     this.setState({ paragraphs })
   }
 
-  handleAnnotationClick(e, paragraph, annotation){
-    actions.audio.seek(annotation.start_ts)
-  }
-  handleParagraphDoubleClick(e, paragraph) {
-    console.log(e.target.parentNode)
-    let paragraphNode = e.target
-    if (!paragraphNode.classList.contains('paragraph')) {
-      paragraphNode = paragraphNode.parentNode
-    }
-    this.setState({
-      selectedParagraph: { ...paragraph },
-      selectedParagraphOffset: paragraphNode.offsetTop
-    })
-  }
-  updateSelectedParagraph(selectedParagraph) {
-    this.setState({ selectedParagraph })
-  }
-  handleCloseParagraphForm() {
-    this.setState({ selectedParagraph: null })
-  }
-
   render() {
-    const { media, paragraphElementLookup } = this.props
-    const { paragraphs, selectedParagraph, selectedParagraphOffset, currentParagraph, currentAnnotation } = this.state
-    return (
-      <div className='paragraphs'>
-        <div className='content'>
-          {paragraphs.map(paragraph => {
-            if (selectedParagraph && selectedParagraph.id === paragraph.id) {
-              paragraph = selectedParagraph
-            }
-            if (paragraph.type in paragraphElementLookup) {
-              const ParagraphElement = paragraphElementLookup[paragraph.type]
-              return (
-                <ParagraphElement
-                  key={paragraph.id}
-                  paragraph={paragraph}
-                  media={media}
-                  currentParagraph={paragraph.id === currentParagraph}
-                  currentAnnotation={paragraph.id === currentParagraph && currentAnnotation}
-                  onAnnotationClick={this.handleAnnotationClick}
-                  onDoubleClick={this.handleParagraphDoubleClick}
-                />
-              )
-            } else {
-              return <div key={paragraph.id}>{'(waiting to implement' + paragraph.type + ')'}</div>
-            }
-          })}
-          {selectedParagraph &&
-            <ParagraphForm
-              paragraph={selectedParagraph}
-              onUpdate={this.updateSelectedParagraph}
-              onClose={this.handleCloseParagraphForm}
-              y={selectedParagraphOffset}
-            />
-          }
-        </div>
-      </div>
-    )
+    const {
+      media, paragraphElementLookup, selectedParagraph,
+      onAnnotationClick, onParagraphDoubleClick
+    } = this.props
+    const { paragraphs, currentParagraph, currentAnnotation } = this.state
+    return paragraphs.map(paragraph => {
+      if (selectedParagraph && selectedParagraph.id === paragraph.id) {
+        paragraph = selectedParagraph
+      }
+      if (paragraph.type in paragraphElementLookup) {
+        const ParagraphElement = paragraphElementLookup[paragraph.type]
+        return (
+          <ParagraphElement
+            key={paragraph.id}
+            paragraph={paragraph}
+            media={media}
+            currentParagraph={paragraph.id === currentParagraph}
+            currentAnnotation={paragraph.id === currentParagraph && currentAnnotation}
+            onAnnotationClick={onAnnotationClick}
+            onDoubleClick={onParagraphDoubleClick}
+          />
+        )
+      } else {
+        return <div key={paragraph.id}>{'(waiting to implement' + paragraph.type + ')'}</div>
+      }
+    })
   }
 }
 
diff --git a/animism-align/frontend/views/paragraph/components/paragraphTypes/index.js b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js
index 62b4a49..62b4a49 100644
--- a/animism-align/frontend/views/paragraph/components/paragraphTypes/index.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js
diff --git a/animism-align/frontend/views/paragraph/components/paragraphTypes/paragraphTypes.image.js b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.image.js
index 36c72e9..36c72e9 100644
--- a/animism-align/frontend/views/paragraph/components/paragraphTypes/paragraphTypes.image.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.image.js
diff --git a/animism-align/frontend/views/paragraph/components/paragraphTypes/paragraphTypes.text.js b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js
index c2ebcd7..c2ebcd7 100644
--- a/animism-align/frontend/views/paragraph/components/paragraphTypes/paragraphTypes.text.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js
diff --git a/animism-align/frontend/views/paragraph/components/paragraphTypes/paragraphTypes.video.js b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.video.js
index 423864b..423864b 100644
--- a/animism-align/frontend/views/paragraph/components/paragraphTypes/paragraphTypes.video.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.video.js
diff --git a/animism-align/frontend/app/views/paragraph/containers/paragraphEditor.container.js b/animism-align/frontend/app/views/paragraph/containers/paragraphEditor.container.js
new file mode 100644
index 0000000..12ab618
--- /dev/null
+++ b/animism-align/frontend/app/views/paragraph/containers/paragraphEditor.container.js
@@ -0,0 +1,85 @@
+import React, { Component } from 'react'
+import { Route } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+import ParagraphForm from '../components/paragraph.form'
+import ParagraphList from '../components/paragraph.list'
+import { paragraphElementLookup } from '../components/paragraphTypes'
+
+class ParagraphEditor extends Component {
+  state = {
+    selectedParagraph: null,
+    selectedParagraphOffset: 0,
+  }
+  
+  constructor(props) {
+    super(props)
+    this.handleAnnotationClick = this.handleAnnotationClick.bind(this)
+    this.handleParagraphDoubleClick = this.handleParagraphDoubleClick.bind(this)
+    this.handleCloseParagraphForm = this.handleCloseParagraphForm.bind(this)
+    this.updateSelectedParagraph = this.updateSelectedParagraph.bind(this)
+  }
+  
+  handleAnnotationClick(e, paragraph, annotation){
+    actions.audio.seek(annotation.start_ts)
+  }
+
+  handleParagraphDoubleClick(e, paragraph) {
+    console.log(e.target.parentNode)
+    let paragraphNode = e.target
+    if (!paragraphNode.classList.contains('paragraph')) {
+      paragraphNode = paragraphNode.parentNode
+    }
+    this.setState({
+      selectedParagraph: { ...paragraph },
+      selectedParagraphOffset: paragraphNode.offsetTop
+    })
+  }
+
+  updateSelectedParagraph(selectedParagraph) {
+    this.setState({ selectedParagraph })
+  }
+
+  handleCloseParagraphForm() {
+    this.setState({ selectedParagraph: null })
+  }
+
+  render() {
+    // const { media } = this.props
+    const { paragraphs, selectedParagraph, currentParagraph, currentAnnotation } = this.state
+    return (
+      <div className='paragraphs'>
+        <div className='content'>
+          <ParagraphList
+            paragraphElementLookup={paragraphElementLookup}
+            selectedParagraph={selectedParagraph}
+            onAnnotationClick={this.handleAnnotationClick}
+            onParagraphDoubleClick={this.handleParagraphDoubleClick}
+          />
+          {selectedParagraph &&
+            <ParagraphForm
+              paragraph={selectedParagraph}
+              onUpdate={this.updateSelectedParagraph}
+              onClose={this.handleCloseParagraphForm}
+              y={selectedParagraphOffset}
+            />
+          }
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  // paragraph: state.paragraph.index,
+  // annotation: state.annotation.index,
+  // audio: state.audio,
+  // media: state.media.index,
+})
+
+const mapDispatchToProps = dispatch => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(ParagraphEditor)
diff --git a/animism-align/frontend/views/paragraph/paragraph.container.js b/animism-align/frontend/app/views/paragraph/paragraph.container.js
index 6035be8..ea1c797 100644
--- a/animism-align/frontend/views/paragraph/paragraph.container.js
+++ b/animism-align/frontend/app/views/paragraph/paragraph.container.js
@@ -5,11 +5,10 @@ import { connect } from 'react-redux'
 
 import './paragraph.css'
 
-import actions from '../../actions'
-import { Loader } from '../../common'
+import actions from 'app/actions'
+import { Loader } from 'app/common'
 
-import ParagraphList from './containers/paragraphList.container'
-import { paragraphElementLookup } from '../components/paragraphTypes'
+import ParagraphEditor from './containers/paragraphEditor.container'
 
 class ParagraphContainer extends Component {
   componentDidMount() {
@@ -52,7 +51,7 @@ class ParagraphContainer extends Component {
     }
     return (
       <div className='body'>
-        <ParagraphList paragraphElementLookup={paragraphElementLookup} />
+        <ParagraphEditor />
       </div>
     )
   }
diff --git a/animism-align/frontend/views/paragraph/paragraph.css b/animism-align/frontend/app/views/paragraph/paragraph.css
index 8cd502c..8cd502c 100644
--- a/animism-align/frontend/views/paragraph/paragraph.css
+++ b/animism-align/frontend/app/views/paragraph/paragraph.css
diff --git a/animism-align/frontend/views/paragraph/paragraph.reducer.js b/animism-align/frontend/app/views/paragraph/paragraph.reducer.js
index 263aa07..c3babc8 100644
--- a/animism-align/frontend/views/paragraph/paragraph.reducer.js
+++ b/animism-align/frontend/app/views/paragraph/paragraph.reducer.js
@@ -1,7 +1,7 @@
-import * as types from '../../types'
-import { session, getDefault, getDefaultInt } from '../../session'
+import * as types from 'app/types'
+import { session, getDefault, getDefaultInt } from 'app/session'
 
-import { crudState, crudReducer } from '../../api/crud.reducer'
+import { crudState, crudReducer } from 'app/api/crud.reducer'
 
 const initialState = crudState('paragraph', {
   options: {
diff --git a/animism-align/frontend/views/site/component.template.js b/animism-align/frontend/app/views/site/component.template.js
index a22d582..5b22206 100644
--- a/animism-align/frontend/views/site/component.template.js
+++ b/animism-align/frontend/app/views/site/component.template.js
@@ -3,7 +3,7 @@ import React, { Component } from 'react'
 // import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
-import actions from '../../../actions'
+import actions from 'app/actions'
 // import * as uploadActions from './upload.actions'
 
 class ComponentTemplate extends Component {
diff --git a/animism-align/frontend/views/site/site.actions.js b/animism-align/frontend/app/views/site/site.actions.js
index c7c228e..b894c64 100644
--- a/animism-align/frontend/views/site/site.actions.js
+++ b/animism-align/frontend/app/views/site/site.actions.js
@@ -1,7 +1,5 @@
-import * as types from '../../types'
-// import actions from '../../actions'
-// import { session } from '../../session'
-import { api, post, pad, preloadImage } from '../../util'
+import * as types from 'app/types'
+import { api, post, pad, preloadImage } from 'app/utils'
 
 export const loadPeaks = (asdf) => dispatch => {
   api(dispatch, types.peaks, 'peaks', '/static/data_store/peaks/peaks.json')
diff --git a/animism-align/frontend/views/site/site.reducer.js b/animism-align/frontend/app/views/site/site.reducer.js
index e80033f..fbb53fc 100644
--- a/animism-align/frontend/views/site/site.reducer.js
+++ b/animism-align/frontend/app/views/site/site.reducer.js
@@ -1,5 +1,4 @@
-import * as types from '../../types'
-// import { session, getDefault, getDefaultInt } from '../../session'
+import * as types from 'app/types'
 
 const initialState = {
   peaks: { loading: true },
@@ -8,7 +7,6 @@ const initialState = {
 
 export default function siteReducer(state = initialState, action) {
   // console.log(action.type, action)
-  // console.log(action.data)
   switch (action.type) {
     case types.peaks.loaded:
       return {
diff --git a/animism-align/frontend/views/upload/components/upload.form.js b/animism-align/frontend/app/views/upload/components/upload.form.js
index 2010088..e35bfaa 100644
--- a/animism-align/frontend/views/upload/components/upload.form.js
+++ b/animism-align/frontend/app/views/upload/components/upload.form.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 
-import { MenuButton, FileInput } from '../../../common'
+import { MenuButton, FileInput } from 'app/common'
 
 export default class UploadForm extends Component {
   render() {
diff --git a/animism-align/frontend/views/upload/components/upload.index.js b/animism-align/frontend/app/views/upload/components/upload.index.js
index 3a7ae4b..d60231d 100644
--- a/animism-align/frontend/views/upload/components/upload.index.js
+++ b/animism-align/frontend/app/views/upload/components/upload.index.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 
-import { uploadUri, formatDateTime } from '../../../util'
-import { MenuButton, SmallMenuButton, Loader } from '../../../common'
-import actions from '../../../actions'
+import { uploadUri, formatDateTime } from 'app/utils'
+import { MenuButton, SmallMenuButton, Loader } from 'app/common'
+import actions from 'app/actions'
 
 import UploadIndexOptions from './upload.indexOptions'
 import UploadMenu from './upload.menu'
diff --git a/animism-align/frontend/views/upload/components/upload.indexOptions.js b/animism-align/frontend/app/views/upload/components/upload.indexOptions.js
index 774bf22..75fdffc 100644
--- a/animism-align/frontend/views/upload/components/upload.indexOptions.js
+++ b/animism-align/frontend/app/views/upload/components/upload.indexOptions.js
@@ -3,9 +3,9 @@ import { Link } from 'react-router-dom'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
-import actions from '../../../actions'
+import actions from 'app/actions'
 
-import { Select, Checkbox } from '../../../common'
+import { Select, Checkbox } from 'app/common'
 
 const thumbnailOptions = [
   { name: 'th', label: 'Thumbnails', },
diff --git a/animism-align/frontend/views/upload/components/upload.menu.js b/animism-align/frontend/app/views/upload/components/upload.menu.js
index 37c7f0b..485d06f 100644
--- a/animism-align/frontend/views/upload/components/upload.menu.js
+++ b/animism-align/frontend/app/views/upload/components/upload.menu.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 
-import { MenuButton, FileInput } from '../../../common'
+import { MenuButton, FileInput } from 'app/common'
 
-import actions from '../../../actions'
+import actions from 'app/actions'
 
 export default class UploadMenu extends Component {
   render() {
diff --git a/animism-align/frontend/views/upload/components/upload.show.js b/animism-align/frontend/app/views/upload/components/upload.show.js
index 352caf3..0498cac 100644
--- a/animism-align/frontend/views/upload/components/upload.show.js
+++ b/animism-align/frontend/app/views/upload/components/upload.show.js
@@ -2,10 +2,10 @@ import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 import { connect } from 'react-redux'
 
-import actions from '../../../actions'
-import { formatDate, formatTime, formatAge, uploadUri } from '../../../util'
-import { history } from '../../../store'
-import { Loader, MenuButton } from '../../../common'
+import actions from 'app/actions'
+import { formatDate, formatTime, formatAge, uploadUri } from 'app/utils'
+import { history } from 'app/store'
+import { Loader, MenuButton } from 'app/common'
 
 class UploadShow extends Component {
   componentDidMount() {
diff --git a/animism-align/frontend/views/upload/upload.actions.js b/animism-align/frontend/app/views/upload/upload.actions.js
index c5d12e3..73c8e16 100644
--- a/animism-align/frontend/views/upload/upload.actions.js
+++ b/animism-align/frontend/app/views/upload/upload.actions.js
@@ -1,8 +1,8 @@
-import * as types from '../../types'
-import { store, history } from '../../store'
-import { api, post, pad, preloadImage } from '../../util'
-import actions from '../../actions'
-import { session } from '../../session'
+import * as types from 'app/types'
+import { store, history } from 'app/store'
+import { api, post, pad, preloadImage } from 'app/utils'
+import actions from 'app/actions'
+import { session } from 'app/session'
 
 export const upload = (image, tag='upload') => dispatch => {
   const formData = {
diff --git a/animism-align/frontend/views/upload/upload.container.js b/animism-align/frontend/app/views/upload/upload.container.js
index 0ad76c9..7753711 100644
--- a/animism-align/frontend/views/upload/upload.container.js
+++ b/animism-align/frontend/app/views/upload/upload.container.js
@@ -5,7 +5,7 @@ import { connect } from 'react-redux'
 
 import './upload.css'
 
-import actions from '../../actions'
+import actions from 'app/actions'
 import * as uploadActions from './upload.actions'
 
 import UploadMenu from './components/upload.menu'
diff --git a/animism-align/frontend/views/upload/upload.css b/animism-align/frontend/app/views/upload/upload.css
index 28ce33d..28ce33d 100644
--- a/animism-align/frontend/views/upload/upload.css
+++ b/animism-align/frontend/app/views/upload/upload.css
diff --git a/animism-align/frontend/views/upload/upload.reducer.js b/animism-align/frontend/app/views/upload/upload.reducer.js
index db12819..818be88 100644
--- a/animism-align/frontend/views/upload/upload.reducer.js
+++ b/animism-align/frontend/app/views/upload/upload.reducer.js
@@ -1,7 +1,7 @@
-import * as types from '../../types'
-import { session, getDefault, getDefaultInt } from '../../session'
+import * as types from 'app/types'
+import { session, getDefault, getDefaultInt } from 'app/session'
 
-import { crudState, crudReducer } from '../../api/crud.reducer'
+import { crudState, crudReducer } from 'app/api/crud.reducer'
 
 const initialState = crudState('upload', {
   options: {
diff --git a/animism-align/frontend/common/index.js b/animism-align/frontend/common/index.js
deleted file mode 100644
index 0678a93..0000000
--- a/animism-align/frontend/common/index.js
+++ /dev/null
@@ -1,31 +0,0 @@
-// export { default as Header } from './header.component'
-export {
-  MenuButton, SmallMenuButton, MenuRoute,
-} from './menubutton.component'
-export {
-  Select, Checkbox, Radio, FileInput, FileInputField,
-  TextInput, NumberInput, TextArea, SubmitButton,
-  LabelDescription, ColorInput,
-} from './form.component'
-export {
-  Loader, Swatch, Dot, Columns, Statistic, Detections, Progress
-} from './miscellaneous.component'
-export { default as TableIndex } from './tableIndex.component'
-export {
-  TableObject, TableArray, TableTuples,
-  TableRow, TableCell
-} from './table.component'
-export { default as CopyToClipboardButton } from './copyToClipboardButton.component'
-export { default as ImageCrop } from './imageCrop.component'
-export { Modal } from './modal.component'
-export { default as UploadImage } from './uploadImage.component'
-export { default as Slider } from './slider.component'
-
-import './fonts.css'
-import './app.css'
-import './form.css'
-import './loader.css'
-import './table.css'
-import './modal.css'
-import './miscellaneous.css'
-import './upload.css'
diff --git a/animism-align/frontend/index.js b/animism-align/frontend/index.js
index 6f1a0a5..8daf531 100644
--- a/animism-align/frontend/index.js
+++ b/animism-align/frontend/index.js
@@ -2,9 +2,9 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
 
-import App from './app'
+import Router from 'app/router'
 
-import { store, history } from './store'
+import { store, history } from 'app/store'
 
 const container = document.createElement('div')
 container.classList.add('container')
@@ -12,6 +12,6 @@ document.body.appendChild(container)
 
 ReactDOM.render(
   <Provider store={store}>
-    <App history={history} />
+    <Router history={history} />
   </Provider>, container
 )