From a17b76ac75f506f5da6fe8adf9c36632b60d4226 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sat, 26 Sep 2020 14:56:02 +0200
Subject: refactor to use app-rooted js imports

---
 .babelrc                                           |   9 +-
 .eslintrc.js                                       |   6 +-
 frontend/actions.js                                |  18 -
 frontend/api/crud.actions.js                       |  51 --
 frontend/api/crud.fetch.js                         | 105 ----
 frontend/api/crud.reducer.js                       | 196 -------
 frontend/api/crud.types.js                         |  36 --
 frontend/api/crud.upload.js                        | 107 ----
 frontend/api/index.js                              |  24 -
 frontend/app.js                                    |  44 --
 frontend/app/actions.js                            |  18 +
 frontend/app/api/crud.actions.js                   |  51 ++
 frontend/app/api/crud.fetch.js                     | 105 ++++
 frontend/app/api/crud.reducer.js                   | 196 +++++++
 frontend/app/api/crud.types.js                     |  36 ++
 frontend/app/api/crud.upload.js                    | 107 ++++
 frontend/app/api/index.js                          |  24 +
 frontend/app/app.js                                |  44 ++
 frontend/app/common/app.css                        | 428 ++++++++++++++
 .../app/common/copyToClipboardButton.component.js  |  24 +
 frontend/app/common/fonts.css                      |  55 ++
 frontend/app/common/form.component.js              | 220 +++++++
 frontend/app/common/form.css                       | 323 +++++++++++
 frontend/app/common/header.component.js            |  41 ++
 frontend/app/common/imageCrop.component.js         |  41 ++
 frontend/app/common/index.js                       |  32 +
 frontend/app/common/loader.component.js            |  16 +
 frontend/app/common/loader.css                     | 125 ++++
 frontend/app/common/menubutton.component.js        | 128 ++++
 frontend/app/common/miscellaneous.component.js     |  71 +++
 frontend/app/common/miscellaneous.css              |  18 +
 frontend/app/common/modal.component.js             |   9 +
 frontend/app/common/modal.css                      |  20 +
 frontend/app/common/slider.component.js            | 120 ++++
 frontend/app/common/table.component.js             | 128 ++++
 frontend/app/common/table.css                      |  96 +++
 frontend/app/common/tableIndex.component.js        | 129 +++++
 frontend/app/common/upload.css                     |  26 +
 frontend/app/common/upload.helpers.js              | 174 ++++++
 frontend/app/common/uploadImage.component.js       |  74 +++
 frontend/app/session.js                            |  19 +
 frontend/app/site/actions.js                       |  19 +
 frontend/app/site/app.js                           |  33 ++
 frontend/app/site/index.js                         |  17 +
 frontend/app/site/site/site.actions.js             |  11 +
 frontend/app/site/site/site.reducer.js             |  36 ++
 frontend/app/site/store.js                         |  37 ++
 frontend/app/site/types.js                         |  11 +
 frontend/app/site/viewer/viewer.container.js       |  96 +++
 frontend/app/store.js                              |  45 ++
 frontend/app/types.js                              |  33 ++
 frontend/app/utils/index.js                        | 331 +++++++++++
 .../app/views/graph/components/graph.canvas.js     | 138 +++++
 .../app/views/graph/components/graph.editor.js     | 212 +++++++
 .../app/views/graph/components/graph.header.js     |  31 +
 frontend/app/views/graph/components/page.edit.js   |  65 +++
 frontend/app/views/graph/components/page.form.js   | 185 ++++++
 frontend/app/views/graph/components/page.handle.js |  59 ++
 frontend/app/views/graph/components/page.new.js    |  47 ++
 frontend/app/views/graph/graph.actions.js          |  37 ++
 frontend/app/views/graph/graph.container.js        |  82 +++
 frontend/app/views/graph/graph.css                 | 172 ++++++
 frontend/app/views/graph/graph.reducer.js          | 100 ++++
 frontend/app/views/index.js                        |   4 +
 frontend/app/views/index/components/graph.form.js  | 153 +++++
 frontend/app/views/index/containers/graph.edit.js  |  53 ++
 frontend/app/views/index/containers/graph.index.js |  53 ++
 frontend/app/views/index/containers/graph.new.js   |  44 ++
 frontend/app/views/index/index.container.js        |  36 ++
 frontend/app/views/index/index.css                 |  38 ++
 frontend/app/views/page/components/page.editor.js  | 215 +++++++
 frontend/app/views/page/components/page.header.js  |  36 ++
 frontend/app/views/page/components/tile.edit.js    |  84 +++
 frontend/app/views/page/components/tile.form.js    | 645 +++++++++++++++++++++
 frontend/app/views/page/components/tile.handle.js  | 139 +++++
 frontend/app/views/page/components/tile.list.js    | 142 +++++
 frontend/app/views/page/components/tile.new.js     |  55 ++
 frontend/app/views/page/cursors.css                |  21 +
 frontend/app/views/page/page.actions.js            | 110 ++++
 frontend/app/views/page/page.container.js          |  95 +++
 frontend/app/views/page/page.css                   | 167 ++++++
 frontend/app/views/page/page.reducer.js            | 202 +++++++
 frontend/app/views/site/site.actions.js            |   6 +
 frontend/app/views/site/site.reducer.js            |  19 +
 frontend/app/views/tile/tile.actions.js            |   9 +
 frontend/app/views/tile/tile.reducer.js            |  31 +
 .../app/views/upload/components/upload.form.js     |  16 +
 .../app/views/upload/components/upload.index.js    | 104 ++++
 .../views/upload/components/upload.indexOptions.js |  62 ++
 .../app/views/upload/components/upload.menu.js     |  18 +
 .../app/views/upload/components/upload.show.js     |  70 +++
 frontend/app/views/upload/upload.actions.js        |  14 +
 frontend/app/views/upload/upload.container.js      |  35 ++
 frontend/app/views/upload/upload.css               |  10 +
 frontend/app/views/upload/upload.reducer.js        |  21 +
 frontend/common/app.css                            | 428 --------------
 frontend/common/copyToClipboardButton.component.js |  24 -
 frontend/common/fonts.css                          |  55 --
 frontend/common/form.component.js                  | 220 -------
 frontend/common/form.css                           | 323 -----------
 frontend/common/header.component.js                |  41 --
 frontend/common/imageCrop.component.js             |  41 --
 frontend/common/index.js                           |  32 -
 frontend/common/loader.component.js                |  16 -
 frontend/common/loader.css                         | 125 ----
 frontend/common/menubutton.component.js            | 128 ----
 frontend/common/miscellaneous.component.js         |  71 ---
 frontend/common/miscellaneous.css                  |  18 -
 frontend/common/modal.component.js                 |   9 -
 frontend/common/modal.css                          |  20 -
 frontend/common/slider.component.js                | 120 ----
 frontend/common/table.component.js                 | 128 ----
 frontend/common/table.css                          |  96 ---
 frontend/common/tableIndex.component.js            | 129 -----
 frontend/common/upload.css                         |  26 -
 frontend/common/upload.helpers.js                  | 174 ------
 frontend/common/uploadImage.component.js           |  74 ---
 frontend/index.js                                  |   6 +-
 frontend/session.js                                |  19 -
 frontend/site/actions.js                           |  19 -
 frontend/site/app.js                               |  33 --
 frontend/site/index.js                             |  17 -
 frontend/site/site/site.actions.js                 |  24 -
 frontend/site/site/site.reducer.js                 |  37 --
 frontend/site/store.js                             |  38 --
 frontend/site/types.js                             |  11 -
 frontend/site/viewer/viewer.container.js           |  96 ---
 frontend/store.js                                  |  50 --
 frontend/types.js                                  |  33 --
 frontend/util/index.js                             | 331 -----------
 frontend/views/graph/components/graph.canvas.js    | 138 -----
 frontend/views/graph/components/graph.editor.js    | 212 -------
 frontend/views/graph/components/graph.header.js    |  31 -
 frontend/views/graph/components/page.edit.js       |  65 ---
 frontend/views/graph/components/page.form.js       | 185 ------
 frontend/views/graph/components/page.handle.js     |  59 --
 frontend/views/graph/components/page.new.js        |  47 --
 frontend/views/graph/graph.actions.js              |  37 --
 frontend/views/graph/graph.container.js            |  82 ---
 frontend/views/graph/graph.css                     | 172 ------
 frontend/views/graph/graph.reducer.js              | 100 ----
 frontend/views/index.js                            |   4 -
 frontend/views/index/components/graph.form.js      | 153 -----
 frontend/views/index/containers/graph.edit.js      |  53 --
 frontend/views/index/containers/graph.index.js     |  53 --
 frontend/views/index/containers/graph.new.js       |  44 --
 frontend/views/index/index.container.js            |  36 --
 frontend/views/index/index.css                     |  38 --
 frontend/views/page/components/page.editor.js      | 215 -------
 frontend/views/page/components/page.header.js      |  36 --
 frontend/views/page/components/tile.edit.js        |  84 ---
 frontend/views/page/components/tile.form.js        | 645 ---------------------
 frontend/views/page/components/tile.handle.js      | 139 -----
 frontend/views/page/components/tile.list.js        | 142 -----
 frontend/views/page/components/tile.new.js         |  55 --
 frontend/views/page/cursors.css                    |  21 -
 frontend/views/page/page.actions.js                | 110 ----
 frontend/views/page/page.container.js              |  95 ---
 frontend/views/page/page.css                       | 167 ------
 frontend/views/page/page.reducer.js                | 202 -------
 frontend/views/site/site.actions.js                |   8 -
 frontend/views/site/site.reducer.js                |  20 -
 frontend/views/tile/tile.actions.js                |  10 -
 frontend/views/tile/tile.reducer.js                |  32 -
 frontend/views/upload/components/upload.form.js    |  16 -
 frontend/views/upload/components/upload.index.js   | 104 ----
 .../views/upload/components/upload.indexOptions.js |  62 --
 frontend/views/upload/components/upload.menu.js    |  18 -
 frontend/views/upload/components/upload.show.js    |  70 ---
 frontend/views/upload/upload.actions.js            |  17 -
 frontend/views/upload/upload.container.js          |  37 --
 frontend/views/upload/upload.css                   |  10 -
 frontend/views/upload/upload.reducer.js            |  21 -
 173 files changed, 7417 insertions(+), 7438 deletions(-)
 delete mode 100644 frontend/actions.js
 delete mode 100644 frontend/api/crud.actions.js
 delete mode 100644 frontend/api/crud.fetch.js
 delete mode 100644 frontend/api/crud.reducer.js
 delete mode 100644 frontend/api/crud.types.js
 delete mode 100644 frontend/api/crud.upload.js
 delete mode 100644 frontend/api/index.js
 delete mode 100644 frontend/app.js
 create mode 100644 frontend/app/actions.js
 create mode 100644 frontend/app/api/crud.actions.js
 create mode 100644 frontend/app/api/crud.fetch.js
 create mode 100644 frontend/app/api/crud.reducer.js
 create mode 100644 frontend/app/api/crud.types.js
 create mode 100644 frontend/app/api/crud.upload.js
 create mode 100644 frontend/app/api/index.js
 create mode 100644 frontend/app/app.js
 create mode 100644 frontend/app/common/app.css
 create mode 100644 frontend/app/common/copyToClipboardButton.component.js
 create mode 100644 frontend/app/common/fonts.css
 create mode 100644 frontend/app/common/form.component.js
 create mode 100644 frontend/app/common/form.css
 create mode 100644 frontend/app/common/header.component.js
 create mode 100644 frontend/app/common/imageCrop.component.js
 create mode 100644 frontend/app/common/index.js
 create mode 100644 frontend/app/common/loader.component.js
 create mode 100644 frontend/app/common/loader.css
 create mode 100644 frontend/app/common/menubutton.component.js
 create mode 100644 frontend/app/common/miscellaneous.component.js
 create mode 100644 frontend/app/common/miscellaneous.css
 create mode 100644 frontend/app/common/modal.component.js
 create mode 100644 frontend/app/common/modal.css
 create mode 100644 frontend/app/common/slider.component.js
 create mode 100644 frontend/app/common/table.component.js
 create mode 100644 frontend/app/common/table.css
 create mode 100644 frontend/app/common/tableIndex.component.js
 create mode 100644 frontend/app/common/upload.css
 create mode 100644 frontend/app/common/upload.helpers.js
 create mode 100644 frontend/app/common/uploadImage.component.js
 create mode 100644 frontend/app/session.js
 create mode 100644 frontend/app/site/actions.js
 create mode 100644 frontend/app/site/app.js
 create mode 100644 frontend/app/site/index.js
 create mode 100644 frontend/app/site/site/site.actions.js
 create mode 100644 frontend/app/site/site/site.reducer.js
 create mode 100644 frontend/app/site/store.js
 create mode 100644 frontend/app/site/types.js
 create mode 100644 frontend/app/site/viewer/viewer.container.js
 create mode 100644 frontend/app/store.js
 create mode 100644 frontend/app/types.js
 create mode 100644 frontend/app/utils/index.js
 create mode 100644 frontend/app/views/graph/components/graph.canvas.js
 create mode 100644 frontend/app/views/graph/components/graph.editor.js
 create mode 100644 frontend/app/views/graph/components/graph.header.js
 create mode 100644 frontend/app/views/graph/components/page.edit.js
 create mode 100644 frontend/app/views/graph/components/page.form.js
 create mode 100644 frontend/app/views/graph/components/page.handle.js
 create mode 100644 frontend/app/views/graph/components/page.new.js
 create mode 100644 frontend/app/views/graph/graph.actions.js
 create mode 100644 frontend/app/views/graph/graph.container.js
 create mode 100644 frontend/app/views/graph/graph.css
 create mode 100644 frontend/app/views/graph/graph.reducer.js
 create mode 100644 frontend/app/views/index.js
 create mode 100644 frontend/app/views/index/components/graph.form.js
 create mode 100644 frontend/app/views/index/containers/graph.edit.js
 create mode 100644 frontend/app/views/index/containers/graph.index.js
 create mode 100644 frontend/app/views/index/containers/graph.new.js
 create mode 100644 frontend/app/views/index/index.container.js
 create mode 100644 frontend/app/views/index/index.css
 create mode 100644 frontend/app/views/page/components/page.editor.js
 create mode 100644 frontend/app/views/page/components/page.header.js
 create mode 100644 frontend/app/views/page/components/tile.edit.js
 create mode 100644 frontend/app/views/page/components/tile.form.js
 create mode 100644 frontend/app/views/page/components/tile.handle.js
 create mode 100644 frontend/app/views/page/components/tile.list.js
 create mode 100644 frontend/app/views/page/components/tile.new.js
 create mode 100644 frontend/app/views/page/cursors.css
 create mode 100644 frontend/app/views/page/page.actions.js
 create mode 100644 frontend/app/views/page/page.container.js
 create mode 100644 frontend/app/views/page/page.css
 create mode 100644 frontend/app/views/page/page.reducer.js
 create mode 100644 frontend/app/views/site/site.actions.js
 create mode 100644 frontend/app/views/site/site.reducer.js
 create mode 100644 frontend/app/views/tile/tile.actions.js
 create mode 100644 frontend/app/views/tile/tile.reducer.js
 create mode 100644 frontend/app/views/upload/components/upload.form.js
 create mode 100644 frontend/app/views/upload/components/upload.index.js
 create mode 100644 frontend/app/views/upload/components/upload.indexOptions.js
 create mode 100644 frontend/app/views/upload/components/upload.menu.js
 create mode 100644 frontend/app/views/upload/components/upload.show.js
 create mode 100644 frontend/app/views/upload/upload.actions.js
 create mode 100644 frontend/app/views/upload/upload.container.js
 create mode 100644 frontend/app/views/upload/upload.css
 create mode 100644 frontend/app/views/upload/upload.reducer.js
 delete mode 100644 frontend/common/app.css
 delete mode 100644 frontend/common/copyToClipboardButton.component.js
 delete mode 100644 frontend/common/fonts.css
 delete mode 100644 frontend/common/form.component.js
 delete mode 100644 frontend/common/form.css
 delete mode 100644 frontend/common/header.component.js
 delete mode 100644 frontend/common/imageCrop.component.js
 delete mode 100644 frontend/common/index.js
 delete mode 100644 frontend/common/loader.component.js
 delete mode 100644 frontend/common/loader.css
 delete mode 100644 frontend/common/menubutton.component.js
 delete mode 100644 frontend/common/miscellaneous.component.js
 delete mode 100644 frontend/common/miscellaneous.css
 delete mode 100644 frontend/common/modal.component.js
 delete mode 100644 frontend/common/modal.css
 delete mode 100644 frontend/common/slider.component.js
 delete mode 100644 frontend/common/table.component.js
 delete mode 100644 frontend/common/table.css
 delete mode 100644 frontend/common/tableIndex.component.js
 delete mode 100644 frontend/common/upload.css
 delete mode 100644 frontend/common/upload.helpers.js
 delete mode 100644 frontend/common/uploadImage.component.js
 delete mode 100644 frontend/session.js
 delete mode 100644 frontend/site/actions.js
 delete mode 100644 frontend/site/app.js
 delete mode 100644 frontend/site/index.js
 delete mode 100644 frontend/site/site/site.actions.js
 delete mode 100644 frontend/site/site/site.reducer.js
 delete mode 100644 frontend/site/store.js
 delete mode 100644 frontend/site/types.js
 delete mode 100644 frontend/site/viewer/viewer.container.js
 delete mode 100644 frontend/store.js
 delete mode 100644 frontend/types.js
 delete mode 100644 frontend/util/index.js
 delete mode 100644 frontend/views/graph/components/graph.canvas.js
 delete mode 100644 frontend/views/graph/components/graph.editor.js
 delete mode 100644 frontend/views/graph/components/graph.header.js
 delete mode 100644 frontend/views/graph/components/page.edit.js
 delete mode 100644 frontend/views/graph/components/page.form.js
 delete mode 100644 frontend/views/graph/components/page.handle.js
 delete mode 100644 frontend/views/graph/components/page.new.js
 delete mode 100644 frontend/views/graph/graph.actions.js
 delete mode 100644 frontend/views/graph/graph.container.js
 delete mode 100644 frontend/views/graph/graph.css
 delete mode 100644 frontend/views/graph/graph.reducer.js
 delete mode 100644 frontend/views/index.js
 delete mode 100644 frontend/views/index/components/graph.form.js
 delete mode 100644 frontend/views/index/containers/graph.edit.js
 delete mode 100644 frontend/views/index/containers/graph.index.js
 delete mode 100644 frontend/views/index/containers/graph.new.js
 delete mode 100644 frontend/views/index/index.container.js
 delete mode 100644 frontend/views/index/index.css
 delete mode 100644 frontend/views/page/components/page.editor.js
 delete mode 100644 frontend/views/page/components/page.header.js
 delete mode 100644 frontend/views/page/components/tile.edit.js
 delete mode 100644 frontend/views/page/components/tile.form.js
 delete mode 100644 frontend/views/page/components/tile.handle.js
 delete mode 100644 frontend/views/page/components/tile.list.js
 delete mode 100644 frontend/views/page/components/tile.new.js
 delete mode 100644 frontend/views/page/cursors.css
 delete mode 100644 frontend/views/page/page.actions.js
 delete mode 100644 frontend/views/page/page.container.js
 delete mode 100644 frontend/views/page/page.css
 delete mode 100644 frontend/views/page/page.reducer.js
 delete mode 100644 frontend/views/site/site.actions.js
 delete mode 100644 frontend/views/site/site.reducer.js
 delete mode 100644 frontend/views/tile/tile.actions.js
 delete mode 100644 frontend/views/tile/tile.reducer.js
 delete mode 100644 frontend/views/upload/components/upload.form.js
 delete mode 100644 frontend/views/upload/components/upload.index.js
 delete mode 100644 frontend/views/upload/components/upload.indexOptions.js
 delete mode 100644 frontend/views/upload/components/upload.menu.js
 delete mode 100644 frontend/views/upload/components/upload.show.js
 delete mode 100644 frontend/views/upload/upload.actions.js
 delete mode 100644 frontend/views/upload/upload.container.js
 delete mode 100644 frontend/views/upload/upload.css
 delete mode 100644 frontend/views/upload/upload.reducer.js

diff --git a/.babelrc b/.babelrc
index 1bac7e8..ed122ce 100644
--- a/.babelrc
+++ b/.babelrc
@@ -4,13 +4,18 @@
       "debug": false,
       "modules": false,
       "useBuiltIns": false
-    }], 
+    }],
     "@babel/preset-react"
   ],
   "plugins": [
     "@babel/plugin-transform-runtime",
     [ "@babel/plugin-proposal-class-properties", { "loose": true } ],
-    "transform-async-to-generator"
+    "transform-async-to-generator",
+    ["module-resolver", {
+      "root": ["./frontend"],
+      "alias": {
+      }
+    }]
   ],
   "env": {
     "production": {
diff --git a/.eslintrc.js b/.eslintrc.js
index 1e9628e..75ffa32 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -19,10 +19,14 @@ module.exports = {
         "sourceType": "module"
     },
     "plugins": [
-        "react"
+        "react",
+        "react-hooks"
     ],
     "rules": {
         "semi": ["error", "never"],
         "react/prop-types": [0],
+        "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
+        "react-hooks/exhaustive-deps": "warn" // Checks effect dependencies
     }
 };
+
diff --git a/frontend/actions.js b/frontend/actions.js
deleted file mode 100644
index 69b06f0..0000000
--- a/frontend/actions.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { bindActionCreators } from 'redux'
-import { actions as crudActions } from './api'
-
-import * as siteActions from './views/site/site.actions'
-
-import { store } from './store'
-
-export default
-    Object.keys(crudActions)
-          .map(a => [a, crudActions[a]])
-          .concat([
-            ['site', siteActions],
-          ])
-          .map(p => [p[0], bindActionCreators(p[1], store.dispatch)])
-          .concat([
-            // ['socket', socketActions],
-          ])
-          .reduce((a,b) => (a[b[0]] = b[1])&&a,{})
\ No newline at end of file
diff --git a/frontend/api/crud.actions.js b/frontend/api/crud.actions.js
deleted file mode 100644
index 25027a5..0000000
--- a/frontend/api/crud.actions.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { crud_fetch } from './crud.fetch'
-import { as_type } from './crud.types'
-import { upload_action } from './crud.upload'
-import { store } from '../store'
-
-export function crud_actions(type) {
-  const fetch_type = crud_fetch(type)
-  return [
-    'index',
-    'show',
-    'create',
-    'update',
-    'destroy',
-  ].reduce((lookup, param) => {
-    lookup[param] = crud_action(type, param, (q) => fetch_type[param](q))
-    return lookup
-  }, {
-    action: (method, fn) => crud_action(type, method, fn),
-    upload: (fd) => upload_action(type, fd),
-    updateOption: (key, value) => dispatch => {
-      dispatch({ type: as_type(type, 'update_option'), key, value })
-    },
-    updateOptions: opt => dispatch => {
-      dispatch({ type: as_type(type, 'update_options'), opt })
-    },
-  })
-}
-
-export const crud_action = (type, method, fn) => (q, load_more) => dispatch => {
-  return new Promise ((resolve, reject) => {
-    if (method === 'index') {
-      if (store.getState()[type].index.loading) {
-        return resolve({})
-      }
-    }
-    dispatch({ type: as_type(type, method + '_loading'), load_more })
-    fn(q).then(data => {
-      if (data.status === 'ok') {
-        dispatch({ type: as_type(type, method), data, load_more })
-        resolve(data)
-      } else {
-        dispatch({ type: as_type(type, method + '_error'), error: data.error })
-        reject(data)
-      }
-    }).catch(e => {
-      console.log(e)
-      dispatch({ type: as_type(type, method + '_error') })
-      reject(e)
-    })
-  })
-}
diff --git a/frontend/api/crud.fetch.js b/frontend/api/crud.fetch.js
deleted file mode 100644
index c88225e..0000000
--- a/frontend/api/crud.fetch.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import fetch from 'node-fetch'
-
-export function crud_fetch(type, tag) {
-  const uri = '/api/v1/' + type + '/' + (tag || '')
-  return {
-    index: q => {
-      return fetch(_get_url(uri, q), _get_headers())
-        .then(req => req.json())
-        .catch(error)
-    },
-    
-    show: id => {
-      let url;
-      if (typeof id === 'object') {
-        url = _get_url(uri + id[0] + '/', id[1])
-      } else {
-        url = _get_url(uri + id + '/')
-      }
-      return fetch(url, _get_headers())
-        .then(req => req.json())
-        .catch(error)
-    },
-    
-    create: data => {
-      return fetch(uri, post(data))
-        .then(req => req.json())
-        .catch(error)
-    },
-
-    update: data => {
-      return fetch(uri + data.id + '/', put(data))
-        .then(req => req.json())
-        .catch(error)
-    },
-
-    destroy: data => {
-      return fetch(uri + data.id + '/', destroy(data))
-        .then(req => req.json())
-        .catch(error)
-    },
-  }
-}
-
-function _get_url(_url, data) {
-  const url = new URL(window.location.origin + _url)
-  if (data) {
-    Object.keys(data).forEach(key => url.searchParams.append(key, data[key]))
-  }
-  return url
-}
-export function _get_headers() {
-  return {
-    method: 'GET',
-    credentials: 'same-origin',
-    headers: {
-      'Accept': 'application/json',
-    },
-  }
-}
-export function post(data) {
-  return {
-    method: 'POST',
-    body: JSON.stringify(data),
-    credentials: 'same-origin',
-    headers: {
-      'Accept': 'application/json',
-      'Content-Type': 'application/json'
-    },
-  }
-}
-export function postBody(data) {
-  return {
-    method: 'POST',
-    body: data,
-    credentials: 'same-origin',
-    headers: {
-      'Accept': 'application/json',
-    },
-  }
-}
-export function put(data) {
-  return {
-    method: 'PUT',
-    body: JSON.stringify(data),
-    credentials: 'same-origin',
-    headers: {
-      'Accept': 'application/json',
-      'Content-Type': 'application/json'
-    },
-  }
-}
-export function destroy(data) {
-  return {
-    method: 'DELETE',
-    body: JSON.stringify(data),
-    credentials: 'same-origin',
-    headers: {
-      'Accept': 'application/json',
-      'Content-Type': 'application/json'
-    },
-  }
-}
-function error(err) {
-  console.warn(err)
-}
diff --git a/frontend/api/crud.reducer.js b/frontend/api/crud.reducer.js
deleted file mode 100644
index 2a7e4c4..0000000
--- a/frontend/api/crud.reducer.js
+++ /dev/null
@@ -1,196 +0,0 @@
-import * as types from 'app/types'
-import { getOrderedIds, getOrderedIdsFromLookup } from 'app/utils'
-import { session } from 'app/session'
-
-export const crudState = (type, options) => ({
-  index: {},
-  show: {},
-  create: {},
-  update: {},
-  destroy: {},
-  lookup: [],
-  ...options,
-})
-
-export const crudReducer = (type) => {
-  const crud_type = types[type]
-  return (state, action) => {
-    switch (action.type) {
-      // index
-      case crud_type.index_loading:
-        return {
-          ...state,
-          index: action.load_more
-          ? { ...state.index, loading: true }
-          : { loading: true },
-        }
-      case crud_type.index:
-        if (action.data.res.length) {
-          return {
-            ...state,
-            index: {
-              lookup: action.data.res.reduce((a, b) => { a[b.id] = b; return a }, action.load_more ? state.index.lookup : {}),
-              order: getOrderedIds(action.data.res, state.options.sort, action.load_more ? state.index.order : []),
-            },
-          }
-        } else {
-          Object.keys(action.data.res).forEach(key => {
-            const el = action.data.res[key]
-            el.key = key
-            el.id = el.id || key
-          })
-          return {
-            ...state,
-            index: {
-              lookup: action.data.res,
-              order: getOrderedIdsFromLookup(action.data.res, state.options.sort),
-            },
-          }
-        }
-      case crud_type.index_error:
-        return {
-          ...state,
-          index: { loading: false, error: true },
-        }
-      case crud_type.index_sort:
-        return {
-          ...state,
-          index: {
-            ...state.index,
-            order: action.data.res.map(b => b.id),
-          },
-        }
-
-      // show
-      case crud_type.show_loading:
-        return {
-          ...state,
-          show: { loading: true },
-        }
-      case crud_type.show:
-        if (!action.data) {
-          return {
-            ...state,
-            show: { not_found: true },
-          }
-        }
-        return {
-          ...state,
-          show: action.data,
-        }
-      case crud_type.show_error:
-        return {
-          ...state,
-          show: { loading: false, error: true },
-        }
-
-      //
-      // create
-      case crud_type.create_loading:
-        return {
-          ...state,
-          create: { loading: true },
-        }
-      case crud_type.create:
-        return {
-          ...state,
-          create: action.data,
-          index: addToIndex(state.index, action.data.res, state.options.sort),
-        }
-      case crud_type.create_error:
-        return {
-          ...state,
-          create: action.data,
-        }
-
-      //
-      // update
-      case crud_type.update_loading:
-        return {
-          ...state,
-          update: { loading: true },
-        }
-      case crud_type.update:
-        return {
-          ...state,
-          update: action.data,
-          index: addToIndex(state.index, action.data.res, state.options.sort),
-          show: (state.show.res && state.show.res.id === action.data.res.id) ? {
-            res: {
-              ...state.show.res,
-              ...action.data.res,
-            }
-          } : state.show
-        }
-      case crud_type.update_error:
-        return {
-          ...state,
-          update: { loading: false, error: true },
-        }
-
-      //
-      // destroy
-      case crud_type.destroy_loading:
-        return {
-          ...state,
-          destroy: { loading: true },
-        }
-      case crud_type.destroy:
-        return {
-          ...state,
-          index: {
-            ...(() => {
-              if (!state.index.lookup) {
-                return {}
-              }
-              delete state.index.lookup[action.data.id]
-              const _id = parseInt(action.data.id)
-              state.index.order = state.index.order.filter(id => id !== _id)
-              return { ...state.index }
-            })()
-          },
-          destroy: { loading: false },
-        }
-      case crud_type.destroy_error:
-        return {
-          ...state,
-          destroy: { error: true },
-        }
-
-      //
-      // options
-      case crud_type.update_option:
-        session.set(type + "." + action.key, action.value)
-        return {
-          ...state,
-          options: {
-            ...state.options,
-            [action.key]: action.value,
-          }
-        }
-
-      case crud_type.update_options:
-        session.setAll(
-          Object.keys(action.opt).reduce((a,b) => { a[type + '.' + b] = action.opt[b]; return a }, {})
-        )
-        return {
-          ...state,
-          options: {
-            ...action.opt,
-          }
-        }
-
-      default:
-        return state
-    }
-  }
-}
-
-const addToIndex = (index, data, sort) => {
-  const lookup = (index && index.lookup) ? {
-    ...index.lookup,
-  } : {}
-  lookup[data.id] = data
-  const order = getOrderedIdsFromLookup(lookup, sort)
-  return { lookup, order }
-}
diff --git a/frontend/api/crud.types.js b/frontend/api/crud.types.js
deleted file mode 100644
index 7b24811..0000000
--- a/frontend/api/crud.types.js
+++ /dev/null
@@ -1,36 +0,0 @@
-
-export const as_type = (a, b) => [a, b].join('_').toUpperCase()
-
-export const with_type = (type, actions) => 
-  actions.reduce((a, b) => (a[b] = as_type(type, b)) && a, {})
-
-export const crud_type = (type, actions=[]) =>
-  with_type(type, actions.concat([
-    'index_loading',
-    'index',
-    'index_error',
-    'index_sort',
-    'show_loading',
-    'show',
-    'show_error',
-    'create_loading',
-    'create',
-    'create_error',
-    'update_loading',
-    'update',
-    'update_error',
-    'destroy_loading',
-    'destroy',
-    'destroy_error',
-    'upload_loading',
-    'upload_progress',
-    'upload_waiting',
-    'upload_complete',
-    'upload_error',
-    'sort',
-    'update_option',
-    'update_options',
-    'loading',
-    'loaded',
-    'error',
-  ]))
diff --git a/frontend/api/crud.upload.js b/frontend/api/crud.upload.js
deleted file mode 100644
index 8a711c7..0000000
--- a/frontend/api/crud.upload.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import { as_type } from './crud.types'
-
-export function crud_upload(type, data, dispatch) {
-  return new Promise( (resolve, reject) => {
-    // console.log(type, data)
-    const { id } = data
-    
-    const fd = new FormData()
-
-    Object.keys(data).forEach(key => {
-      if (key !== 'id') {
-        fd.append(key, data[key])
-      }
-    })
-
-    let url = id ? '/api/v1/' + type + '/' + id + '/'
-                 : '/api/v1/' + type + '/'
-    // console.log(url)
-
-    const xhr = new XMLHttpRequest()
-    xhr.upload.addEventListener("progress", uploadProgress, false)
-    xhr.addEventListener("load", uploadComplete, false)
-    xhr.addEventListener("error", uploadFailed, false)
-    xhr.addEventListener("abort", uploadCancelled, false)
-    xhr.open("POST", url)
-    xhr.send(fd)
-
-    dispatch && dispatch({ type: as_type(type, 'upload_loading')})
-
-    let complete = false
-
-    function uploadProgress (e) {
-      if (e.lengthComputable) {
-        const percent = Math.round(e.loaded * 100 / e.total) || 0
-        if (percent > 99) {
-          dispatch && dispatch({
-            type: as_type(type, 'upload_waiting'),
-            percent,
-            [type]: id,
-          })
-        } else {
-          dispatch && dispatch({
-            type: as_type(type, 'upload_progress'),
-            percent,
-            [type]: id,
-          })
-        }
-      }
-      else {
-        dispatch && dispatch({
-          type: as_type(type, 'upload_error'),
-          error: 'unable to compute upload progress',
-          [type]: id,
-        })
-      }
-    }
-
-    function uploadComplete (e) {
-      let parsed;
-      try {
-        parsed = JSON.parse(e.target.responseText)
-      } catch (e) {
-        dispatch && dispatch({
-          type: as_type(type, 'upload_error'),
-          error: 'upload failed',
-          [type]: id,
-        })
-        reject(e)
-        return
-      }
-      dispatch && dispatch({
-        type: as_type(type, 'upload_complete'),
-        data: parsed,
-        [type]: id,
-      })
-      if (parsed.res) {
-        (parsed.res.length ? parsed.res : [parsed.res]).forEach(file => {
-          dispatch && dispatch({
-            type: as_type('upload', 'create'),
-            data: { res: file },
-          })
-        })
-      }
-      resolve(parsed)
-    }
-
-    function uploadFailed (evt) {
-      dispatch && dispatch({
-        type: as_type(type, 'upload_error'),
-        error: 'upload failed',
-        [type]: id,
-      })
-      reject(evt)
-    }
-
-    function uploadCancelled (evt) {
-      dispatch && dispatch({
-        type: as_type(type, 'upload_error'),
-        error: 'upload cancelled',
-        [type]: id,
-      })
-      reject(evt)
-    }
-  })
-}
-
-export const upload_action = (type, data) => dispatch => crud_upload(type, data, dispatch)
diff --git a/frontend/api/index.js b/frontend/api/index.js
deleted file mode 100644
index 26a8baa..0000000
--- a/frontend/api/index.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { crud_actions } from './crud.actions'
-import * as util from '../util'
-
-/*
-for our crud events, create corresponding actions
-the actions fire a 'loading' event, call the underlying api method, and then resolve.
-so you can do ... 
-  import { folderActions } from '../../api'
-  folderActions.index({ module: 'samplernn' })
-  folderActions.show(12)
-  folderActions.create({ module: 'samplernn', name: 'foo' })
-  folderActions.update(12, { module: 'pix2pix' })
-  folderActions.destroy(12, { confirm: true })
-  folderActions.upload(12, form_data)
-*/
-
-export { util }
-
-export const actions = [
-  'graph',
-  'page',
-  'tile',
-  'upload',
-].reduce((a,b) => (a[b] = crud_actions(b)) && a, {})
diff --git a/frontend/app.js b/frontend/app.js
deleted file mode 100644
index ac1f3e1..0000000
--- a/frontend/app.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { Component } from 'react'
-import { ConnectedRouter } from 'connected-react-router'
-import { Route } from 'react-router'
-
-// import actions from './actions'
-
-import * as views from './views'
-
-const viewList = Object.keys(views).map(name => {
-  const view = views[name]
-  let path, exact = false
-  if (name === 'graph') {
-    path = '/:graph_name'
-    exact = true
-  } else if (name === 'page') {
-    path = '/:graph_name/:page_name'
-    exact = true
-  } else {
-    path = '/' + name
-  }
-  return (
-    <Route key={name} path={path} component={view} exact={exact} />
-  )
-})
-
-export default class App extends Component {
-  componentDidMount() {
-    // actions.modelzoo.index()
-  }
-  render() {
-    return (
-      <ConnectedRouter history={this.props.history}>
-        <div className='app'>
-          {viewList}
-          <Route exact key='root' path='/' render={() => {
-            // redirect to index!!
-            setTimeout(() => this.props.history.push('/index'), 10)
-            return null
-          }} />
-        </div>
-      </ConnectedRouter>
-    )
-  }
-}
diff --git a/frontend/app/actions.js b/frontend/app/actions.js
new file mode 100644
index 0000000..0fba6d1
--- /dev/null
+++ b/frontend/app/actions.js
@@ -0,0 +1,18 @@
+import { bindActionCreators } from 'redux'
+import { actions as crudActions } from './api'
+
+import * as siteActions from 'app/views/site/site.actions'
+
+import { store } from 'app/store'
+
+export default
+    Object.keys(crudActions)
+          .map(a => [a, crudActions[a]])
+          .concat([
+            ['site', siteActions],
+          ])
+          .map(p => [p[0], bindActionCreators(p[1], store.dispatch)])
+          .concat([
+            // ['socket', socketActions],
+          ])
+          .reduce((a,b) => (a[b[0]] = b[1])&&a,{})
\ No newline at end of file
diff --git a/frontend/app/api/crud.actions.js b/frontend/app/api/crud.actions.js
new file mode 100644
index 0000000..86c2948
--- /dev/null
+++ b/frontend/app/api/crud.actions.js
@@ -0,0 +1,51 @@
+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)
+  return [
+    'index',
+    'show',
+    'create',
+    'update',
+    'destroy',
+  ].reduce((lookup, param) => {
+    lookup[param] = crud_action(type, param, (q) => fetch_type[param](q))
+    return lookup
+  }, {
+    action: (method, fn) => crud_action(type, method, fn),
+    upload: (fd) => upload_action(type, fd),
+    updateOption: (key, value) => dispatch => {
+      dispatch({ type: as_type(type, 'update_option'), key, value })
+    },
+    updateOptions: opt => dispatch => {
+      dispatch({ type: as_type(type, 'update_options'), opt })
+    },
+  })
+}
+
+export const crud_action = (type, method, fn) => (q, load_more) => dispatch => {
+  return new Promise ((resolve, reject) => {
+    if (method === 'index') {
+      if (store.getState()[type].index.loading) {
+        return resolve({})
+      }
+    }
+    dispatch({ type: as_type(type, method + '_loading'), load_more })
+    fn(q).then(data => {
+      if (data.status === 'ok') {
+        dispatch({ type: as_type(type, method), data, load_more })
+        resolve(data)
+      } else {
+        dispatch({ type: as_type(type, method + '_error'), error: data.error })
+        reject(data)
+      }
+    }).catch(e => {
+      console.log(e)
+      dispatch({ type: as_type(type, method + '_error') })
+      reject(e)
+    })
+  })
+}
diff --git a/frontend/app/api/crud.fetch.js b/frontend/app/api/crud.fetch.js
new file mode 100644
index 0000000..c88225e
--- /dev/null
+++ b/frontend/app/api/crud.fetch.js
@@ -0,0 +1,105 @@
+import fetch from 'node-fetch'
+
+export function crud_fetch(type, tag) {
+  const uri = '/api/v1/' + type + '/' + (tag || '')
+  return {
+    index: q => {
+      return fetch(_get_url(uri, q), _get_headers())
+        .then(req => req.json())
+        .catch(error)
+    },
+    
+    show: id => {
+      let url;
+      if (typeof id === 'object') {
+        url = _get_url(uri + id[0] + '/', id[1])
+      } else {
+        url = _get_url(uri + id + '/')
+      }
+      return fetch(url, _get_headers())
+        .then(req => req.json())
+        .catch(error)
+    },
+    
+    create: data => {
+      return fetch(uri, post(data))
+        .then(req => req.json())
+        .catch(error)
+    },
+
+    update: data => {
+      return fetch(uri + data.id + '/', put(data))
+        .then(req => req.json())
+        .catch(error)
+    },
+
+    destroy: data => {
+      return fetch(uri + data.id + '/', destroy(data))
+        .then(req => req.json())
+        .catch(error)
+    },
+  }
+}
+
+function _get_url(_url, data) {
+  const url = new URL(window.location.origin + _url)
+  if (data) {
+    Object.keys(data).forEach(key => url.searchParams.append(key, data[key]))
+  }
+  return url
+}
+export function _get_headers() {
+  return {
+    method: 'GET',
+    credentials: 'same-origin',
+    headers: {
+      'Accept': 'application/json',
+    },
+  }
+}
+export function post(data) {
+  return {
+    method: 'POST',
+    body: JSON.stringify(data),
+    credentials: 'same-origin',
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json'
+    },
+  }
+}
+export function postBody(data) {
+  return {
+    method: 'POST',
+    body: data,
+    credentials: 'same-origin',
+    headers: {
+      'Accept': 'application/json',
+    },
+  }
+}
+export function put(data) {
+  return {
+    method: 'PUT',
+    body: JSON.stringify(data),
+    credentials: 'same-origin',
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json'
+    },
+  }
+}
+export function destroy(data) {
+  return {
+    method: 'DELETE',
+    body: JSON.stringify(data),
+    credentials: 'same-origin',
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json'
+    },
+  }
+}
+function error(err) {
+  console.warn(err)
+}
diff --git a/frontend/app/api/crud.reducer.js b/frontend/app/api/crud.reducer.js
new file mode 100644
index 0000000..2a7e4c4
--- /dev/null
+++ b/frontend/app/api/crud.reducer.js
@@ -0,0 +1,196 @@
+import * as types from 'app/types'
+import { getOrderedIds, getOrderedIdsFromLookup } from 'app/utils'
+import { session } from 'app/session'
+
+export const crudState = (type, options) => ({
+  index: {},
+  show: {},
+  create: {},
+  update: {},
+  destroy: {},
+  lookup: [],
+  ...options,
+})
+
+export const crudReducer = (type) => {
+  const crud_type = types[type]
+  return (state, action) => {
+    switch (action.type) {
+      // index
+      case crud_type.index_loading:
+        return {
+          ...state,
+          index: action.load_more
+          ? { ...state.index, loading: true }
+          : { loading: true },
+        }
+      case crud_type.index:
+        if (action.data.res.length) {
+          return {
+            ...state,
+            index: {
+              lookup: action.data.res.reduce((a, b) => { a[b.id] = b; return a }, action.load_more ? state.index.lookup : {}),
+              order: getOrderedIds(action.data.res, state.options.sort, action.load_more ? state.index.order : []),
+            },
+          }
+        } else {
+          Object.keys(action.data.res).forEach(key => {
+            const el = action.data.res[key]
+            el.key = key
+            el.id = el.id || key
+          })
+          return {
+            ...state,
+            index: {
+              lookup: action.data.res,
+              order: getOrderedIdsFromLookup(action.data.res, state.options.sort),
+            },
+          }
+        }
+      case crud_type.index_error:
+        return {
+          ...state,
+          index: { loading: false, error: true },
+        }
+      case crud_type.index_sort:
+        return {
+          ...state,
+          index: {
+            ...state.index,
+            order: action.data.res.map(b => b.id),
+          },
+        }
+
+      // show
+      case crud_type.show_loading:
+        return {
+          ...state,
+          show: { loading: true },
+        }
+      case crud_type.show:
+        if (!action.data) {
+          return {
+            ...state,
+            show: { not_found: true },
+          }
+        }
+        return {
+          ...state,
+          show: action.data,
+        }
+      case crud_type.show_error:
+        return {
+          ...state,
+          show: { loading: false, error: true },
+        }
+
+      //
+      // create
+      case crud_type.create_loading:
+        return {
+          ...state,
+          create: { loading: true },
+        }
+      case crud_type.create:
+        return {
+          ...state,
+          create: action.data,
+          index: addToIndex(state.index, action.data.res, state.options.sort),
+        }
+      case crud_type.create_error:
+        return {
+          ...state,
+          create: action.data,
+        }
+
+      //
+      // update
+      case crud_type.update_loading:
+        return {
+          ...state,
+          update: { loading: true },
+        }
+      case crud_type.update:
+        return {
+          ...state,
+          update: action.data,
+          index: addToIndex(state.index, action.data.res, state.options.sort),
+          show: (state.show.res && state.show.res.id === action.data.res.id) ? {
+            res: {
+              ...state.show.res,
+              ...action.data.res,
+            }
+          } : state.show
+        }
+      case crud_type.update_error:
+        return {
+          ...state,
+          update: { loading: false, error: true },
+        }
+
+      //
+      // destroy
+      case crud_type.destroy_loading:
+        return {
+          ...state,
+          destroy: { loading: true },
+        }
+      case crud_type.destroy:
+        return {
+          ...state,
+          index: {
+            ...(() => {
+              if (!state.index.lookup) {
+                return {}
+              }
+              delete state.index.lookup[action.data.id]
+              const _id = parseInt(action.data.id)
+              state.index.order = state.index.order.filter(id => id !== _id)
+              return { ...state.index }
+            })()
+          },
+          destroy: { loading: false },
+        }
+      case crud_type.destroy_error:
+        return {
+          ...state,
+          destroy: { error: true },
+        }
+
+      //
+      // options
+      case crud_type.update_option:
+        session.set(type + "." + action.key, action.value)
+        return {
+          ...state,
+          options: {
+            ...state.options,
+            [action.key]: action.value,
+          }
+        }
+
+      case crud_type.update_options:
+        session.setAll(
+          Object.keys(action.opt).reduce((a,b) => { a[type + '.' + b] = action.opt[b]; return a }, {})
+        )
+        return {
+          ...state,
+          options: {
+            ...action.opt,
+          }
+        }
+
+      default:
+        return state
+    }
+  }
+}
+
+const addToIndex = (index, data, sort) => {
+  const lookup = (index && index.lookup) ? {
+    ...index.lookup,
+  } : {}
+  lookup[data.id] = data
+  const order = getOrderedIdsFromLookup(lookup, sort)
+  return { lookup, order }
+}
diff --git a/frontend/app/api/crud.types.js b/frontend/app/api/crud.types.js
new file mode 100644
index 0000000..7b24811
--- /dev/null
+++ b/frontend/app/api/crud.types.js
@@ -0,0 +1,36 @@
+
+export const as_type = (a, b) => [a, b].join('_').toUpperCase()
+
+export const with_type = (type, actions) => 
+  actions.reduce((a, b) => (a[b] = as_type(type, b)) && a, {})
+
+export const crud_type = (type, actions=[]) =>
+  with_type(type, actions.concat([
+    'index_loading',
+    'index',
+    'index_error',
+    'index_sort',
+    'show_loading',
+    'show',
+    'show_error',
+    'create_loading',
+    'create',
+    'create_error',
+    'update_loading',
+    'update',
+    'update_error',
+    'destroy_loading',
+    'destroy',
+    'destroy_error',
+    'upload_loading',
+    'upload_progress',
+    'upload_waiting',
+    'upload_complete',
+    'upload_error',
+    'sort',
+    'update_option',
+    'update_options',
+    'loading',
+    'loaded',
+    'error',
+  ]))
diff --git a/frontend/app/api/crud.upload.js b/frontend/app/api/crud.upload.js
new file mode 100644
index 0000000..8c1b265
--- /dev/null
+++ b/frontend/app/api/crud.upload.js
@@ -0,0 +1,107 @@
+import { as_type } from 'app/api/crud.types'
+
+export function crud_upload(type, data, dispatch) {
+  return new Promise( (resolve, reject) => {
+    // console.log(type, data)
+    const { id } = data
+    
+    const fd = new FormData()
+
+    Object.keys(data).forEach(key => {
+      if (key !== 'id') {
+        fd.append(key, data[key])
+      }
+    })
+
+    let url = id ? '/api/v1/' + type + '/' + id + '/'
+                 : '/api/v1/' + type + '/'
+    // console.log(url)
+
+    const xhr = new XMLHttpRequest()
+    xhr.upload.addEventListener("progress", uploadProgress, false)
+    xhr.addEventListener("load", uploadComplete, false)
+    xhr.addEventListener("error", uploadFailed, false)
+    xhr.addEventListener("abort", uploadCancelled, false)
+    xhr.open("POST", url)
+    xhr.send(fd)
+
+    dispatch && dispatch({ type: as_type(type, 'upload_loading')})
+
+    let complete = false
+
+    function uploadProgress (e) {
+      if (e.lengthComputable) {
+        const percent = Math.round(e.loaded * 100 / e.total) || 0
+        if (percent > 99) {
+          dispatch && dispatch({
+            type: as_type(type, 'upload_waiting'),
+            percent,
+            [type]: id,
+          })
+        } else {
+          dispatch && dispatch({
+            type: as_type(type, 'upload_progress'),
+            percent,
+            [type]: id,
+          })
+        }
+      }
+      else {
+        dispatch && dispatch({
+          type: as_type(type, 'upload_error'),
+          error: 'unable to compute upload progress',
+          [type]: id,
+        })
+      }
+    }
+
+    function uploadComplete (e) {
+      let parsed;
+      try {
+        parsed = JSON.parse(e.target.responseText)
+      } catch (e) {
+        dispatch && dispatch({
+          type: as_type(type, 'upload_error'),
+          error: 'upload failed',
+          [type]: id,
+        })
+        reject(e)
+        return
+      }
+      dispatch && dispatch({
+        type: as_type(type, 'upload_complete'),
+        data: parsed,
+        [type]: id,
+      })
+      if (parsed.res) {
+        (parsed.res.length ? parsed.res : [parsed.res]).forEach(file => {
+          dispatch && dispatch({
+            type: as_type('upload', 'create'),
+            data: { res: file },
+          })
+        })
+      }
+      resolve(parsed)
+    }
+
+    function uploadFailed (evt) {
+      dispatch && dispatch({
+        type: as_type(type, 'upload_error'),
+        error: 'upload failed',
+        [type]: id,
+      })
+      reject(evt)
+    }
+
+    function uploadCancelled (evt) {
+      dispatch && dispatch({
+        type: as_type(type, 'upload_error'),
+        error: 'upload cancelled',
+        [type]: id,
+      })
+      reject(evt)
+    }
+  })
+}
+
+export const upload_action = (type, data) => dispatch => crud_upload(type, data, dispatch)
diff --git a/frontend/app/api/index.js b/frontend/app/api/index.js
new file mode 100644
index 0000000..c3d0aa4
--- /dev/null
+++ b/frontend/app/api/index.js
@@ -0,0 +1,24 @@
+import { crud_actions } from 'app/api/crud.actions'
+import * as util from 'app/api/utils'
+
+/*
+for our crud events, create corresponding actions
+the actions fire a 'loading' event, call the underlying api method, and then resolve.
+so you can do ... 
+  import { folderActions } from 'app/api'
+  folderActions.index({ module: 'samplernn' })
+  folderActions.show(12)
+  folderActions.create({ module: 'samplernn', name: 'foo' })
+  folderActions.update(12, { module: 'pix2pix' })
+  folderActions.destroy(12, { confirm: true })
+  folderActions.upload(12, form_data)
+*/
+
+export { util }
+
+export const actions = [
+  'graph',
+  'page',
+  'tile',
+  'upload',
+].reduce((a,b) => (a[b] = crud_actions(b)) && a, {})
diff --git a/frontend/app/app.js b/frontend/app/app.js
new file mode 100644
index 0000000..8dbbd0f
--- /dev/null
+++ b/frontend/app/app.js
@@ -0,0 +1,44 @@
+import React, { Component } from 'react'
+import { ConnectedRouter } from 'connected-react-router'
+import { Route } from 'react-router'
+
+// import actions from 'app/actions'
+
+import * as views from 'app/views'
+
+const viewList = Object.keys(views).map(name => {
+  const view = views[name]
+  let path, exact = false
+  if (name === 'graph') {
+    path = '/:graph_name'
+    exact = true
+  } else if (name === 'page') {
+    path = '/:graph_name/:page_name'
+    exact = true
+  } else {
+    path = '/' + name
+  }
+  return (
+    <Route key={name} path={path} component={view} exact={exact} />
+  )
+})
+
+export default class App extends Component {
+  componentDidMount() {
+    // actions.modelzoo.index()
+  }
+  render() {
+    return (
+      <ConnectedRouter history={this.props.history}>
+        <div className='app'>
+          {viewList}
+          <Route exact key='root' path='/' render={() => {
+            // redirect to index!!
+            setTimeout(() => this.props.history.push('/index'), 10)
+            return null
+          }} />
+        </div>
+      </ConnectedRouter>
+    )
+  }
+}
diff --git a/frontend/app/common/app.css b/frontend/app/common/app.css
new file mode 100644
index 0000000..d9f9946
--- /dev/null
+++ b/frontend/app/common/app.css
@@ -0,0 +1,428 @@
+* { box-sizing: border-box; }
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+body {
+  background: #000;
+  color: #ddd;
+  overflow: hidden;
+  font-family: 'Roboto', sans-serif;
+  font-size: 0.875rem;
+  height: 100%;
+  width: 100%;
+}
+.gray {
+  color: #888;
+}
+
+/* layout */
+
+.container {
+  height: 100%;
+  width: 100%;
+}
+.app {
+  /*display: flex;*/
+  height: 100%;
+  width: 100%;
+}
+.app > div {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+.app .body {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.row > div {
+  margin-right: 1.5rem;
+}
+.row > div:last-child {
+  margin-right: 0;
+}
+
+
+.row.menubar {
+  justify-content: flex-end;
+}
+.menubar > :first-child {
+  flex: 1;
+}
+
+/* lists */
+
+ul {
+  margin: 0.75rem 0;
+}
+li {
+  line-height: 1.5;
+}
+
+/* header */
+
+header {
+  height: 3.125rem;
+  font-size: 0.875rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  background: rgba(16,32,64,0.5);
+  color: white;
+  z-index: 50;
+}
+header b {
+  font-weight: 900;
+}
+header a {
+  color: rgba(255,255,255,0.95);
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+header > div:first-child {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: 1.5rem;
+}
+header > div:last-child {
+  padding-right: 1.5rem;
+}
+header > div > button {
+  padding: 0.25rem;
+  margin: 0 0 0 0.5rem;
+  background: #000;
+  border-color: #888;
+  color: #888;
+}
+header > div > button:hover {
+  border-color: #fff;
+  color: #fff;
+}
+header .vcat-btn {
+  font-size: 0.875rem;
+  padding-left: 0.5rem;
+  letter-spacing: 0.0625rem;
+}
+header > div:last-child a {
+  padding: 0.5rem;
+}
+header .btn-link:focus,
+header .btn-link:hover,
+header .btn-link:active,
+header a:focus,
+header a:hover,
+header a:active {
+  text-decoration: none;
+  color: white;
+}
+header a:focus,
+header a:hover,
+header a:active {
+  color: white;
+}
+.menuToggle {
+  width: 1.625rem;
+  height: 1.625rem;
+  cursor: pointer;
+  line-height: 1;
+}
+header a.navbar-brand {
+  font-size: .8rem;
+}
+
+header .username {
+  cursor: pointer;
+}
+
+/* headings */
+
+h1 {
+  color: #eee;
+  margin-bottom: 1.25rem;
+  font-size: 1.5rem;
+  font-weight: normal;
+}
+div:first-child > h1:first-child,
+.menuButtons + div > h1:first-child {
+  margin-top: 0;
+}
+h2 {
+  color: #eee;
+  font-size: 1.25rem;
+  font-weight: normal;
+}
+h3 {
+  color: #eee;
+  margin-top: 0;
+  margin-bottom: 1.25rem;
+  font-size: 1.0rem;
+  font-weight: normal;
+}
+p {
+  margin: 1.25rem 0;
+  line-height: 1.5;
+}
+.byline {
+  color: #888;
+  font-size: 0.75rem;
+  margin-top: 0.25rem;
+  margin-bottom: 1.25rem;
+}
+
+/* links */
+
+b {
+  color: #fff;
+}
+a {
+  text-decoration: underline;
+  color: #8df;
+}
+
+/* menu button */
+
+.menuButtons {
+  width: 2.5rem;
+  min-height: 18rem;
+}
+.menuButton {
+  position: relative;
+  text-align: center;
+  text-transform: uppercase;
+  font-size: 0.625rem;
+  color: #333;
+  text-decoration: none;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 2.5rem;
+  margin-bottom: 0.75rem;
+}
+.menuButton .icon {
+  background-color: #fff;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 1px solid;
+  border-color: #888;
+  margin-bottom: 0.3rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: border-color 0.1s;
+  border-radius: 0.125rem;
+}
+.menuButton svg {
+  width: 80%;
+  fill: #888;
+}
+.menuButton:hover .icon {
+  background-color: #eef;
+  border-color: #000;
+}
+.menuButton:hover svg {
+  fill: #000;
+}
+
+.menuButton.small {
+  width: 2.0rem;
+  margin-bottom: 0;
+  margin-right: 0.1875rem;
+}
+.menuButton.small .icon {
+  border: 0;
+  border-color: #888;
+  margin-bottom: 0;
+  width: 2.0rem;
+  height: 2.0rem;
+  border-radius: 0.0625rem;
+}
+.menuButton.small svg {
+  fill: #888;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.menuButton.small .icon:hover {
+  border-color: #11f;
+  background-color: #11f;
+}
+.menuButton.small:hover svg {
+  fill: #fff;
+}
+.results.th .menuButton.small {
+  width: 1.5rem;
+}
+.results.th .menuButton.small .icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.results.th .menuButton.small svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.menuButton.small.active .icon {
+  border-color: #11f;
+  background-color: #11f;
+}
+.menuButton.small.active svg {
+  fill: #fff;
+}
+.menuButton.small.active:hover .icon {
+  border-color: #fff;
+  background-color: #11f;
+}
+.menuButton.small.active:hover svg {
+  fill: #fff;
+}
+
+/* rows - like a table */
+
+.rows {
+  width: 100%;
+}
+.rows .row {
+  width: 100%;
+}
+.rows .row:nth-of-type(2n+1) {
+  background: #f8f8f8;
+}
+.rows .row:nth-of-type(2n+2) {
+  background: #eeeeee;
+}
+.rows .row:hover {
+  background: #d8d8d8;
+}
+.rows .row > div,
+.rows .row a > div {
+  padding: 0.75rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+}
+.rows .row div.title {
+  width: 10rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.rows .row div.string,
+.rows .row div.str {
+  min-width: 6rem;
+}
+.rows .row div.bool {
+  width: 4rem;
+  overflow: visible;
+  text-align: center;
+}
+.rows .row div.color {
+  width: 4rem;
+  overflow: visible;
+  text-align: center;
+}
+.rows .row div.date {
+  min-width: 10rem;
+}
+.rows .row div.int,
+.rows .row div.float {
+  text-align: right;
+  min-width: 6rem;
+}
+.rows .row.heading div.int,
+.rows .row.heading div.float {
+  text-align: center;
+}
+.rows .row div.text {
+  flex: 1;
+  max-width: 20rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rows .row.heading div {
+  text-transform: capitalize;
+  font-weight: bold;
+  background: #f8f8f8;
+}
+.rows .row.heading:hover {
+  background: #f8f8f8;
+}
+
+/* misc ui */
+
+pre, code, .license {
+  font-family: Menlo, monospace;
+  font-size: 0.75rem;
+  line-height: 2;
+}
+.swatch {
+  display: inline-block;
+  width: 0.75rem;
+  height: 0.75rem;
+  border: 1px solid #333;
+}
+.dot {
+  display: inline-block;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+}
+.light {
+  color: #888;
+}
+.pill {
+  display: inline-block;
+  padding: 0.125rem;
+  width: 2.5rem;
+  text-align: center;
+  border-radius: 0.5rem;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+.pill.yes {
+  background: #11f;
+  color: #fff;
+}
+.pill.no {
+  color: #ccc;
+  border: 1px solid;
+}
+
+/* columns (of tags) */
+
+.form .columnCells {
+  padding-top: 0.25rem
+}
+.columnCells .column {
+  margin-top: 0.25rem;
+}
+.columnCells .column > div {
+  max-width: 100%;
+  padding: 0 0.375rem 0.375rem 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.columnCells .selected {
+  color: #11f;
+}
\ No newline at end of file
diff --git a/frontend/app/common/copyToClipboardButton.component.js b/frontend/app/common/copyToClipboardButton.component.js
new file mode 100644
index 0000000..0defba5
--- /dev/null
+++ b/frontend/app/common/copyToClipboardButton.component.js
@@ -0,0 +1,24 @@
+import React, { Component } from 'react'
+import { writeToClipboard } from 'app/utils'
+
+export default class CopyToClipboardButton extends Component {
+  state = {
+    copied: false,
+  }
+
+  handleClick() {
+    writeToClipboard(this.props.data)
+    this.setState({ copied: true })
+  }
+
+  render() {
+    return (
+      <button
+        className={this.state.copied ? 'copyButton copied' : 'copyButton'}
+        onClick={this.handleClick.bind(this)}
+      >
+        {this.state.copied ? 'Copied!' : 'Copy'}
+      </button>
+    )
+  }
+}
diff --git a/frontend/app/common/fonts.css b/frontend/app/common/fonts.css
new file mode 100644
index 0000000..c782885
--- /dev/null
+++ b/frontend/app/common/fonts.css
@@ -0,0 +1,55 @@
+@font-face {
+  font-family: 'Roboto';
+  src: url('/static/fonts/Roboto-Bold.ttf') format('truetype');
+  font-weight: bold;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('/static/fonts/Roboto-BoldItalic.ttf') format('truetype');
+  font-weight: bold;
+  font-style: italic;
+}
+/*
+@font-face {
+  font-family: 'Roboto';
+  src: url('/static/fonts/Roboto-Light.ttf') format('truetype');
+  font-weight: 100;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('/static/fonts/Roboto-LightItalic.ttf') format('truetype');
+  font-weight: 100;
+}
+*/
+@font-face {
+  font-family: 'Roboto';
+  src: url('/static/fonts/Roboto-Medium.ttf') format('truetype');
+  font-weight: 300;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('/static/fonts/Roboto-MediumItalic.ttf') format('truetype');
+  font-style: italic;
+  font-weight: 300;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('/static/fonts/Roboto-Regular.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('/static/fonts/Roboto-Italic.ttf') format('truetype');
+  font-style: italic;
+}
+/*
+@font-face {
+  font-family: 'Roboto';
+  src: url('/static/fonts/Roboto-Thin.ttf') format('truetype');
+  font-weight: 100;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('/static/fonts/Roboto-ThinItalic.ttf') format('truetype');
+  font-weight: 100;
+}
+*/
\ No newline at end of file
diff --git a/frontend/app/common/form.component.js b/frontend/app/common/form.component.js
new file mode 100644
index 0000000..cf3e466
--- /dev/null
+++ b/frontend/app/common/form.component.js
@@ -0,0 +1,220 @@
+import React, { Component } from 'react';
+import { courtesyS } from 'app/utils'
+
+export const TextInput = props => (
+  <label className={props.error ? 'error' : 'text'}>
+    {props.title && <span>{props.title}</span>}
+    <input
+      type="text"
+      required={props.required}
+      onChange={props.onChange}
+      name={props.name}
+      value={props.data[props.name]}
+      placeholder={props.placeholder}
+      autoComplete={props.autoComplete}
+    />
+  </label>
+)
+
+export const LabelDescription = props => (
+  <label className={'text description'}>
+    <span>{props.title}</span>
+    <span>{props.children}</span>
+  </label>
+)
+
+export const NumberInput = props => (
+  <label className={props.error ? 'error' : 'text'}>
+    <span>{props.title}</span>
+    <input
+      type="number"
+      required={props.required}
+      onChange={props.onChange}
+      name={props.name}
+      value={props.data[props.name]}
+      min={props.min}
+      max={props.max}
+      step={props.step || 1}
+    />
+  </label>
+)
+
+export const ColorInput = props => (
+  <label className={props.error ? 'error color' : 'text color'}>
+    <span>{props.title}</span>
+    <input
+      type="color"
+      required={props.required}
+      onChange={props.onChange}
+      name={props.name}
+      value={props.data[props.name]}
+    />
+    <input
+      type="text"
+      required={props.required}
+      onChange={props.onChange}
+      name={props.name}
+      value={props.data[props.name]}
+    />
+  </label>
+)
+
+export const TextArea = props => (
+  <label className={props.error ? 'textarea error' : 'textarea'}>
+    {props.title && <span>{props.title}</span>}
+    <textarea
+      onChange={props.onChange}
+      name={props.name}
+      value={props.data[props.name]}
+    />
+  </label>
+)
+
+export const Checkbox = props => (
+  <label className="checkbox">
+    <input
+      type="checkbox"
+      name={props.name}
+      value={1}
+      checked={props.checked}
+      onChange={(e) => props.onChange(props.name, e.target.checked)}
+    />
+    <span>{props.label}</span>
+  </label>
+)
+
+export const Radio = props => {
+  return (
+    <label className="radio">
+      <input
+        type="radio"
+        name={props.name}
+        value={props.value}
+        checked={props.value === props.currentValue}
+        onChange={() => props.onChange(props.name, props.value)}
+      />
+      <span>{props.label}</span>
+    </label>
+  )
+}
+
+export class Select extends Component {
+  state = {
+    focused: false,
+  }
+
+  render() {
+    const { name, selected, options, defaultOption, title, loading, onChange, className } = this.props
+    if (loading) {
+      return <label className='select'><div>Loading...</div></label>
+    }
+    const { focused } = this.state
+    return (
+      <label>
+        {title && <span>{title}</span>}
+        <div className={(focused ? 'select focus' : 'select') + " " + (className || "")}>
+          <div>{(options.find(opt => opt.name === selected) || {label: defaultOption}).label}</div>
+          <select
+            onFocus={() => this.setState({ focused: true })}
+            onBlur={() => this.setState({ focused: false })}
+            onChange={e => {
+              onChange(name, e.target.value)
+              // this.setState({ focused: false })
+            }}
+            value={selected || "__default__"}
+          >
+            {!selected && defaultOption && <option value="__default__">{defaultOption}</option>}
+            {options.map((option, i) => (
+              <option
+                key={option.name}
+                value={option.name}
+                disabled={option.disabled}
+              >{option.label}</option>
+            ))}
+          </select>
+        </div>
+      </label>
+    )
+  }
+}
+
+export class FileInputField extends Component {
+  state = {
+    count: 0,
+  }
+
+  handleChange(files) {
+    const { multiple, onChange } = this.props
+    if (!files) {
+      this.setState({ count: 0 })
+    } else {
+      this.setState({ count: multiple ? files.length : 0 })
+    }
+    onChange(files)
+  }
+  
+  render() {
+    const { error, title, label, required, multiple, mime, name } = this.props
+    return (
+      <label className={error ? 'error' : 'text fileInput'}>
+        <span>{title}</span>
+        <div className="row">
+          <button>
+            {label || "Choose files"}
+            <FileInput
+              mime={mime}
+              multiple={multiple}
+              onChange={this.handleChange.bind(this)}
+            />
+          </button>
+          {!!this.state.count && <span>{courtesyS(this.state.count, "file")}{" selected"}</span>}
+        </div>
+      </label>
+    )
+  }
+}
+
+export class FileInput extends Component {
+  handleChange(e) {
+    let { multiple, mime } = this.props
+    if (!mime) {
+      mime = "image/"
+    }
+    const files = e.dataTransfer ? e.dataTransfer.files : e.target.files
+    let i
+    let file, selectedFiles = []
+    for (i = 0; i < files.length; i++) {
+      file = files[i]
+      if (file && file.type.indexOf(mime) === 0) {
+        if (multiple) {
+          selectedFiles.push(file)
+        } else {
+          break
+        }
+      }
+    }
+    if (multiple && selectedFiles.length) {
+      this.props.onChange(selectedFiles)
+    } else if (!multiple && file) {
+      this.props.onChange(file)
+    } else {
+      this.props.onChange()
+    }
+  }
+
+  render() {
+    return (
+      <input type="file" multiple={!!this.props.multiple} onChange={this.handleChange.bind(this)} />
+    )
+  }
+}
+
+export const SubmitButton = (props) => (
+  <label>
+    <span></span>
+    <button
+      className={props.className ? "submit " + props.className : "submit"}
+      onClick={props.onClick}
+    >{props.title}</button>
+  </label>
+)
diff --git a/frontend/app/common/form.css b/frontend/app/common/form.css
new file mode 100644
index 0000000..dbfa01f
--- /dev/null
+++ b/frontend/app/common/form.css
@@ -0,0 +1,323 @@
+/* label */
+
+label {
+  display: flex;
+  min-width: 10rem;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+}
+
+.label {
+  display: flex;
+  min-width: 10rem;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  cursor: pointer;
+}
+
+/* form (stock forms) */
+
+form label,
+form .label {
+  width: 100%;
+  margin-bottom: 0.5rem;
+}
+form label span,
+form .label > span {
+  display: inline-block;
+  min-width: 8rem;
+  padding: 0.5rem 0;
+}
+form label.textarea {
+  align-items: flex-start;
+}
+form input[type="checkbox"] {
+  margin: -0.0625rem 0.625rem 0 8rem;
+}
+
+/* form errors */
+
+form .error span {
+  color: #f11;
+}
+form .error input[type=text],
+form .error input[type=number],
+form .error input[type=password] {
+  border-color: #f11;
+}
+
+/* form field descriptions */
+
+form label.description {
+  cursor: normal;
+  font-size: small;
+  color: #ddd;
+}
+form label.description span {
+  padding-top: 0;
+}
+
+/* text input */
+
+input[type=text],
+input[type=number],
+input[type=password] {
+  padding: 0.5rem;
+  border: 1px solid #ddd;
+  color: #fff;
+  background: #111;
+  font-family: 'Roboto', sans-serif;
+  font-size: 0.875rem;
+  width: 15rem;
+  border-radius: 0.125rem;
+}
+
+input[type=text]:focus,
+input[type=number]:focus,
+input[type=password]:focus {
+  border: 1px solid #84f;
+  background: #000;
+}
+
+textarea {
+  width: 20rem;
+  height: 10rem;
+  padding: 0.5rem;
+  border: 1px solid #ddd;
+  font-family: 'Roboto', sans-serif;
+  background: #111;
+  color: #fff;
+  font-size: 0.875rem;
+  border-radius: 0.125rem;
+}
+textarea:focus {
+  border: 1px solid #84f;
+  background: #000;
+}
+
+/* checkbox */
+
+input[type=checkbox] {
+  position: relative;
+  display: block;
+  width: 0.75rem;
+  height: 0.75rem;
+  margin-right: 0.625rem;
+  cursor: pointer;
+  outline: 0;
+}
+input[type=checkbox] + span {
+  font-size: 0.825rem;
+  text-transform: uppercase;
+  color: #444;
+}
+input[type=checkbox]:hover + span {
+  color: #000;
+}
+input[type=checkbox]:focus + span {
+  color: #84f;
+}
+input[type="checkbox"]:checked + span {
+  color: #000;
+}
+input[type="checkbox"]:focus:checked + span {
+  color: #84f;
+}
+
+input[type="checkbox"]:after {
+  position: relative;
+  display: block;
+  left: 0;
+  width: 0.75rem;
+  height: 0.75rem;
+  border: 0.0625rem solid #ddd;
+  content: "";
+  background-color: #fff;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+  transition: background-color 0.1s;
+  border-radius: 0.125rem;
+}
+input[type=checkbox]:focus:after {
+  border-color: #84f;
+}
+input[type="checkbox"]:checked:after {
+  border-color: #84f;
+  background-color: #84f;
+  background-image: url(/static/img/check.svg);
+  background-size: cover;
+}
+
+/* select */
+
+.select {
+  position: relative;
+  width: 9rem;
+  min-width: auto;
+  background: #111;
+  border-radius: 0.125rem;
+  border: 1px solid #ddd;
+  padding: 0.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 1.25rem;
+  cursor: pointer;
+}
+.select select {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+.select:after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 0.375rem;
+  transform: translateY(-0.125rem);
+  width: 0; 
+  height: 0; 
+  border-left: 0.375rem solid transparent;
+  border-right: 0.375rem solid transparent;
+  border-top: 0.375rem solid #ddd;
+}
+.select.focus {
+  border-color: #84f;
+  background: #000;
+}
+.select.focus:after {
+  border-top-color: #84f;
+}
+.select:hover {
+  background-color: #000;
+}
+.select div {
+  width: calc(100% - 1.025rem);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.select.wide {
+  width: 20rem;
+}
+
+/* button */
+
+button {
+  position: relative;
+  background: #333;
+  border-radius: 0.125rem;
+  color: #ddd;
+  border: 1px solid;
+  padding: 0.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: 'Roboto', sans-serif;
+  font-size: 0.875rem;
+  cursor: pointer;
+  /*text-transform: uppercase;*/
+  transition: all 0.1s;
+}
+button:hover {
+  background-color: #000;
+  border-color: #fff;
+}
+button.process {
+  padding-left: 1.5rem;
+}
+button.process:after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0.625rem;
+  transform: translateY(-0.375rem);
+  width: 0; 
+  height: 0; 
+  border-top: 0.375rem solid transparent;
+  border-bottom: 0.375rem solid transparent;
+  border-left: 0.375rem solid #888;
+}
+button.process:focus:after {
+  border-left-color: #84f;
+}
+button:focus {
+  background: #000;
+  border-color: #fff;
+  color: #fff;
+  outline: 0;
+}
+button:disabled {
+  background: #eee;
+  color: #888;
+  border-color: #bbb;
+  pointer-events: none;  
+}
+button:disabled:after {
+  border-left-color: #aaa;
+}
+.buttons button {
+  margin-right: 0.75rem;
+}
+button.submit {
+  border-color: #d8f;
+  color: #fff;
+  background: #111;
+}
+button.submit:focus,
+button.submit:hover {
+  border-color: #fff;
+  color: #fff;
+  background: #222;
+}
+button.submit.destroy {
+  background-color: rgba(16,16,16,0.5);
+  border-color: #b11;
+  color: #d11;
+}
+button.submit.destroy:focus,
+button.submit.destroy:hover {
+  background: #000;
+  border-color: #f33;
+  color: #f33;
+}
+
+/* file upload, should always be inside a container */
+
+input[type=file] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+::-webkit-file-upload-button { cursor: pointer; }
+.fileInput > .row {
+  align-items: center;
+}
+.fileInput > .row > span {
+  padding-left: 1rem;
+}
+
+/* copy button */
+
+.copyButton {
+  border-color: transparent;
+  color: #84f;
+  font-size: 0.675rem;
+  padding: 0.25rem;
+  margin-left: 0.25rem;
+}
+.desktop .copyButton:hover {
+  border-color: #84f;
+}
+.copyButton.copied {
+  color: #84f;
+}
\ No newline at end of file
diff --git a/frontend/app/common/header.component.js b/frontend/app/common/header.component.js
new file mode 100644
index 0000000..115c9b4
--- /dev/null
+++ b/frontend/app/common/header.component.js
@@ -0,0 +1,41 @@
+import React from 'react'
+// import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
+import { session } from 'app/session'
+
+function Header(props) {
+  return (
+    <header>
+      <div>
+        <Link to="/" className="logo"><b>{props.site.siteTitle}</b></Link>
+      </div>
+      <div>
+        <span className='username' onClick={() => changeUsername()}>
+          {' → '}{props.username}
+        </span>
+      </div>
+    </header>
+  )
+}
+
+const changeUsername = () => {
+  const username = prompt("Please enter your username:", session('username'))
+  if (username && username.length) {
+    session.set('username', username)
+    document.querySelector('Header div span').innerText = ' → ' + username // very naughty
+  }
+}
+
+
+const mapStateToProps = (state) => ({
+  // auth: state.auth,
+  site: state.site,
+  username: session.get('username'),
+  // isAuthenticated: state.auth.isAuthenticated,
+})
+
+const mapDispatchToProps = (dispatch) => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Header) 
diff --git a/frontend/app/common/imageCrop.component.js b/frontend/app/common/imageCrop.component.js
new file mode 100644
index 0000000..f687d90
--- /dev/null
+++ b/frontend/app/common/imageCrop.component.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import { cropImage } from 'app/utils'
+
+export default class ImageCrop extends Component {
+  state = {
+    cropURL: null
+  }
+
+  componentDidMount() {
+    const { url, crop } = this.props
+    this.crop(url, crop)
+  }
+
+  componentDidUpdate(prevProps) {
+    const { url, crop } = this.props
+    if (this.props.crop !== prevProps.crop) {
+      cropImage(url, crop).then(canvas =>{
+        const cropURL = canvas.toDataURL('image/jpeg', 0.8)
+        this.setState({ cropURL })
+      })
+    }
+  }
+
+  crop(url, crop) {
+    cropImage(url, crop).then(canvas =>{
+      const cropURL = canvas.toDataURL('image/jpeg', 0.8)
+      this.setState({ cropURL })
+    })
+  }
+
+
+  render() {
+    const { cropURL } = this.state
+    if (!cropURL) {
+      return null
+    }
+    return (
+      <img src={cropURL} className='preview' />
+    )
+  }
+}
diff --git a/frontend/app/common/index.js b/frontend/app/common/index.js
new file mode 100644
index 0000000..5c0dc50
--- /dev/null
+++ b/frontend/app/common/index.js
@@ -0,0 +1,32 @@
+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 {
+  Swatch, Dot, Columns, Statistic, Detections, Progress
+} from './miscellaneous.component'
+export { default as TableIndex } from './tableIndex.component'
+export { Loader } from './loader.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/frontend/app/common/loader.component.js b/frontend/app/common/loader.component.js
new file mode 100644
index 0000000..f0a0c69
--- /dev/null
+++ b/frontend/app/common/loader.component.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+
+import './loader.css'
+
+const Loader = () => (
+  <div>
+    <div className='circular-loader color'>
+      <div className="stroke">
+        <div className="stroke-left"></div>
+        <div className="stroke-right"></div>
+      </div>
+    </div>
+  </div>
+)
+
+export { Loader }
diff --git a/frontend/app/common/loader.css b/frontend/app/common/loader.css
new file mode 100644
index 0000000..f047e8e
--- /dev/null
+++ b/frontend/app/common/loader.css
@@ -0,0 +1,125 @@
+
+@keyframes L_circle_rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes L_stroke_rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(1080deg);
+  }
+}
+@keyframes L_stroke_fix {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(135deg);
+  }
+  100% {
+    transform: rotate(270deg);
+  }
+}
+@keyframes L_stroke_left_grow {
+  0% {
+    transform: rotate(-5deg);
+  }
+  50% {
+    transform: rotate(-140deg);
+  }
+  100% {
+    transform: rotate(-5deg);
+  }
+}
+@keyframes L_stroke_right_grow {
+  0% {
+    transform: rotate(5deg);
+  }
+  50% {
+    transform: rotate(140deg);
+  }
+  100% {
+    transform: rotate(5deg);
+  }
+}
+.circular-loader .stroke::before, .circular-loader .stroke-right::before, .circular-loader .stroke-left::before {
+  content: "";
+  display: block;
+}
+
+.circular-loader, .circular-loader .stroke, .circular-loader .stroke::before, .circular-loader .stroke-right, .circular-loader .stroke-right::before, .circular-loader .stroke-left, .circular-loader .stroke-left::before {
+  width: 2em;
+  height: 2em;
+  box-sizing: border-box;
+  border-radius: 50%;
+}
+
+.circular-loader .stroke::before, .circular-loader .stroke-right::before, .circular-loader .stroke-left::before {
+  border-style: solid;
+  border-width: 0.21429em;
+  border-color: #778;
+}
+
+.circular-loader .stroke-right, .circular-loader .stroke-left::before {
+  position: absolute;
+  clip: rect(0 2em 2em 1em);
+}
+.circular-loader .stroke-right::before, .circular-loader .stroke-left {
+  position: absolute;
+  clip: rect(0 1em 2em 0);
+}
+.circular-loader .stroke::before {
+  position: absolute;
+  clip: rect(0 1.05em 1em 0.95em);
+}
+
+/**/
+.circular-loader {
+  animation: L_circle_rotate 1568.23529ms linear infinite both;
+}
+.circular-loader .stroke::before,
+.circular-loader .stroke-right, .circular-loader .stroke-left {
+  animation: L_stroke_fix 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+.circular-loader .stroke {
+  animation: L_stroke_rotate 5332ms steps(4) infinite both;
+}
+.circular-loader .stroke-right::before {
+  animation: L_stroke_right_grow 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+.circular-loader .stroke-left::before {
+  animation: L_stroke_left_grow 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+@keyframes color_K {
+  0%, 15% {
+    border-color: #44444f;
+  }
+  25%, 40% {
+    border-color: #bbbbc7;
+  }
+  50%, 65% {
+    border-color: #66666f;
+  }
+  75%, 90% {
+    border-color: #ccccd4;
+  }
+  100% {
+    border-color: #44444f;
+  }
+}
+.circular-loader.color .stroke::before {
+  animation: L_stroke_fix 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, color_K 5332ms linear infinite both;
+}
+.circular-loader.color .stroke-right::before {
+  animation: L_stroke_right_grow 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, color_K 5332ms linear infinite both;
+}
+.circular-loader.color .stroke-left::before {
+  animation: L_stroke_left_grow 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, color_K 5332ms linear infinite both;
+}
+
diff --git a/frontend/app/common/menubutton.component.js b/frontend/app/common/menubutton.component.js
new file mode 100644
index 0000000..5fd8e2f
--- /dev/null
+++ b/frontend/app/common/menubutton.component.js
@@ -0,0 +1,128 @@
+import React, { Component } from 'react'
+import { Route, Link } from 'react-router-dom'
+import { history } from 'app/store'
+
+const icons = {
+  upload: {
+    title: 'Upload',
+    image: '/static/img/add.svg',
+    // svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>,
+    // svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" /></svg>
+    // svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9,10V16H15V10H19L12,3L5,10H9M12,5.8L14.2,8H13V14H11V8H9.8L12,5.8M19,18H5V20H19V18Z" /></svg>
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0,0h24v24H0V0z"/><path d="M19,12v7H5v-7H3v7c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-7H19z M11,6.83L8.41,9.41L7,8l5-5l5,5l-1.41,1.41L13,6.83v9.67h-2 V6.83z"/></svg>,
+  },
+  new: {
+    title: 'New',
+    image: '/static/img/add.svg',
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>,
+    // svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" /></svg>,
+    // svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9,10V16H15V10H19L12,3L5,10H9M12,5.8L14.2,8H13V14H11V8H9.8L12,5.8M19,18H5V20H19V18Z" /></svg>
+  },
+  save: {
+    title: 'Export',
+    image: '/static/img/save.svg',
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2v9.67z"/></svg>,
+  },
+  saved: {
+    title: 'Saved',
+    image: '/static/img/folder.svg',
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M9.17 6l2 2H20v10H4V6h5.17M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>,
+  },
+  recent: {
+    title: 'Recent',
+    image: '/static/img/history.svg',
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.25 2.52.77-1.28-3.52-2.09V8z"/></svg>,
+  },
+  random: {
+    title: 'Random',
+    image: '/static/img/random.svg',
+    // svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"/></svg>,
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/><circle cx="7.5" cy="16.5" r="1.5"/><circle cx="7.5" cy="7.5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="16.5" cy="16.5" r="1.5"/><circle cx="16.5" cy="7.5" r="1.5"/></svg>
+  },
+  menu: {
+    title: 'Menu',
+    image: '/static/img/menu.svg',
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>,
+  },
+  list: {
+    title: 'List',
+    image: '/static/img/view_list.svg',
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path d="M3 5v14h17V5H3zm4 2v2H5V7h2zm-2 6v-2h2v2H5zm0 2h2v2H5v-2zm13 2H9v-2h9v2zm0-4H9v-2h9v2zm0-4H9V7h9v2z"/></svg>,
+  },
+  edit: {
+    title: 'Edit',
+    image: '/static/img/edit.svg',
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"/></svg>
+  },
+  delete: {
+    title: 'Delete',
+    image: '/static/img/delete.svg',
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"/></svg>
+  },
+  back: {
+    title: 'Back',
+    image: '/static/img/back.svg',
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path d="M17.51 3.87L15.73 2.1 5.84 12l9.9 9.9 1.77-1.77L9.38 12l8.13-8.13z"/></svg>,
+  },
+  image_search: {
+    title: 'Search',
+    image: '/static/img/image_search.svg',
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M18 13v7H4V6h5.02c.05-.71.22-1.38.48-2H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-5l-2-2zm-1.5 5h-11l2.75-3.53 1.96 2.36 2.75-3.54zm2.8-9.11c.44-.7.7-1.51.7-2.39C20 4.01 17.99 2 15.5 2S11 4.01 11 6.5s2.01 4.5 4.49 4.5c.88 0 1.7-.26 2.39-.7L21 13.42 22.42 12 19.3 8.89zM15.5 9C14.12 9 13 7.88 13 6.5S14.12 4 15.5 4 18 5.12 18 6.5 16.88 9 15.5 9z"/><path fill="none" d="M0 0h24v24H0z"/></svg>,
+  },
+  search: {
+    title: 'Search',
+    image: '/static/img/search.svg',
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/></svg>,
+  },
+  open_in_new: {
+    title: 'Open',
+    image: '/static/img/open_in_new.svg',
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></svg>,
+  },
+  test: {
+    title: 'Test',
+    image: '/static/img/fastfood.svg',
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.06 22.99h1.66c.84 0 1.53-.64 1.63-1.46L23 5.05h-5V1h-1.97v4.05h-4.97l.3 2.34c1.71.47 3.31 1.32 4.27 2.26 1.44 1.42 2.43 2.89 2.43 5.29v8.05zM1 21.99V21h15.03v.99c0 .55-.45 1-1.01 1H2.01c-.56 0-1.01-.45-1.01-1zm15.03-7c0-8-15.03-8-15.03 0h15.03zM1.02 17h15v2h-15z"/><path fill="none" d="M0 0h24v24H0z"/></svg>
+  },
+  // export: {
+  //   title: 'Export',
+  //   image: '/static/img/export.svg',
+  //   svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0,0h24v24H0V0z"/><path d="M19,12v7H5v-7H3v7c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-7H19z M11,6.83L8.41,9.41L7,8l5-5l5,5l-1.41,1.41L13,6.83v9.67h-2 V6.83z"/></svg>,
+  // },
+}
+
+const goBack = () => history.goBack()
+
+export const MenuButton = ({ name, href, onClick, label, children, className }) => {
+  const { svg, title } = icons[name]
+  if (name === 'back') {
+    onClick = goBack
+  }
+  if (href) {
+    return (
+      <Link to={href} className={className || 'menuButton'}>
+        <div className='icon'>{svg}</div>
+        {label === false ? "" : title}
+        {children}
+      </Link>
+    )
+  } else {
+    return (
+      <div className={className || 'menuButton'} onClick={onClick}>
+        <div className='icon'>{svg}</div>
+        {label === false ? "" : title}
+        {children}
+      </div>
+    )
+  }
+}
+
+export const SmallMenuButton = (props) => (
+  <MenuButton {...props} label={false} className={props.active ? 'menuButton small active' : 'menuButton small'} />
+)
+
+export const MenuRoute = ({ component: Component, props, ...rest }) => (
+  <Route {...rest} render={routeProps => (
+    <Component {...routeProps} {...props} />
+  )}/>
+)
diff --git a/frontend/app/common/miscellaneous.component.js b/frontend/app/common/miscellaneous.component.js
new file mode 100644
index 0000000..bf2c266
--- /dev/null
+++ b/frontend/app/common/miscellaneous.component.js
@@ -0,0 +1,71 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { clamp, percent } from 'app/utils'
+
+export const Swatch = ({ color }) => (
+  <div
+    className='swatch'
+    style={{ backgroundColor: color ? 'rgb(' + color.join(',') + ')' : 'transparent' }}
+  />
+)
+
+export const Dot = ({ color }) => (
+  <div
+    className='dot'
+    style={{ backgroundColor: color }}
+  />
+)
+
+export const Columns = ({ count, margin, width, object, children, className }) => {
+  if (!object || !object.length) object = children
+  if (!object || !object.length) return null
+  margin = margin || 380
+  width = width || 250
+  count = count || Math.floor((window.innerWidth - margin) / width)
+  let columns = []
+  let len = object.length
+  let j = 0
+  for (let i = 0; i < count; i++) {
+    let column_len = len * (i + 1) / count
+    let column = []
+    for (; j < column_len; j++) {
+      column.push(<div key={j}>{object[j]}</div>)
+    }
+    columns.push(<div key={"col_" + i + "_" + j} className='column' style={{ width }}>{column}</div>)
+    if (j >= len) break
+  }
+  return (
+    <div className={'row columnCells ' + className}>
+      {columns}
+    </div>
+  )
+}
+
+export const Statistic = ({ name, value, link }) => (
+  <div className='statistic row'>
+    <div className='title'>{link ? <Link to={link}>{name}</Link> : name}</div>
+    <div className='int'>{value}</div>
+  </div>
+)
+
+export const Detections = ({ detections, labels }) => (
+  (detections || []).map(({ label, rect }, i) => (
+    <div
+    className='rect'
+      key={i}
+      style={{
+        left: percent(clamp(rect.x1)),
+        width: percent(clamp(rect.x2 - rect.x1, 0, Math.min(1.0, 1.0 - rect.x1))),
+        top: percent(clamp(rect.y1)),
+        height: percent(clamp(rect.y2 - rect.y1, 0, Math.min(1.0, 1.0 - rect.y1))),
+      }}>
+      {labels && <span>{label.replace(/_/g, ' ')}</span>}
+    </div>
+  )
+))
+
+export const Progress = ({ current, total }) => (
+  <div className='progress'>
+    <div className='bar' style={{ width: Math.round(100 * current / total) + '%' }} />
+  </div>
+)
diff --git a/frontend/app/common/miscellaneous.css b/frontend/app/common/miscellaneous.css
new file mode 100644
index 0000000..32c3e7b
--- /dev/null
+++ b/frontend/app/common/miscellaneous.css
@@ -0,0 +1,18 @@
+
+/* Progress bar */
+
+.progress {
+  background: #f8f8f8;
+  margin: 0.25rem 0;
+  height: 0.25rem;
+  width: 20rem;
+  position: relative;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+  margin-bottom: 0.2rem;
+}
+.progress .bar {
+  position: absolute;
+  top: 0; left: 0;
+  height: 100%;
+  background: #11f;
+}
diff --git a/frontend/app/common/modal.component.js b/frontend/app/common/modal.component.js
new file mode 100644
index 0000000..75c479c
--- /dev/null
+++ b/frontend/app/common/modal.component.js
@@ -0,0 +1,9 @@
+import React, { Component } from 'react'
+
+export const Modal = ({ visible, children }) => (
+  <div className={visible ? "modal visible" : "modal"}>
+    <div>
+      {children}
+    </div>
+  </div>
+)
diff --git a/frontend/app/common/modal.css b/frontend/app/common/modal.css
new file mode 100644
index 0000000..5e95a09
--- /dev/null
+++ b/frontend/app/common/modal.css
@@ -0,0 +1,20 @@
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  background: rgba(0,0,0,0.2);
+  display: none;
+}
+.modal.visible {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.modal > div {
+  background: #fff;
+  padding: 1rem;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
+}
diff --git a/frontend/app/common/slider.component.js b/frontend/app/common/slider.component.js
new file mode 100644
index 0000000..9d96b1e
--- /dev/null
+++ b/frontend/app/common/slider.component.js
@@ -0,0 +1,120 @@
+import React, { Component } from 'react'
+import { default as throttle } from 'lodash.throttle'
+
+const SLIDER_THROTTLE_TIME = 1000 / 30
+
+export default class Slider extends Component {
+  state = {
+    value: 0
+  }
+
+  constructor(props){
+    super(props)
+    this.timeout = 0
+    this.handleInput = this.handleInput.bind(this)
+    this.handleRange = this.handleRange.bind(this)
+    this.handleKeyDown = this.handleKeyDown.bind(this)
+    this.onChange = throttle(props.onChange, SLIDER_THROTTLE_TIME)
+  }
+  componentDidMount() {
+    let { value } = this.props
+    if (this.props.type === 'int') {
+      value = parseInt(value)
+    }
+    this.setState({ value })
+  }
+  componentDidUpdate(prevProps) {
+    let { value } = this.props
+    if (prevProps.value !== value) {
+      if (this.props.type === 'int') {
+        value = parseInt(value)
+      }
+      this.setState({ value })
+    }
+  }
+  handleInput(e){
+    let { name } = this.props
+    let new_value = e.target.value
+    if (new_value === '') {
+      new_value = this.props.defaultValue || (this.props.max - this.props.min) / 2
+    }
+    else if (this.props.type === 'int') {
+      new_value = parseInt(new_value)
+    }
+    else if (this.props.type === 'odd') {
+      new_value = parseInt(Math.floor(new_value / 2) * 2 + 1)
+    }
+    else {
+      new_value = parseFloat(new_value)
+    }
+    if (this.state.value !== new_value) {
+      this.setState({ value: new_value })
+      this.props.onChange(this.props.name, new_value)
+    }
+  }
+  handleKeyDown(e) {
+    console.log(e.keyCode)
+  }
+  handleRange(e){
+    let { value: new_value } = e.target
+    if (this.props.type === 'int') {
+      new_value = parseInt(new_value)
+    }
+    else if (this.props.type === 'odd') {
+      new_value = parseInt(Math.floor(new_value / 2) * 2 + 1)
+    }
+    else if (this.props.type === 'list') {
+      new_value = this.props.options[new_value] || this.props.options[0]
+    }
+    else {
+      new_value = parseFloat(new_value)
+    }
+    this.setState({ value: new_value })
+    this.onChange(this.props.name, new_value)
+  }
+  render(){
+    let { name, title } = this.props
+    let value = this.state.value
+    if (typeof value === 'undefined') {
+      value = this.props.min
+    }
+    let text_value = value
+    let step;
+    let min = this.props.min || 0
+    let max = this.props.max || 0
+    if (this.props.type === 'int') {
+      step = 1
+    } else if (this.props.type === 'list') {
+      min = 0
+      max = this.props.options.length - 1
+      step = 1
+      value = this.props.options.indexOf(value)
+    } else {
+      step = (this.props.max - this.props.min) / 100
+      text_value = parseFloat(value).toFixed(2)
+    }
+    return (
+      <label className={this.props.error ? 'slider error' : 'slider'}>
+        <span>{title}</span>
+        <input
+          type='number'
+          min={min}
+          max={max}
+          step={step}
+          value={text_value}
+          onKeyDown={this.handleKeyDown}
+          onChange={this.handleInput}
+          onBlur={this.handleInput}
+        />
+        <input
+          type='range'
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          onChange={this.handleRange}
+        />
+      </label>
+    )
+  }
+}
diff --git a/frontend/app/common/table.component.js b/frontend/app/common/table.component.js
new file mode 100644
index 0000000..b26dcba
--- /dev/null
+++ b/frontend/app/common/table.component.js
@@ -0,0 +1,128 @@
+import React from 'react'
+
+import { formatName } from 'app/utils'
+
+const __HR__ = '__HR__'
+
+export function TableObject({ tag, object, order, summary }) {
+  if (!object) return null
+  if (object === 'loading') {
+    return <div className='tableObject loading'>{tag}{': Loading'}</div>
+  }
+  if (object.err) {
+    return <div className='tableObject error'>{tag}{' Error: '}{object.err}</div>
+  }
+  let objects = Object.keys(object)
+  if (order) {
+    const grouped = objects.reduce((a, b) => {
+      const index = order.indexOf(b)
+      if (index !== -1) {
+        a.order.push([index, b])
+      } else {
+        a.alpha.push(b)
+      }
+      return a
+    }, { order: [], alpha: [] })
+    objects = grouped.order
+      .sort((a, b) => a[0] - b[0])
+      .map(([i, s]) => s)
+    if (!summary) {
+      objects = objects
+        // .concat([__HR__])
+        .concat(grouped.alpha.sort())
+    }
+  } else {
+    objects = objects.sort()
+  }
+  return (
+    <div>
+      {tag && <h3 className='tt'>{tag}</h3>}
+      <table className={'tableObject ' + tag}>
+        <tbody>
+          {objects.map((key, i) => (
+            <TableRow key={key + '_' + i} name={key} value={object[key]} />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export function TableArray({ tag, list }) {
+  if (!list) return null
+  return (
+    <div>
+      {tag && <h3>{tag}</h3>}
+      <table className={'tableArray ' + tag}>
+        <tbody>
+          {list.map((value, i) => (
+            <tr key={tag + '_' + i}>
+              <TableCell value={value} />
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export function TableTuples({ tag, list }) {
+  if (!list) return null
+  return (
+    <div>
+      {tag && <h3>{tag}</h3>}
+      <table className={'tableTuples ' + tag}>
+        <tbody>
+          {list.map(([key, ...values], i) => (
+            <tr key={tag + '_' + i}>
+              <th>{formatName(key)}</th>
+              {values.map((value, j) => (
+                <TableCell key={i + '_' + j} value={value} />
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export function TableRow({ name, value }) {
+  if (name === __HR__) {
+    return (
+      <tr>
+        <th className='tr'>
+          <hr />
+        </th>
+      </tr>
+    )
+  }
+  return (
+    <tr>
+      <th>{formatName(name)}</th>
+      <TableCell name={name} value={value} />
+    </tr>
+  )
+}
+
+export function TableCell({ value }) {
+  if (value && typeof value === 'object') {
+    if (value._raw) {
+      value = value.value
+    } else if (value.length) {
+      value = <TableArray nested tag={''} list={value} />
+    } else {
+      value = <TableObject nested tag={''} object={value} />
+    }
+  }
+  if (typeof value === 'boolean') {
+    return <td>{value ? <Pill type='yes' /> : <Pill type='no' />}</td>
+  }
+  return (
+    <td>{value}</td>
+  )
+}
+
+export const Pill = ({ color, type }) => (
+  <div className={'pill ' + type} style={{ backgroundColor: color }}>{type}</div>
+)
\ No newline at end of file
diff --git a/frontend/app/common/table.css b/frontend/app/common/table.css
new file mode 100644
index 0000000..4752e21
--- /dev/null
+++ b/frontend/app/common/table.css
@@ -0,0 +1,96 @@
+/* tables on metadata pages */
+
+h3.tt {
+  margin: 1.5rem 0 0.25rem 0;
+  font-size: 1.25rem;
+}
+table {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  border-spacing: 0;
+  line-height: 1.5;
+  color: #666;
+}
+.tableObject td,
+.tableObject th {
+  padding: 0.1875rem;
+  vertical-align: top;
+}
+.tableObject hr {
+  width: 100%;
+  color: transparent;
+  border: 0;
+  border-bottom: 1px solid #bbb;
+  align: left;
+  margin: 3px 0;
+  padding: 0;
+}
+.tableObject th,
+.tableTuples th {
+  min-width: 8rem;
+  text-align: left;
+  text-transform: capitalize;
+  padding-left: 0;
+  padding-right: 0.625rem;
+  font-weight: 300;
+  color: #333;
+}
+.tableTuples td {
+  text-align: right;
+}
+.tableObject td {
+  font-weight: normal;
+  color: #000;
+}
+.tableObject .tableObject {
+  border: 0.0625rem solid #ddd;
+}
+.tableArray {
+  border: 0.0625rem solid #ddd;
+  border-spacing: 0;
+}
+.tableArray td {
+  border-bottom: 0.0625rem solid #ddd;
+}
+
+.rows .tableRow {
+  flex-wrap: wrap;
+}
+.rows .row > div.galleryRow {
+  padding: 0 0.75rem 0.75rem 0.75rem;
+}
+.rows .row > div.galleryRow > div {
+  display: flex;
+  flex-direction: row;
+  max-height: 100px;
+  flex-wrap: wrap;
+  max-width: 100%;
+  overflow: hidden;
+}
+.galleryRow .thumbnail {
+  height: 100px;
+  margin-right: 0.75rem;
+}
+/*
+.gray {
+  font-size: 12px;
+  color: #888;
+  display: block;
+}
+.sha256.heading {
+  margin: 20px 0 0px;
+}
+.gray span {
+  padding-right: 5px;
+}
+.gray {
+  margin-bottom: 10px;
+}
+.gray a {
+  color: #666;
+}
+*/
+.tableIndex {
+  width: 100%;
+}
\ No newline at end of file
diff --git a/frontend/app/common/tableIndex.component.js b/frontend/app/common/tableIndex.component.js
new file mode 100644
index 0000000..c58fc35
--- /dev/null
+++ b/frontend/app/common/tableIndex.component.js
@@ -0,0 +1,129 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+import { formatDateTime } from 'app/utils'
+import { Loader, Swatch, Dot } from 'app/common'
+
+/*
+  <TableIndex
+    title="Collections"
+    actions={actions.collection}
+    data={data.collection.index}
+    fields={[
+      { name: 'title', type: 'title', link: row => '/collection/' + row.id + '/show/' },
+      { name: 'username', type: 'string' },
+      { name: 'date', type: 'date' },
+      { name: 'notes', type: 'text' },
+    ]}
+  />
+*/
+
+export default class TableIndex extends Component {
+  componentDidMount() {
+    this.props.actions && this.props.actions.index()
+  }
+
+  render() {
+    const { data, els, title, fields, noHeadings, notFoundMessage } = this.props
+    if (data.loading) {
+      return <Loader />
+    }
+    if (!els && (!data.lookup || !data.order.length)) {
+      return (
+        <div>
+          <h1>{title}</h1>
+          <p className='gray'>
+            {notFoundMessage || ("No " + title)}
+          </p>
+        </div>
+      )
+    }
+    return (
+      <div className='tableIndex'>
+        <h1>{title}</h1>
+        <div className='rows'>
+        {!noHeadings && <RowHeadings fields={fields} />}
+        {els
+          ? els.map(el => <Row key={el.id} row={el} fields={fields} />)
+          : data.order.map(id => <Row key={id} row={data.lookup[id]} fields={fields} />)
+        }
+        </div>
+      </div>
+    )
+  }
+}
+
+const RowHeadings = ({fields}) => {
+  return (
+    <div className='row heading'>
+      {fields.map(field => {
+        if (field.type === 'gallery') return
+        let css = {}
+        if (field.width) {
+          css = { width: field.width, maxWidth: 'none', flex: 'none', }
+        }
+        if (field.flex) {
+          css.flex = field.flex
+        }
+        return <div key={field.name} className={field.type} style={css}>{(field.title || field.name).replace(/_/g, ' ')}</div>
+      })}
+    </div>
+  )
+}
+
+const Row = ({ row, fields }) => {
+  return (
+    <div className='row tableRow'>
+      {fields.map(field => {
+        let value = field.valueFn ? field.valueFn(row) : row[field.name]
+        let css = {}
+        if (field.type === 'date' && (row.updated_at || row.created_at || value)) {
+          // value = (value || "").split('.')[0]
+          value = formatDateTime(row.updated_at || row.created_at || value)
+        } else if (field.type === 'text') {
+          value = String(value || "").trim().split('\n')[0].replace(/^#+/, '').substr(0, 100)          
+        } else if (field.type === 'color') {
+          value = <Swatch color={value} />
+        } else if (field.type === 'bool') {
+          value = <Dot color={value ? '#11f' : '#fff'} />
+        } else if (field.type === 'str') {
+          value = String(value || "").replace(/_/g, ' ')
+        } else if (field.type === 'gallery') {
+          return <GalleryRow key={field.name} media={value} />
+        }
+        if (field.width) {
+          css = { width: field.width, maxWidth: 'none', flex: 'none', }
+        }
+        if (field.flex) {
+          css.flex = field.flex
+        }
+        let className
+        if (field.style) {
+          className = field.type + ' ' + field.style
+        } else {
+          className = field.type
+        }
+        value = <div title={value} key={field.name} className={className} style={css}>{value}</div>
+        if (field.link) {
+          return <Link key={field.name} to={field.link(row)}>{value}</Link>
+        }
+        return value
+      })}
+    </div>
+  )
+}
+
+const GalleryRow = ({ media }) => {
+  return (
+    <div className='galleryRow'>
+      <div>
+        {media.map(img => (
+          <Link to={"/media/id/" + img.id + "/"} key={img.url}>
+            <img src={img.url} className='thumbnail' />
+          </Link>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/app/common/upload.css b/frontend/app/common/upload.css
new file mode 100644
index 0000000..719f98c
--- /dev/null
+++ b/frontend/app/common/upload.css
@@ -0,0 +1,26 @@
+/* drag-and-drop */
+
+.dragCurtain {
+  display: none;
+  pointer-events: none;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.5);
+  z-index: 1;
+}
+.dragCurtain div {
+  color: #11f;
+  background: white;
+  border: 2px solid #11f;
+  padding: 2rem;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+.dragging .dragCurtain {
+  display: flex;
+}
diff --git a/frontend/app/common/upload.helpers.js b/frontend/app/common/upload.helpers.js
new file mode 100644
index 0000000..f26e2cc
--- /dev/null
+++ b/frontend/app/common/upload.helpers.js
@@ -0,0 +1,174 @@
+import ExifReader from 'exifreader'
+
+function base64ToUint8Array(string, start, finish) {
+  start = start || 0
+  finish = finish || string.length
+  // atob that shit
+  const binary = atob(string)
+  const buffer = new Uint8Array(binary.length)
+  for (let i = start; i < finish; i++) {
+    buffer[i] = binary.charCodeAt(i)
+  }
+  return buffer
+}
+
+function getOrientation(uri) {
+  // Split off the base64 data
+  const base64String = uri.split(',')[1]
+  // Read off first 128KB, which is all we need to
+  // get the EXIF data
+  const arr = base64ToUint8Array(base64String, 0, 2 ** 17)
+  try {
+    const tags = ExifReader.load(arr.buffer)
+    // console.log(tags)
+    if (typeof tags.Orientation == 'number') {
+      return tags.Orientation
+    }
+    return tags.Orientation.value
+  } catch (err) {
+    return 1
+  }
+}
+
+function applyRotation(canvas, ctx, deg) {
+  const radians = deg * (Math.PI / 180)
+  if (deg === 90) {
+    ctx.translate(canvas.width, 0)
+  } else if (deg === 180) {
+    ctx.translate(canvas.width, canvas.height)
+  } else if (deg === 270) {
+    ctx.translate(0, canvas.height)
+  }
+  ctx.rotate(radians)
+}
+
+/**
+ * Mapping from EXIF orientation values to data
+ * regarding the rotation and mirroring necessary to
+ * render the canvas correctly
+ * Derived from:
+ * http://www.daveperrett.com/articles/2012/07/28/exif-orientation-handling-is-a-ghetto/
+ */
+const orientationToTransform = {
+  1: { rotation: 0, mirror: false },
+  2: { rotation: 0, mirror: true },
+  3: { rotation: 180, mirror: false },
+  4: { rotation: 180, mirror: true },
+  5: { rotation: 90, mirror: true },
+  6: { rotation: 90, mirror: false },
+  7: { rotation: 270, mirror: true },
+  8: { rotation: 270, mirror: false }
+}
+
+function applyOrientationCorrection(canvas, ctx, uri) {
+  const orientation = getOrientation(uri)
+  // Only apply transform if there is some non-normal orientation
+  if (orientation && orientation !== 1) {
+    console.log(orientation)
+    const transform = orientationToTransform[orientation]
+    const { rotation } = transform
+    const flipAspect = rotation === 90 || rotation === 270
+    if (flipAspect) {
+      // Fancy schmancy swap algo
+      canvas.width = canvas.height + canvas.width
+      canvas.height = canvas.width - canvas.height
+      canvas.width -= canvas.height
+    }
+    if (rotation > 0) {
+      applyRotation(canvas, ctx, rotation)
+    }
+  }
+}
+
+function getScale(width, height, viewportWidth, viewportHeight, fillViewport) {
+  function fitHorizontal() {
+    return viewportWidth / width
+  }
+  function fitVertical() {
+    return viewportHeight / height
+  }
+  fillViewport = !!fillViewport
+  const landscape = (width / height) > (viewportWidth / viewportHeight)
+  if (landscape) {
+    if (fillViewport) {
+      return fitVertical()
+    }
+    if (width > viewportWidth) {
+      return fitHorizontal()
+    }
+  } else {
+    if (fillViewport) {
+      return fitHorizontal()
+    }
+    if (height > viewportHeight) {
+      return fitVertical()
+    }
+  }
+  return 1
+}
+
+export function renderToCanvas(img, options) {
+  if (!img) return null
+  options = options || {}
+
+  // Canvas max size for any side
+  const maxSide = options.maxSide || 0
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')
+  const initialScale = options.scale || 1
+  /*
+  // constrain
+  // Scale to needed to constrain canvas to max size
+  let scale = getScale(img.naturalWidth * initialScale, img.naturalHeight * initialScale, maxSide, maxSide, true)
+  // console.log(scale)
+  // Still need to apply the user defined scale
+  scale *= initialScale
+  canvas.width = Math.round(img.naturalWidth * scale)
+  canvas.height = Math.round(img.naturalHeight * scale)
+  */
+  const { naturalWidth, naturalHeight } = img
+  if (maxSide > 0) {
+    if (naturalWidth > naturalHeight) {
+      canvas.width = Math.min(maxSide, naturalWidth)
+      canvas.height = naturalHeight * canvas.width / naturalWidth
+    } else {
+      canvas.height = Math.min(maxSide, naturalHeight)
+      canvas.width = naturalWidth * canvas.height / naturalHeight
+    }
+  } else {
+    canvas.width = naturalWidth
+    canvas.height = naturalHeight
+  }
+  const { correctOrientation } = options
+  const jpeg = !!img.src.match(/data:image\/jpeg|\.jpeg$|\.jpg$/i)
+  const hasDataURI = !!img.src.match(/^data:/)
+
+  ctx.save()
+
+  // Can only correct orientation on JPEGs represented as dataURIs
+  // for the time being
+  if (correctOrientation && jpeg && hasDataURI) {
+    applyOrientationCorrection(canvas, ctx, img.src)
+  }
+  // Resize image if too large
+  // if (scale !== 1) {
+  //   ctx.scale(scale, scale)
+  // }
+
+  ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+  ctx.restore()
+
+  return canvas
+}
+
+export function renderThumbnail(img) {
+  const resized = renderToCanvas(img, { correctOrientation: true })
+  // const canvas = document.createElement('canvas') // document.querySelector('#user_photo_canvas')
+  // const ctx = canvas.getContext('2d')
+  // ctx.fillStyle = 'black'
+  // ctx.fillRect(0, 0, MAX_SIDE, MAX_SIDE)
+  // const xOffset = (MAX_SIDE - resized.width) / 2
+  // const yOffset = (MAX_SIDE - resized.height) / 2
+  // ctx.drawImage(resized, xOffset, yOffset, resized.width, resized.height)
+  return resized
+}
diff --git a/frontend/app/common/uploadImage.component.js b/frontend/app/common/uploadImage.component.js
new file mode 100644
index 0000000..3ae41c8
--- /dev/null
+++ b/frontend/app/common/uploadImage.component.js
@@ -0,0 +1,74 @@
+import React, { Component } from 'react'
+
+import { renderThumbnail } from './upload.helpers'
+
+export default class UploadImageComponent extends Component {
+  constructor(props) {
+    super(props)
+    document.body.addEventListener("dragover", this.dragOver.bind(this))
+    document.body.addEventListener("dragleave", this.dragLeave.bind(this))
+    document.body.addEventListener("drop", this.upload.bind(this))
+  }
+  
+  dragOver(e) {
+    e.stopPropagation()
+    e.preventDefault()
+    document.body.className = 'dragging'
+  }
+
+  dragLeave(e) {
+    e.stopPropagation()
+    e.preventDefault()
+    document.body.className = ''
+  }
+
+  upload(e) {
+    e.preventDefault()
+    document.body.className = ''
+    const files = e.dataTransfer ? e.dataTransfer.files : e.target.files
+    let i
+    let file
+    for (i = 0; i < files.length; i++) {
+      file = files[i]
+      if (file && file.type.match('image.*')) break
+    }
+    if (!file) {
+      console.log('No file specified')
+      return
+    }
+    const fr = new FileReader()
+    fr.onload = fileReaderEvent => {
+      fr.onload = null
+      const img = new Image()
+      img.onload = () => {
+        img.onload = null
+        this.resizeAndUpload(file, img)
+      }
+      img.src = fileReaderEvent.target.result
+    }
+    fr.readAsDataURL(file)
+  }
+
+  resizeAndUpload(file, img) {
+    const canvas = renderThumbnail(img, this.props)
+    canvas.toBlob(blob => {
+      this.props.onUpload({ file, img, canvas, blob, freshen: true })
+    }, 'image/jpeg', this.props.quality || 80)
+  }
+
+  render() {
+    return (
+      <div className='uploadButton'>
+        <input
+          type="file"
+          accept="image/*"
+          onChange={this.upload.bind(this)}
+          required
+        />
+        <div className='dragCurtain'>
+          <div className='dragLabel'>Drop image here</div>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/frontend/app/session.js b/frontend/app/session.js
new file mode 100644
index 0000000..cdce686
--- /dev/null
+++ b/frontend/app/session.js
@@ -0,0 +1,19 @@
+import Storage from 'store2'
+
+export const session = Storage.namespace('swimmer')
+
+export const getDefault = (key, def) => {
+  const val = session.get(key);
+  return (val === null) ? def : val
+}
+export const getDefaultInt = (key, def) => {
+  return parseInt(getDefault(key, def), 10)
+}
+export const getDefaultFloat = (key, def) => {
+  return parseFloat(getDefault(key, def), 10)
+}
+
+const username = session.get('username')
+if (!username) {
+  session.set('username', 'anonymous')
+}
diff --git a/frontend/app/site/actions.js b/frontend/app/site/actions.js
new file mode 100644
index 0000000..e672028
--- /dev/null
+++ b/frontend/app/site/actions.js
@@ -0,0 +1,19 @@
+import { bindActionCreators } from 'redux'
+// import { actions as crudActions } from './api'
+
+import * as siteActions from './site/site.actions'
+
+import { store } from './store'
+
+export default
+    // Object.keys(crudActions)
+          // .map(a => [a, crudActions[a]])
+          // .concat(
+          [
+            ['site', siteActions],
+          ] //)
+          .map(p => [p[0], bindActionCreators(p[1], store.dispatch)])
+          .concat([
+            // ['socket', socketActions],
+          ])
+          .reduce((a,b) => (a[b[0]] = b[1])&&a,{})
\ No newline at end of file
diff --git a/frontend/app/site/app.js b/frontend/app/site/app.js
new file mode 100644
index 0000000..cf52460
--- /dev/null
+++ b/frontend/app/site/app.js
@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+import { ConnectedRouter } from 'connected-react-router'
+import { Route } from 'react-router'
+
+import ViewerContainer from './viewer/viewer.container'
+import actions from './actions'
+
+export default class App extends Component {
+  componentDidMount() {
+    const path_partz = window.location.pathname.split('/')
+    const graph_name = path_partz[1]
+    let path_name = null
+    if (path_partz.length > 2) {
+      path_name = path_partz[2]
+    }
+    // console.log('loading', graph_name, path_name)
+    actions.site.loadSite(graph_name, path_name)
+  }
+  
+  render() {
+    return (
+      <ConnectedRouter history={this.props.history}>
+        <div className='app'>
+          <Route path={'/:graph_name/:page_name'} component={ViewerContainer} exact />
+          <Route exact key='root' path='/' render={() => {
+            // setTimeout(() => this.props.history.push('/'), 10)
+            return null
+          }} />
+        </div>
+      </ConnectedRouter>
+    )
+  }
+}
diff --git a/frontend/app/site/index.js b/frontend/app/site/index.js
new file mode 100644
index 0000000..6f1a0a5
--- /dev/null
+++ b/frontend/app/site/index.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { Provider } from 'react-redux'
+
+import App from './app'
+
+import { store, history } from './store'
+
+const container = document.createElement('div')
+container.classList.add('container')
+document.body.appendChild(container)
+
+ReactDOM.render(
+  <Provider store={store}>
+    <App history={history} />
+  </Provider>, container
+)
diff --git a/frontend/app/site/site/site.actions.js b/frontend/app/site/site/site.actions.js
new file mode 100644
index 0000000..2eea442
--- /dev/null
+++ b/frontend/app/site/site/site.actions.js
@@ -0,0 +1,11 @@
+import * as types from 'app/types'
+import { api } from 'app/utils'
+
+export const setSiteTitle = title => dispatch => {
+  document.querySelector('title').innerText = title
+  dispatch({ type: types.site.set_site_title, payload: title })
+}
+
+export const loadSite = (graph_name, path_name) => dispatch => (
+  api(dispatch, types.site, 'site', '/' + graph_name + '/index.json')
+)
diff --git a/frontend/app/site/site/site.reducer.js b/frontend/app/site/site/site.reducer.js
new file mode 100644
index 0000000..85c3486
--- /dev/null
+++ b/frontend/app/site/site/site.reducer.js
@@ -0,0 +1,36 @@
+import * as types from '../types'
+
+const initialState = {
+  siteTitle: 'swimmer',
+  graph: {
+    loading: true,
+  }
+}
+
+export default function siteReducer(state = initialState, action) {
+  console.log(action.type, action)
+  switch (action.type) {
+    case types.site.set_site_title:
+      return {
+        ...state,
+        siteTitle: action.payload,
+      }
+
+    case types.site.loaded:
+      return {
+        ...state,
+        graph: action.data.graph,
+      }
+
+    case '@@router/LOCATION_CHANGE':
+      return {
+        ...state,
+        graph: {
+          ...state.graph,
+        }
+      }
+
+    default:
+      return state
+  }
+}
diff --git a/frontend/app/site/store.js b/frontend/app/site/store.js
new file mode 100644
index 0000000..a228e2b
--- /dev/null
+++ b/frontend/app/site/store.js
@@ -0,0 +1,37 @@
+import { applyMiddleware, compose, combineReducers, createStore } from 'redux'
+import { connectRouter, routerMiddleware } from 'connected-react-router'
+import { createBrowserHistory } from 'history'
+import thunk from 'redux-thunk'
+
+import siteReducer from './site/site.reducer'
+
+const createRootReducer = history => (
+  combineReducers({
+    auth: (state = {}) => state,
+    router: connectRouter(history),
+    site: siteReducer,
+  })
+)
+
+const configureStore = (initialState = {}, history) => {
+  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
+
+  const store = createStore(
+    createRootReducer(history),
+    initialState,
+    composeEnhancers(
+      applyMiddleware(
+        thunk,
+        routerMiddleware(history)
+      ),
+    ),
+  )
+
+  return store
+}
+
+const history = createBrowserHistory()
+const store = configureStore({}, history)
+const { dispatch } = store
+
+export { store, history, dispatch }
diff --git a/frontend/app/site/types.js b/frontend/app/site/types.js
new file mode 100644
index 0000000..23bed98
--- /dev/null
+++ b/frontend/app/site/types.js
@@ -0,0 +1,11 @@
+import { with_type, crud_type } from 'app/api/crud.types'
+
+export const site = with_type('site', [
+  'set_site_title', 'loading', 'loaded', 'error',
+])
+
+export const system = with_type('system', [
+  'load_site',
+])
+
+export const init = '@@INIT'
diff --git a/frontend/app/site/viewer/viewer.container.js b/frontend/app/site/viewer/viewer.container.js
new file mode 100644
index 0000000..42ce6c2
--- /dev/null
+++ b/frontend/app/site/viewer/viewer.container.js
@@ -0,0 +1,96 @@
+import React, { Component } from 'react'
+import { Route } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import actions from '../actions'
+import { Loader } from 'app/common/loader.component'
+import TileHandle from 'app/views/page/components/tile.handle'
+
+import '../../views/page/page.css'
+
+class ViewerContainer extends Component {
+  state = {
+    page: {},
+  }
+
+  constructor(props) {
+    super(props)
+    this.pageRef = React.createRef()
+    this.handleMouseDown = this.handleMouseDown.bind(this)
+  }
+
+  componentDidUpdate(prevProps) {
+    // console.log('didUpdate', this.props.graph !== prevProps.graph, this.props.location.pathname !== prevProps.location.pathname)
+    if (this.props.graph !== prevProps.graph || this.props.location.pathname !== prevProps.location.pathname) {
+      this.load()
+    }
+  }
+
+  load() {
+    const { graph_name, page_name } = this.props.match.params
+    const page_path = ["", graph_name, page_name].join('/')
+    const { pages, home_page } = this.props.graph
+    const page = pages[page_path]
+    if (!page) {
+      // console.log('-> home page')
+      console.log(page_path)
+      const { home_page } = this.props.graph
+      this.setState({ page: pages[home_page] })
+    } else {
+      // console.log(page)
+      console.log(page_path)
+      this.setState({ page })
+    }
+  }
+
+  handleMouseDown(e, tile) {
+    // console.log(tile)
+  }
+
+  render() {
+    const { page } = this.state
+    if (this.props.graph.loading || !page.id) {
+      return (
+        <div>
+          <div className='body'>
+            <div className='page loading'>
+              <Loader />
+            </div>
+          </div>
+        </div>
+      )
+    }
+    const { settings } = page
+    const pageStyle = { backgroundColor: settings ? settings.background_color : '#000000' }
+    // console.log(page)
+    return (
+      <div className='body'>
+        <div className='page' ref={this.pageRef} style={pageStyle}>
+          {page.tiles.map(tile => {
+            return (
+              <TileHandle
+                viewing
+                key={tile.id}
+                tile={tile}
+                bounds={this.state.bounds}
+                onMouseDown={e => this.handleMouseDown(e, tile)}
+                onDoubleClick={e => {}}
+              />
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  site: state.site,
+  graph: state.site.graph,
+})
+
+const mapDispatchToProps = dispatch => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(ViewerContainer)
diff --git a/frontend/app/store.js b/frontend/app/store.js
new file mode 100644
index 0000000..9cf1dbe
--- /dev/null
+++ b/frontend/app/store.js
@@ -0,0 +1,45 @@
+import { applyMiddleware, compose, combineReducers, createStore } from 'redux'
+import { connectRouter, routerMiddleware } from 'connected-react-router'
+import { createBrowserHistory } from 'history'
+import thunk from 'redux-thunk'
+
+import uploadReducer from 'app/views/upload/upload.reducer'
+import graphReducer from 'app/views/graph/graph.reducer'
+import pageReducer from 'app/views/page/page.reducer'
+import tileReducer from 'app/views/tile/tile.reducer'
+import siteReducer from './views/site/site.reducer'
+
+const createRootReducer = history => (
+  combineReducers({
+    auth: (state = {}) => state,
+    router: connectRouter(history),
+    site: siteReducer,
+    graph: graphReducer,
+    page: pageReducer,
+    tile: tileReducer,
+    upload: uploadReducer,
+  })
+)
+
+const configureStore = (initialState = {}, history) => {
+  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
+
+  const store = createStore(
+    createRootReducer(history),
+    initialState,
+    composeEnhancers(
+      applyMiddleware(
+        thunk,
+        routerMiddleware(history)
+      ),
+    ),
+  )
+
+  return store
+}
+
+const history = createBrowserHistory()
+const store = configureStore({}, history)
+const { dispatch } = store
+
+export { store, history, dispatch }
diff --git a/frontend/app/types.js b/frontend/app/types.js
new file mode 100644
index 0000000..7120a91
--- /dev/null
+++ b/frontend/app/types.js
@@ -0,0 +1,33 @@
+import { with_type, crud_type } from 'app/api/crud.types'
+
+export const api = crud_type('api', [])
+
+export const graph = crud_type('graph', [
+  'show_add_page_form', 'hide_add_page_form', 'toggle_add_page_form',
+  'show_edit_page_form', 'hide_edit_page_form', 'toggle_edit_page_form',
+  'update_graph_page',
+])
+
+export const page = crud_type('page', [
+  'show_add_tile_form', 'hide_add_tile_form', 'toggle_add_tile_form',
+  'show_edit_tile_form', 'hide_edit_tile_form', 'toggle_edit_tile_form',
+  'update_page_tile',
+  'set_tile_sort_order', 'update_tile_sort_order',
+  'show_tile_list', 'hide_tile_list', 'toggle_tile_list',
+])
+
+export const tile = crud_type('tile', [
+  'update_temporary_tile', 'clear_temporary_tile',
+])
+
+export const upload = crud_type('upload', [])
+
+export const site = with_type('site', [
+  'set_site_title',
+])
+
+export const system = with_type('system', [
+  'load_site',
+])
+
+export const init = '@@INIT'
diff --git a/frontend/app/utils/index.js b/frontend/app/utils/index.js
new file mode 100644
index 0000000..bb5e01d
--- /dev/null
+++ b/frontend/app/utils/index.js
@@ -0,0 +1,331 @@
+import { api as api_type } from 'app/types'
+
+// import { format, formatDistance } from 'date-fns'
+import format from 'date-fns/format'
+import formatDistance from 'date-fns/formatDistance'
+
+export const formatDateTime = dateStr => format(new Date(dateStr), 'd MMM yyyy H:mm')
+export const formatDate = dateStr => format(new Date(dateStr), 'd MMM yyyy')
+export const formatTime = dateStr => format(new Date(dateStr), 'H:mm')
+export const formatAge = dateStr => formatDistance(new Date(), new Date(dateStr)) + ' ago.'
+
+/* Mobile check */
+
+export const isiPhone = !!((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
+export const isiPad = !!(navigator.userAgent.match(/iPad/i))
+export const isAndroid = !!(navigator.userAgent.match(/Android/i))
+export const isMobile = isiPhone || isiPad || isAndroid
+export const isDesktop = !isMobile
+
+const htmlClassList = document.body.parentNode.classList
+htmlClassList.add(isDesktop ? 'desktop' : 'mobile')
+
+/* Default image dimensions */
+
+export const widths = {
+  th: 160,
+  sm: 320,
+  md: 640,
+  lg: 1280,
+}
+
+/* Formatting functions */
+
+const acronyms = 'id url cc sa fp md5 sha256'.split(' ').map(s => '_' + s)
+const acronymsUpperCase = acronyms.map(s => s.toUpperCase())
+
+export const formatName = s => {
+  acronyms.forEach((acronym, i) => s = s.replace(acronym, acronymsUpperCase[i]))
+  return s.replace(/_/g, ' ')
+}
+
+// Use to pad frame numbers with zeroes
+export const pad = (n, m) => {
+  let s = String(n || 0)
+  while (s.length < m) {
+    s = '0' + s
+  }
+  return s
+}
+
+export const courtesyS = (n, s) => n + ' ' + (n === 1 ? s : s + 's')
+
+export const padSeconds = n => n < 10 ? '0' + n : n
+
+export const timestamp = (n = 0, fps = 25) => {
+  n /= fps
+  let s = padSeconds(Math.round(n) % 60)
+  n = Math.floor(n / 60)
+  if (n > 60) {
+    return Math.floor(n / 60) + ':' + padSeconds(n % 60) + ':' + s
+  }
+  return (n % 60) + ':' + s
+}
+
+export const percent = n => (n * 100).toFixed(1) + '%'
+
+export const px = (n, w) => Math.round(n * w) + 'px'
+
+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)
+
+/* URLs */
+
+export const sha256_tree = (sha256, branch_size=2, tree_depth=2) => {
+  const tree_size = tree_depth * branch_size
+  let tree = ""
+  for (var i = 0; i < tree_size; i += branch_size) {
+    tree += '/' + sha256.substr(i, branch_size)
+  }
+  return tree
+}
+
+export const imageUrl = (sha256, frame, size = 'th') => [
+  'https://' + process.env.S3_HOST + '/v1/media/keyframes',
+  sha256_tree(sha256),
+  pad(frame, 6),
+  size,
+  'index.jpg'
+].filter(s => !!s).join('/')
+
+export const uploadUri = ({ sha256, ext }) => '/static/data/uploads' + sha256_tree(sha256) + '/' + sha256 + ext
+export const metadataUri = (sha256, tag) => '/metadata/' + sha256 + '/' + tag + '/'
+export const keyframeUri = (sha256, frame) => '/metadata/' + sha256 + '/keyframe/' + pad(frame, 6) + '/'
+
+export const preloadImage = url => (
+  new Promise((resolve, reject) => {
+    const image = new Image()
+    let loaded = false
+    image.onload = () => {
+      if (loaded) return
+      loaded = true
+      image.onload = null
+      image.onerror = null
+      resolve(image)
+    }
+    image.onerror = () => {
+      if (loaded) return
+      image.onload = null
+      image.onerror = null
+      resolve(image)
+    }
+    // console.log(img.src)
+    // image.crossOrigin = 'anonymous'
+    image.src = url
+    if (image.complete) {
+      image.onload()
+    }
+  })
+)
+
+export const cropImage = (url, crop) => {
+  return new Promise((resolve, reject) => {
+    let { x, y, w, h } = crop
+    const image = new Image()
+    let loaded = false
+    x = parseFloat(x)
+    y = parseFloat(y)
+    w = parseFloat(w)
+    h = parseFloat(h)
+    image.onload = () => {
+      if (loaded) return
+      loaded = true
+      image.onload = null
+      const canvas = document.createElement('canvas')
+      const ctx = canvas.getContext('2d')
+      const width = image.naturalWidth
+      const height = image.naturalHeight
+      canvas.width = w * width
+      canvas.height = h * height
+      ctx.drawImage(
+        image,
+        Math.round(x * width),
+        Math.round(y * height),
+        Math.round(w * width),
+        Math.round(h * height),
+        0, 0, canvas.width, canvas.height
+      )
+      resolve(canvas)
+    }
+    image.onerror = () => {
+      console.log('image error')
+      reject()
+    }
+    // console.log(img.src)
+    image.crossOrigin = 'anonymous'
+    image.src = url
+    if (image.complete) {
+      image.onload()
+    }
+  })
+}
+export const urlSearchParamsToDict = search => {
+  const params = new URLSearchParams(search)
+  const dict = {}
+  params.forEach((value, key) => { // ???
+    dict[key] = value
+  })
+  return dict
+}
+
+/* AJAX */
+
+let cachedAuth = null
+let token = ''
+let username = ''
+
+export const post = (dispatch, type=api_type, tag, url, data) => {
+  let headers
+  if (data instanceof FormData) {
+    headers = {
+      Accept: 'application/json',
+    }
+  } else if (data) {
+    headers = {
+      Accept: 'application/json',
+      'Content-Type': 'application/json; charset=utf-8',
+    }
+    data = JSON.stringify(data)
+  }
+
+  dispatch({
+    type: type.loading,
+    tag,
+  })
+  return fetch(url, {
+    method: 'POST',
+    body: data,
+    headers,
+  })
+  .then(res => res.json())
+  .then(res => dispatch({
+    type: type.loaded,
+    tag,
+    data: res,
+  }))
+  .catch(err => dispatch({
+    type: type.error,
+    tag,
+    err,
+  }))
+}
+
+export const api = (dispatch, type=api_type, tag, url, data) => {
+  dispatch({
+    type: type.loading,
+    tag,
+  })
+  if (url.indexOf('http') !== 0) {
+    url = window.location.origin + url
+  }
+  url = new URL(url)
+  if (data) {
+    url.search = new URLSearchParams(data).toString()
+  }
+  return fetch(url, {
+    method: 'GET',
+    // mode: 'cors',
+  })
+  .then(res => res.json())
+  .then(res => dispatch({
+    type: type.loaded,
+    tag,
+    data: res,
+  }))
+  .catch(err => dispatch({
+    type: type.error,
+    tag,
+    err,
+  }))
+}
+
+/* sorting */
+
+export const numericSort = {
+  asc: (a,b) => a[0] - b[0],
+  desc: (a,b) => b[0] - a[0],
+}
+export const stringSort = {
+  asc: (a,b) => a[0].localeCompare(b[0]),
+  desc: (a,b) => b[0].localeCompare(a[0]),
+}
+export const orderByFn = (s='name asc') => {
+  const [field='name', direction='asc'] = s.split(' ')
+  let mapFn, sortFn
+  switch (field) {
+    case 'id':
+      mapFn = a => [parseInt(a.id) || 0, a]
+      sortFn = numericSort[direction]
+      break
+    case 'epoch':
+      mapFn = a => [parseInt(a.epoch || a.epochs) || 0, a]
+      sortFn = numericSort[direction]
+      break
+    case 'size':
+      mapFn = a => [parseInt(a.size) || 0, a]
+      sortFn = numericSort[direction]
+      break
+    case 'date':
+      mapFn = a => [+new Date(a.date || a.created_at), a]
+      sortFn = numericSort[direction]
+      break
+    case 'updated_at':
+      mapFn = a => [+new Date(a.updated_at), a]
+      sortFn = numericSort[direction]
+      break
+    case 'priority':
+      mapFn = a => [parseInt(a.priority) || parseInt(a.id) || 1000, a]
+      sortFn = numericSort[direction]
+    case 'name':
+    default:
+      mapFn = a => [a.name || "", a]
+      sortFn = stringSort[direction]
+      break
+  }
+  return { mapFn, sortFn }
+}
+export const getOrderedIds = (objects, sort, prepend=[]) => {
+  const { mapFn, sortFn } = orderByFn(sort)
+  return prepend.concat(objects.map(mapFn).sort(sortFn).map(a => a[1].id))
+}
+export const getOrderedIdsFromLookup = (lookup, sort) => {
+  return getOrderedIds(Object.keys(lookup).map(key => lookup[key]), sort)
+}
+
+/* parallel promises */
+
+export const allProgress = (promises, progress_cb) => {
+  let d = 0
+  progress_cb(0, 0, promises.length)
+  promises.forEach((p) => {
+    p.then((s) => {
+      d += 1
+      progress_cb(Math.floor((d * 100) / promises.length), d, promises.length)
+      return s
+    })
+  })
+  return Promise.all(promises)
+}
+
+/* Clipboard */
+
+export function writeToClipboard(str) {
+  return new Promise((resolve, reject) => {
+    let success = false
+    function listener(e) {
+      e.clipboardData.setData("text/plain", str)
+      e.preventDefault()
+      success = true
+    }
+    document.addEventListener("copy", listener)
+    document.execCommand("copy")
+    document.removeEventListener("copy", listener)
+    if (success) {
+      resolve()
+    } else {
+      reject()
+    }
+  })
+}
\ No newline at end of file
diff --git a/frontend/app/views/graph/components/graph.canvas.js b/frontend/app/views/graph/components/graph.canvas.js
new file mode 100644
index 0000000..2896c6b
--- /dev/null
+++ b/frontend/app/views/graph/components/graph.canvas.js
@@ -0,0 +1,138 @@
+import React, { Component } from 'react'
+
+import { mod, angle } from 'app/utils'
+
+const DEFAULT_MEASUREMENT = { width: 16, height: 16 }
+const BACKLINK_SPACING = 10
+const ARROWHEAD_LENGTH = 10
+const GRAPH_LINK_COLOR = "#ff88ff"
+const GRAPH_BACKLINK_COLOR = "#88ffff"
+const GRAPH_UNHOVER_LINK_COLOR = "#884488"
+const GRAPH_UNHOVER_BACKLINK_COLOR = "#448888"
+
+export default class GraphCanvas extends Component {
+  constructor(props) {
+    super(props)
+    this.canvasRef = React.createRef()
+  }
+  
+  componentDidMount() {
+    if (this.props.bounds) {
+      this.draw({})      
+    }
+  }
+  
+  componentDidUpdate(prevProps) {
+    this.draw(prevProps)
+  }
+
+  draw(prevProps) {
+    const { current: canvas } = this.canvasRef
+    const { bounds, pages, currentPage, box, measurements, highlightedPageId } = this.props
+    const { width, height } = bounds
+    if (prevProps.bounds !== bounds) {
+      canvas.width = width
+      canvas.height = height
+    }
+    const ctx = canvas.getContext('2d')
+    ctx.clearRect(0, 0, width, height)
+    ctx.lineWidth = 2
+    const coordsLookup = pages.reduce((a,b) => {
+      if (currentPage && box && b.id === currentPage.id) {
+        a[b.id] = {
+          x: box.x,
+          y: box.y,
+          backlinks: new Set([]),
+        }
+      } else {
+        a[b.id] = {
+          x: b.settings.x,
+          y: b.settings.y,
+          backlinks: new Set([]),
+        }
+      }
+      return a
+    }, {})
+    pages.map(page => {
+      const sourceCoord = coordsLookup[page.id]
+      page.backlinks.map(tile => {
+        if (tile.target_page_id <= 0) return
+        const targetCoord = coordsLookup[tile.page_id]
+        const isHighlightedPage = !highlightedPageId || highlightedPageId === page.id || highlightedPageId === tile.page_id
+        let tile_measurement = measurements[tile.page_id] || DEFAULT_MEASUREMENT
+        let target_measurement = measurements[tile.target_page_id] || DEFAULT_MEASUREMENT
+        let theta = angle(targetCoord.x, targetCoord.y, sourceCoord.x, sourceCoord.y)
+        let x1_offset = tile_measurement.width / 2 // * (0.5 - Math.cos(theta))
+        let y1_offset = tile_measurement.height / 2
+        let x2_offset = target_measurement.width / 2 // (0.5 - Math.cos(theta))
+        let y2_offset = target_measurement.height / 2
+        // skip duplicate links
+        if (sourceCoord.backlinks.has(tile.page_id)) {
+          return
+        }
+        /*
+          if it's pointing right, cos(t) is 1
+          if it's pointing left,  cos(t) is -1
+        */
+        // if (Math.abs(Math.cos(theta)) > 0.5) {
+        // x1_offset += target_measurement.width / 3 * (- Math.cos(theta))
+        // x1_offset += target_measurement.height / 4 * (- Math.sin(theta))
+        x2_offset += target_measurement.width / 3 * (- Math.cos(theta))
+        y2_offset += target_measurement.height / 6 * (- Math.sin(theta))
+        // }
+        // if this is the first time encountering this link...
+        if (!targetCoord.backlinks.has(tile.target_page_id)) {
+          sourceCoord.backlinks.add(tile.page_id)
+          ctx.strokeStyle = isHighlightedPage
+            ? GRAPH_LINK_COLOR
+            : GRAPH_UNHOVER_LINK_COLOR
+        } else { // otherwise this is a two-way link
+          x1_offset += BACKLINK_SPACING * Math.sin(theta)
+          y1_offset += BACKLINK_SPACING * Math.cos(theta)
+          x2_offset += BACKLINK_SPACING * Math.sin(theta)
+          y2_offset += BACKLINK_SPACING * Math.cos(theta)
+          // x1_offset += BACKLINK_SPACING * Math.cos(theta + Math.PI /2)
+          // y1_offset += BACKLINK_SPACING * Math.sin(theta + Math.PI /2)
+          // x2_offset += BACKLINK_SPACING * Math.cos(theta + Math.PI /2)
+          // y2_offset += BACKLINK_SPACING * Math.sin(theta + Math.PI /2)
+          ctx.strokeStyle = isHighlightedPage
+            ? GRAPH_BACKLINK_COLOR
+            : GRAPH_UNHOVER_BACKLINK_COLOR
+        }
+        ctx.beginPath()
+        const x1 = targetCoord.x * width + x1_offset
+        const y1 = targetCoord.y * height + y1_offset
+        const x2 = sourceCoord.x * width + x2_offset
+        const y2 = sourceCoord.y * height + y2_offset
+        this.arrow(ctx, x1, y1, x2, y2)
+        ctx.stroke()
+      })
+    })
+  }
+  
+  arrow(ctx, x1, y1, x2, y2) {
+    const farOffset = 20
+    const endOffset = 1
+    const theta = angle(x1, y1, x2, y2)
+    x1 += Math.cos(theta) * 0
+    x2 -= Math.cos(theta) * farOffset
+    y1 += Math.sin(theta) * 0
+    y2 -= Math.sin(theta) * farOffset
+    const xEnd = x2 - Math.cos(theta) * endOffset
+    const yEnd = y2 - Math.sin(theta) * endOffset
+    const leftAngle = mod(theta - Math.PI / 6, Math.PI * 2)
+    const rightAngle = mod(theta + Math.PI / 6, Math.PI * 2)
+    ctx.moveTo(x1, y1)
+    ctx.lineTo(xEnd, yEnd)
+    ctx.moveTo(x2, y2)
+    ctx.lineTo(x2 - ARROWHEAD_LENGTH * Math.cos(leftAngle), y2 - ARROWHEAD_LENGTH * Math.sin(leftAngle))
+    ctx.moveTo(x2, y2)
+    ctx.lineTo(x2 - ARROWHEAD_LENGTH * Math.cos(rightAngle), y2 - ARROWHEAD_LENGTH * Math.sin(rightAngle))
+  }
+
+  render() {
+    return (
+      <canvas ref={this.canvasRef} />
+    )
+  }
+}
diff --git a/frontend/app/views/graph/components/graph.editor.js b/frontend/app/views/graph/components/graph.editor.js
new file mode 100644
index 0000000..61f26b7
--- /dev/null
+++ b/frontend/app/views/graph/components/graph.editor.js
@@ -0,0 +1,212 @@
+import React, { Component } from 'react'
+import { Route, Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import { session } from 'app/session'
+import actions from 'app/actions'
+import * as graphActions from '../graph.actions'
+
+import { Loader } from 'app/common'
+import { clamp, dist, mod, angle } from 'app/utils'
+
+import GraphCanvas from './graph.canvas'
+import PageHandle from './page.handle'
+
+const defaultState = {
+  dragging: false,
+  bounds: null,
+  mouseX: 0,
+  mouseY: 0,
+  box: {
+    x: 0, y: 0,
+    w: 0, h: 0,
+  },
+  page: null,
+  highlightedPageId: null,
+  measurements: {},
+}
+
+class GraphEditor extends Component {
+  state = {
+    ...defaultState,
+  }
+
+  constructor() {
+    super()
+    // bind these events in the constructor, so we can remove event listeners later
+    this.handleMouseDown = this.handleMouseDown.bind(this)
+    this.handleMouseMove = this.handleMouseMove.bind(this)
+    this.handleMouseUp = this.handleMouseUp.bind(this)
+    this.handleWindowResize = this.handleWindowResize.bind(this)
+    this.handleMouseEnter = this.handleMouseEnter.bind(this)
+    this.handleMouseLeave = this.handleMouseLeave.bind(this)
+    this.graphRef = React.createRef()
+    this.measurements = {}
+  }
+
+  getBoundingClientRect() {
+    if (!this.graphRef.current) return null
+    const rect = this.graphRef.current.getBoundingClientRect()
+    const scrollTop = document.body.scrollTop || document.body.parentNode.scrollTop
+    const scrollLeft = document.body.scrollLeft || document.body.parentNode.scrollLeft
+    const bounds = {
+      top: rect.top + scrollTop,
+      left: rect.left + scrollLeft,
+      width: rect.width,
+      height: rect.height,
+    }
+    // console.log(bounds)
+    return bounds
+  }
+
+  componentDidMount() {
+    document.body.addEventListener('mousemove', this.handleMouseMove)
+    document.body.addEventListener('mouseup', this.handleMouseUp)
+    window.addEventListener('resize', this.handleWindowResize)
+    this.setState({ bounds: this.getBoundingClientRect() })
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!this.state.bounds) {
+      this.setState({ bounds: this.getBoundingClientRect() })
+    }
+  }
+
+  addMeasurement({ id, width, height }) {
+    this.measurements[id] = { width, height }
+    this.setState({
+      measurements: { ...this.measurements },
+    })
+  }
+
+  handleWindowResize() {
+    this.setState({ bounds: this.getBoundingClientRect() })
+  }
+
+  handleMouseDown(e, page) {
+    if (e.shiftKey) {
+      e.preventDefault()
+      this.props.graphActions.setHomePageId(this.props.graph.show.res, page)
+      return
+    }
+    const bounds = this.getBoundingClientRect()
+    const mouseX = e.pageX
+    const mouseY = e.pageY
+    let w = 128 / bounds.width
+    let h = 16 / bounds.height
+    let { x, y } = page.settings
+    x = clamp(x, 0, 1)
+    y = clamp(y, 0, 1)
+    this.setState({
+      page,
+      dragging: true,
+      bounds,
+      mouseX,
+      mouseY,
+      box: {
+        x, y,
+        w, h,
+      },
+      initialBox: {
+        x, y,
+        w, h,
+      }
+    })
+  }
+
+  handleMouseMove(e) {
+    const {
+      dragging,
+      bounds, mouseX, mouseY, initialBox, box
+    } = this.state
+    if (dragging) {
+      e.preventDefault()
+      let { x, y, w, h } = initialBox
+      let dx = (e.pageX - mouseX) / bounds.width
+      let dy = (e.pageY - mouseY) / bounds.height
+      this.setState({
+        box: {
+          x: clamp(x + dx, 0, 1.0 - w),
+          y: clamp(y + dy, 0, 1.0 - h),
+          w, h,
+        }
+      })
+    }
+  }
+
+  handleMouseUp(e) {
+    // const { actions } = this.props
+    const { dragging, bounds, initialBox, box, page } = this.state
+    if (!dragging) return
+    e.preventDefault()
+    const { width, height } = bounds
+    const { x, y, w, h } = box
+    let url = window.location.pathname
+    this.setState({
+      page: null,
+      box: null,
+      initialBox: null,
+      dragging: false,
+    })
+    if (dist(width * x, height * y, width * initialBox.x, height * initialBox.y) < 3) return
+    const updatedPage = {
+      ...page,
+      settings: {
+        ...page.settings,
+        x, y,
+      }
+    }
+    this.props.graphActions.updateGraphPage(updatedPage)
+    actions.page.update(updatedPage)
+  }
+
+  handleMouseEnter(e, page) {
+    this.setState({ highlightedPageId: page.id })
+  }
+  handleMouseLeave(e, page) {
+    this.setState({ highlightedPageId: null })
+  }
+
+  render(){
+    // console.log(this.props.graph.show.res)
+    const { page: currentPage, box, measurements, highlightedPageId } = this.state
+    const { res: graph } = this.props.graph.show
+    // console.log(res.pages)
+    return (    
+      <div className='graph' ref={this.graphRef}>
+        <GraphCanvas
+          bounds={this.state.bounds}
+          pages={graph.pages}
+          currentPage={currentPage}
+          highlightedPageId={highlightedPageId}
+          measurements={measurements}
+          box={box}
+        />
+        {this.state.bounds && graph.pages.map(page => (
+          <PageHandle
+            key={page.id}
+            graph={graph}
+            page={page}
+            bounds={this.state.bounds}
+            box={currentPage && page.id === currentPage.id && box}
+            onMouseDown={e => this.handleMouseDown(e, page)}
+            onMouseEnter={e => this.handleMouseEnter(e, page)}
+            onMouseLeave={e => this.handleMouseLeave(e, page)}
+            onMeasure={measurement => this.addMeasurement(measurement)}
+          />
+        ))}
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  graph: state.graph,
+})
+
+const mapDispatchToProps = dispatch => ({
+  graphActions: bindActionCreators({ ...graphActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(GraphEditor)
diff --git a/frontend/app/views/graph/components/graph.header.js b/frontend/app/views/graph/components/graph.header.js
new file mode 100644
index 0000000..46ad962
--- /dev/null
+++ b/frontend/app/views/graph/components/graph.header.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
+
+import * as graphActions from '../graph.actions'
+
+function GraphHeader(props) {
+  return (
+    <header>
+      <div>
+        <Link to="/" className="logo"><b>{props.site.siteTitle}</b></Link>
+      </div>
+      <div>
+        <button onClick={() => props.graphActions.toggleAddPageForm()}>+ Add page</button>
+      </div>
+    </header>
+  )
+}
+
+const mapStateToProps = (state) => ({
+  // auth: state.auth,
+  site: state.site,
+  // isAuthenticated: state.auth.isAuthenticated,
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  graphActions: bindActionCreators({ ...graphActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(GraphHeader) 
diff --git a/frontend/app/views/graph/components/page.edit.js b/frontend/app/views/graph/components/page.edit.js
new file mode 100644
index 0000000..4025726
--- /dev/null
+++ b/frontend/app/views/graph/components/page.edit.js
@@ -0,0 +1,65 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+
+import { history } from 'app/store'
+import actions from 'app/actions'
+import * as siteActions from 'app/views/site/site.actions'
+import * as graphActions from 'app/views/graph/graph.actions'
+
+import { Loader } from 'app/common'
+
+import PageForm from '../components/page.form'
+
+class PageEdit extends Component {
+  componentDidMount() {
+    // actions.page.show(this.props.match.params.id)
+  }
+
+  handleSubmit(data) {
+    const { path: graphPath } = this.props.graph.show.res
+    const { path: oldPagePath } = this.props.page.show.res
+    const { path: newPagePath } = data
+    actions.page.update(data)
+      .then(response => {
+        // console.log(response)
+        actions.site.setSiteTitle(response.res.title)
+        this.props.graphActions.hideEditPageForm()
+        if (oldPagePath !== newPagePath) {
+          const newPath = '/' + graphPath + '/' + newPagePath
+          history.push(newPath)
+        }
+      })
+  }
+
+  render() {
+    const { show } = this.props.page
+    if (show.loading || !show.res) {
+      return (
+        <div className='form'>
+          <Loader />
+        </div>
+      )
+    }
+    return (
+      <PageForm
+        data={show.res}
+        graph={this.props.graph.show.res}
+        onSubmit={this.handleSubmit.bind(this)}
+      />
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  graph: state.graph,
+  page: state.page,
+})
+
+const mapDispatchToProps = dispatch => ({
+  siteActions: bindActionCreators({ ...siteActions }, dispatch),
+  graphActions: bindActionCreators({ ...graphActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(PageEdit)
diff --git a/frontend/app/views/graph/components/page.form.js b/frontend/app/views/graph/components/page.form.js
new file mode 100644
index 0000000..8fc00b0
--- /dev/null
+++ b/frontend/app/views/graph/components/page.form.js
@@ -0,0 +1,185 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+
+import { session } from 'app/session'
+
+import { TextInput, ColorInput, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from 'app/common'
+
+const newPage = (data) => ({
+  path: '',
+  title: '',
+  username: session('username'),
+  description: '',
+  settings: {
+    x: 0.05,
+    y: 0.05,
+    background_color: '#000000',
+  },
+  ...data,
+})
+
+export default class PageForm extends Component {
+  state = {
+    title: "",
+    submitTitle: "",
+    data: { ...newPage() },
+    errorFields: new Set([]),
+  }
+
+  componentDidMount() {
+    const { graph, data, isNew } = this.props
+    const title = isNew ? 'new page' : 'editing ' + data.title
+    const submitTitle = isNew ? "Create Page" : "Save Changes"
+    this.setState({
+      title,
+      submitTitle,
+      errorFields: new Set([]),
+      data: { 
+        ...newPage({ graph_id: graph.id }),
+        ...data,
+      },
+    })
+  }
+
+  handleChange(e) {
+    const { errorFields } = this.state
+    const { name, value } = e.target
+    if (errorFields.has(name)) {
+      errorFields.delete(name)
+    }
+    let sanitizedValue = value
+    if (name === 'path') {
+      sanitizedValue = sanitizedValue.toLowerCase().replace(/ /, '-').replace(/[!@#$%^&*()[\]{}]/, '-').replace(/-+/, '-')
+    }
+    this.setState({
+      errorFields,
+      data: {
+        ...this.state.data,
+        [name]: sanitizedValue,
+      }
+    })
+  }
+
+  handleSelect(name, value) {
+    const { errorFields } = this.state
+    if (errorFields.has(name)) {
+      errorFields.delete(name)
+    }
+    this.setState({
+      errorFields,
+      data: {
+        ...this.state.data,
+        [name]: value,
+      }
+    })
+  }
+
+  handleSettingsChange(e) {
+    const { name, value } = e.target
+    this.setState({
+      data: {
+        ...this.state.data,
+        settings: {
+          ...this.state.data.settings,
+          [name]: value,
+        }
+      }
+    })
+  }
+
+  handleSubmit(e) {
+    e.preventDefault()
+    const { isNew, onSubmit } = this.props
+    const { data } = this.state
+    const requiredKeys = "path title".split(" ")
+    const validKeys = "graph_id path title username description settings".split(" ")
+    const validData = validKeys.reduce((a,b) => { a[b] = data[b]; return a }, {})
+    const errorFields = requiredKeys.filter(key => !validData[key])
+    if (errorFields.length) {
+      console.log('error', errorFields, validData)
+      this.setState({ errorFields: new Set(errorFields) })
+    } else {
+      if (isNew) {
+        // side effect: set username if we're creating a new page
+        // session.set('username', data.username)
+      } else {
+        validData.id = data.id
+      }
+      console.log('submit', validData)
+      onSubmit(validData)
+    }
+  }
+
+  handleDelete() {
+    const { data } = this.state
+    console.log(data)
+    if (confirm('Really delete this page?')) {
+      actions.page.delete(page_id)
+    }
+  }
+
+  render() {
+    const { graph, isNew } = this.props
+    const { title, submitTitle, errorFields, data } = this.state
+    return (
+      <div className='box'>
+        <h1>{title}</h1>
+        <form onSubmit={this.handleSubmit.bind(this)}>
+          <TextInput
+            title="Path"
+            name="path"
+            required
+            data={data}
+            error={errorFields.has('path')}
+            onChange={this.handleChange.bind(this)}
+            autoComplete="off"
+          />
+          <LabelDescription>
+            {'Page URL: /' + graph.path + '/'}<b>{data.path}</b>
+          </LabelDescription>
+          <TextInput
+            title="Title"
+            name="title"
+            required
+            data={data}
+            error={errorFields.has('title')}
+            onChange={this.handleChange.bind(this)}
+            autoComplete="off"
+          />
+          <ColorInput
+            title='BG'
+            name='background_color'
+            data={data.settings}
+            onChange={this.handleSettingsChange.bind(this)}
+            autoComplete="off"
+          />
+          <TextArea
+            title="Description"
+            name="description"
+            data={data}
+            onChange={this.handleChange.bind(this)}
+          />
+          <div className='row buttons'>
+            <SubmitButton
+              title={submitTitle}
+              onClick={this.handleSubmit.bind(this)}
+            />
+            {!isNew && 
+              <SubmitButton
+                title={'Delete'}
+                className='destroy'
+                onClick={this.handleDelete.bind(this)}
+              />
+            }
+          </div>
+          {!!errorFields.size &&
+            <label>
+              <span></span>
+              <span>Please complete the required fields =)</span>
+            </label>
+          }
+        </form>
+      </div>
+    )
+  }
+}
diff --git a/frontend/app/views/graph/components/page.handle.js b/frontend/app/views/graph/components/page.handle.js
new file mode 100644
index 0000000..c024f1e
--- /dev/null
+++ b/frontend/app/views/graph/components/page.handle.js
@@ -0,0 +1,59 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+
+import { history } from 'app/store'
+
+export default class PageHandle extends Component {
+  constructor(props){
+    super(props)
+    this.ref = React.createRef()
+  }
+  componentDidMount(){
+    this.measure()
+  }
+  componentDidUpdate(prevProps){
+    if (this.props.page.title !== prevProps.page.title) {
+      this.measure()
+    }
+  }
+  measure() {
+    const { offsetWidth: width, offsetHeight: height } = this.ref.current
+    const { id } = this.props.page
+    // console.log(id, width, height)
+    this.props.onMeasure({ id, width, height })
+  }
+  render() {
+    const { graph, page, bounds, box, onMouseDown, onMouseEnter, onMouseLeave } = this.props
+    let style;
+    if (box) {
+      style = {
+        top: (bounds.height) * box.y,
+        left: (bounds.width) * box.x,
+      }
+    } else {
+      style = {
+        top: (bounds.height) * Math.min(page.settings.y, 0.95),
+        left: (bounds.width) * Math.min(page.settings.x, 0.95),
+      }
+    }
+    const className = (graph.home_page_id === page.id)
+      ? 'handle homepage'
+      : 'handle'
+    const url = '/' + graph.path + '/' + page.path
+    // console.log(style)
+    return (
+      <div
+        className={className}
+        ref={this.ref}
+        onMouseDown={onMouseDown}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        onDoubleClick={() => history.push(url)}
+        style={style}
+      >
+        {page.path}
+        <Link to={url}>{'>'}</Link>
+      </div>
+    )
+  }
+}
diff --git a/frontend/app/views/graph/components/page.new.js b/frontend/app/views/graph/components/page.new.js
new file mode 100644
index 0000000..e7c3609
--- /dev/null
+++ b/frontend/app/views/graph/components/page.new.js
@@ -0,0 +1,47 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+import { history } from 'app/store'
+import actions from 'app/actions'
+
+import PageForm from '../components/page.form'
+
+class PageNew extends Component {
+  handleSubmit(data) {
+    console.log(data)
+    actions.page.create(data)
+      .then(res => {
+        console.log(res)
+        const graph = this.props.graph.show.res
+        if (res.res && res.res.id) {
+          history.push('/' + graph.path + '/' + res.res.path)
+        }
+      })
+      .catch(err => {
+        console.error('error', err)
+      })
+  }
+
+  render() {
+    return (
+      <PageForm
+        isNew
+        graph={this.props.graph.show.res}
+        data={{}}
+        onSubmit={this.handleSubmit.bind(this)}
+      />
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  graph: state.graph,
+  page: state.page,
+})
+
+const mapDispatchToProps = dispatch => ({
+  // searchActions: bindActionCreators({ ...searchActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(PageNew)
diff --git a/frontend/app/views/graph/graph.actions.js b/frontend/app/views/graph/graph.actions.js
new file mode 100644
index 0000000..a24ccc2
--- /dev/null
+++ b/frontend/app/views/graph/graph.actions.js
@@ -0,0 +1,37 @@
+import * as types from 'app/types'
+import actions from 'app/actions'
+
+export const showAddPageForm = () => dispatch => {
+  dispatch({ type: types.graph.show_add_page_form })
+}
+
+export const hideAddPageForm = () => dispatch => {
+  dispatch({ type: types.graph.hide_add_page_form })
+}
+
+export const toggleAddPageForm = () => dispatch => {
+  dispatch({ type: types.graph.toggle_add_page_form })
+}
+
+export const showEditPageForm = () => dispatch => {
+  dispatch({ type: types.graph.show_edit_page_form })
+}
+
+export const hideEditPageForm = () => dispatch => {
+  dispatch({ type: types.graph.hide_edit_page_form })
+}
+
+export const toggleEditPageForm = () => dispatch => {
+  dispatch({ type: types.graph.toggle_edit_page_form })
+}
+
+export const updateGraphPage = page => dispatch => {
+  dispatch({ type: types.graph.update_graph_page, page })
+}
+
+export const setHomePageId = (graph, page) => dispatch => {
+  let updated_graph = { ...graph }
+  delete updated_graph.pages
+  updated_graph.home_page_id = page.id
+  actions.graph.update(updated_graph)
+}
\ No newline at end of file
diff --git a/frontend/app/views/graph/graph.container.js b/frontend/app/views/graph/graph.container.js
new file mode 100644
index 0000000..9e354fc
--- /dev/null
+++ b/frontend/app/views/graph/graph.container.js
@@ -0,0 +1,82 @@
+import React, { Component } from 'react'
+import { Route } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import './graph.css'
+
+import actions from 'app/actions'
+import { Loader } from 'app/common'
+
+// import * as uploadActions from './upload.actions'
+
+import PageNew from './components/page.new'
+import PageEdit from './components/page.edit'
+
+import GraphHeader from './components/graph.header'
+import GraphEditor from './components/graph.editor'
+
+class GraphContainer extends Component {
+  componentDidMount() {
+    if (this.shouldShowGraph()) this.load()
+  }
+  componentDidUpdate(prevProps) {
+    if (this.shouldLoadGraph(prevProps)) this.load()
+  }
+  shouldShowGraph() {
+    const { graph_name, page_name } = this.props.match.params
+    return (graph_name && !page_name && graph_name !== 'index')
+  }
+  shouldLoadGraph(prevProps) {
+    const { graph, location } = this.props
+    const { key } = location
+    if (key === prevProps.location.key) return false
+    if (!this.shouldShowGraph()) return false
+    return (graph.show.name === prevProps.graph.show.name)
+  }
+  load() {
+    actions.site.setSiteTitle("loading " + this.props.match.params.graph_name + "...")
+    actions.graph.show('name/' + this.props.match.params.graph_name)
+    .then(data => {
+      actions.site.setSiteTitle(data.res.title)
+    })
+  }
+  render() {
+    if (!this.shouldShowGraph()) return <div />
+    if (!this.props.graph.show.res || this.props.graph.show.loading) {
+      return (
+        <div>
+          <GraphHeader />
+          <div className='body'>
+            <div className='graph loading'>
+              <Loader />
+            </div>
+          </div>
+        </div>
+      )
+    }
+    return (
+      <div>
+        <GraphHeader />
+        <div className='body'>
+          <GraphEditor />
+          <div className='sidebar'>
+            {this.props.graph.editor.addingPage && <PageNew />}
+            {this.props.graph.editor.editingPage && <PageEdit />}
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+// <Route exact path='/:graph_name' component={GraphView} />
+const mapStateToProps = state => ({
+  graph: state.graph,
+})
+
+const mapDispatchToProps = dispatch => ({
+  // uploadActions: bindActionCreators({ ...uploadActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(GraphContainer)
diff --git a/frontend/app/views/graph/graph.css b/frontend/app/views/graph/graph.css
new file mode 100644
index 0000000..389a55d
--- /dev/null
+++ b/frontend/app/views/graph/graph.css
@@ -0,0 +1,172 @@
+.graph.loading {
+  padding: 1rem;
+}
+.graph {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: linear-gradient(
+      0deg,
+      rgba(128, 0, 64, 0.5),
+      rgba(0, 0, 64, 0.5)
+    );
+}
+.graph canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+/* Sidebar boxes */
+
+.sidebar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 1rem;
+  overflow: auto;
+  max-height: 100%;
+  z-index: 20;
+}
+.box {
+  width: 15rem;
+  padding: 0.5rem;
+  background: rgba(64,12,64,0.9);
+  border: 2px solid #000;
+  box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+}
+.box h1,
+.box h2 {
+  font-size: 1rem;
+  margin: 0 0 0.5rem 0;
+}
+.box form label {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-bottom: 0.25rem;
+}
+.box form .buttons {
+  justify-content: space-between;
+}
+.box form .buttons label {
+  width: auto;
+  min-width: auto;
+}
+.box form .buttons label span {
+  display: none;
+}
+.box form .buttons button:last-child {
+  margin-right: 0;
+}
+.box form label.checkbox {
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+.box form input[type="checkbox"] {
+  margin-left: 0rem;
+}
+.box form input[type=checkbox] + span {
+  color: #ddd;
+}
+.box form input[type=checkbox]:hover + span {
+  color: #fff;
+}
+.box form input[type="checkbox"]:after {
+  border-color: #84f;
+}
+.box form input[type="checkbox"]:checked:after {
+  border-color: #84f;
+  background-color: #84f;
+}
+.box form input[type=checkbox]:hover + span {
+  color: #84f;
+}
+.box input[type=text],
+.box input[type=number],
+.box input[type=password] {
+  padding: 0.25rem;
+  max-width: 100%;
+  border-color: #888;
+}
+.box textarea {
+  max-width: 100%;
+  height: 5rem;
+  border-color: #888;
+}
+.box .select {
+  padding: 0.25rem;
+  margin-right: 0;
+}
+.box .selects label {
+  flex-direction: row;
+  width: 6.5rem;
+  margin-right: 0.5rem;
+  min-width: auto;
+}
+.box form textarea {
+  padding: 0.25rem;
+}
+
+.box form .pair label span {
+  min-width: 3rem;
+  padding: 0.25rem 0;
+}
+.box .pair label {
+  flex-direction: row;
+  width: 6.5rem;
+  margin-right: 0.5px;
+  min-width: auto;
+}
+.box .pair input[type=text] {
+  width: 3rem;
+}
+.box .position {
+  font-size: smaller;
+  margin-bottom: 0.25rem;
+}
+
+.box .slider {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.box .slider span {
+  min-width: 4rem;
+  width: 4rem;
+  padding: 0.125rem 0;
+}
+.box .slider input[type='number'] {
+  width: 3.5rem;
+}
+.box .slider input[type='range'] {
+  width: 5.5rem; 
+}
+
+/* Graph handles */
+
+.handle {
+  position: absolute;
+  border: 2px solid #888;
+  background: #8833dd;
+  padding: 0.25rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 8rem;
+  user-select: none;
+  cursor: arrow;
+}
+.handle.homepage {
+  background: #533854;
+  border-color: #edc40e;
+}
+.handle a {
+  margin-left: 0.25rem;
+  color: #fff;
+  font-weight: bold;
+  text-decoration: none;
+}
diff --git a/frontend/app/views/graph/graph.reducer.js b/frontend/app/views/graph/graph.reducer.js
new file mode 100644
index 0000000..6be5089
--- /dev/null
+++ b/frontend/app/views/graph/graph.reducer.js
@@ -0,0 +1,100 @@
+import * as types from 'app/types'
+// import { session, getDefault, getDefaultInt } from 'app/session'
+
+import { crudState, crudReducer } from 'app/api/crud.reducer'
+
+const initialState = crudState('graph', {
+  editor: {
+    addingPage: false,
+    editingPage: false,
+  },
+  options: {
+  }
+})
+
+const reducer = crudReducer('graph')
+
+export default function graphReducer(state = initialState, action) {
+  // console.log(action.type, action)
+  state = reducer(state, action)
+  switch (action.type) {
+    case types.graph.update_graph_page:
+      return {
+        ...state,
+        show: {
+          ...state.show,
+          res: {
+            ...state.show.res,
+            pages: state.show.res.pages.map(page => {
+              if (page.id === action.page.id) {
+                return { ...action.page }
+              } else {
+                return page
+              }
+            }),
+          }
+        }
+      }
+
+    case types.graph.show_add_page_form:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          addingPage: true,
+          editingPage: false,
+        }
+      }
+
+    case types.graph.hide_add_page_form:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          addingPage: false,
+        }
+      }
+
+    case types.graph.toggle_add_page_form:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          addingPage: !state.editor.addingPage,
+          editingPage: false,
+        }
+      }
+
+    case types.graph.show_edit_page_form:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          addingPage: false,
+          editingPage: true,
+        }
+      }
+
+    case types.graph.hide_edit_page_form:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          editingPage: false,
+        }
+      }
+
+    case types.graph.toggle_edit_page_form:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          addingPage: false,
+          editingPage: !state.editor.editingPage,
+        }
+      }
+
+    default:
+      return state
+  }
+}
diff --git a/frontend/app/views/index.js b/frontend/app/views/index.js
new file mode 100644
index 0000000..c50ab80
--- /dev/null
+++ b/frontend/app/views/index.js
@@ -0,0 +1,4 @@
+export { default as index } from './index/index.container'
+export { default as graph } from './graph/graph.container'
+export { default as page } from './page/page.container'
+export { default as upload } from './upload/upload.container'
diff --git a/frontend/app/views/index/components/graph.form.js b/frontend/app/views/index/components/graph.form.js
new file mode 100644
index 0000000..4b3a7af
--- /dev/null
+++ b/frontend/app/views/index/components/graph.form.js
@@ -0,0 +1,153 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+
+import { session } from 'app/session'
+
+import { TextInput, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from 'app/common'
+
+const newGraph = () => ({
+  path: '',
+  title: '',
+  username: session('username'),
+  description: '',
+})
+
+export default class GraphForm extends Component {
+  state = {
+    title: "",
+    submitTitle: "",
+    data: { ...newGraph() },
+    errorFields: new Set([]),
+  }
+
+  componentDidMount() {
+    const { data, isNew } = this.props
+    const title = isNew ? 'new project' : 'editing ' + data.title
+    const submitTitle = isNew ? "Create Graph" : "Save Changes"
+    this.setState({
+      title,
+      submitTitle,
+      errorFields: new Set([]),
+      data: { 
+        ...newGraph(),
+        ...data
+      },
+    })
+  }
+
+  handleChange(e) {
+    const { errorFields } = this.state
+    const { name, value } = e.target
+    if (errorFields.has(name)) {
+      errorFields.delete(name)
+    }
+    let sanitizedValue = value
+    if (name === 'path') {
+      sanitizedValue = sanitizedValue.toLowerCase().replace(/ /, '-').replace(/[!@#$%^&*()[\]{}]/, '-').replace(/-+/, '-')
+    }
+    this.setState({
+      errorFields,
+      data: {
+        ...this.state.data,
+        [name]: sanitizedValue,
+      }
+    })
+  }
+
+  handleSelect(name, value) {
+    const { errorFields } = this.state
+    if (errorFields.has(name)) {
+      errorFields.delete(name)
+    }
+    this.setState({
+      errorFields,
+      data: {
+        ...this.state.data,
+        [name]: value,
+      }
+    })
+  }
+
+  handleSubmit(e) {
+    e.preventDefault()
+    const { isNew, onSubmit } = this.props
+    const { data } = this.state
+    const requiredKeys = "title username path description".split(" ")
+    const validKeys = "title username path description".split(" ")
+    const validData = validKeys.reduce((a,b) => { a[b] = data[b]; return a }, {})
+    const errorFields = requiredKeys.filter(key => !validData[key])
+    if (errorFields.length) {
+      console.log('error', errorFields, validData)
+      this.setState({ errorFields: new Set(errorFields) })
+    } else {
+      if (isNew) {
+        // side effect: set username if we're creating a new graph
+        session.set('username', data.username)
+      } else {
+        validData.id = data.id
+      }
+      console.log('submit', validData)
+      onSubmit(validData)
+    }
+  }
+
+  render() {
+    const { isNew } = this.props
+    const { title, submitTitle, errorFields, data } = this.state
+    return (
+      <div className='form'>
+        <h1>{title}</h1>
+        <form onSubmit={this.handleSubmit.bind(this)}>
+          <TextInput
+            title="Path"
+            name="path"
+            required
+            data={data}
+            error={errorFields.has('path')}
+            onChange={this.handleChange.bind(this)}
+            autoComplete="off"
+          />
+          <LabelDescription>
+            {data.path
+              ? 'Project URLs will be: /' + data.path + '/example'
+              : 'Enter the base path for this project.'}
+          </LabelDescription>
+          <TextInput
+            title="Title"
+            name="title"
+            required
+            data={data}
+            error={errorFields.has('title')}
+            onChange={this.handleChange.bind(this)}
+            autoComplete="off"
+          />
+          <TextInput
+            title="Author"
+            name="username"
+            required
+            data={data}
+            error={errorFields.has('username')}
+            onChange={this.handleChange.bind(this)}
+            autoComplete="off"
+          />
+          <TextArea
+            title="Description"
+            name="description"
+            data={data}
+            onChange={this.handleChange.bind(this)}
+          />
+          <SubmitButton
+            title={submitTitle}
+            onClick={this.handleSubmit.bind(this)}
+          />
+          {!!errorFields.size &&
+            <label>
+              <span></span>
+              <span>Please complete the required fields =)</span>
+            </label>
+          }
+        </form>
+      </div>
+    )
+  }
+}
diff --git a/frontend/app/views/index/containers/graph.edit.js b/frontend/app/views/index/containers/graph.edit.js
new file mode 100644
index 0000000..b459cd8
--- /dev/null
+++ b/frontend/app/views/index/containers/graph.edit.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+import { history } from 'app/store'
+import actions from 'app/actions'
+
+import { Loader } from 'app/common'
+
+import GraphForm from '../components/graph.form'
+
+class GraphEdit extends Component {
+  componentDidMount() {
+    console.log(this.props.match.params.id)
+    actions.graph.show(this.props.match.params.id)
+  }
+
+  handleSubmit(data) {
+    actions.graph.update(data)
+      .then(response => {
+        // response
+        console.log(response)
+        history.push('/' + data.path)
+      })
+  }
+
+  render() {
+    const { show } = this.props.graph
+    if (show.loading || !show.res) {
+      return (
+        <div className='form'>
+          <Loader />
+        </div>
+      )
+    }
+    return (
+      <GraphForm
+        data={show.res}
+        onSubmit={this.handleSubmit.bind(this)}
+      />
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  graph: state.graph,
+})
+
+const mapDispatchToProps = dispatch => ({
+  // searchActions: bindActionCreators({ ...searchActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(GraphEdit)
diff --git a/frontend/app/views/index/containers/graph.index.js b/frontend/app/views/index/containers/graph.index.js
new file mode 100644
index 0000000..91098a7
--- /dev/null
+++ b/frontend/app/views/index/containers/graph.index.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import { Loader } from 'app/common'
+import actions from 'app/actions'
+// import * as uploadActions from './upload.actions'
+
+class GraphIndex extends Component {
+  componentDidMount() {
+    actions.graph.index()
+  }
+  render() {
+    const { index } = this.props
+    // console.log(this.props)
+    if (!index.order) {
+      return (
+        <div className='graphIndex'>
+          <Loader />
+        </div>
+      )      
+    }
+    // console.log(state)
+    return (
+      <div className='graphIndex'>
+        <div>
+          <b>welcome, swimmer</b>
+          <Link to='/index/new'>+ new project</Link>
+        </div>
+        {index.order.map(id => {
+          const graph = index.lookup[id]
+          return (
+            <div key={id}>
+              <Link to={'/' + graph.path}>{graph.title}</Link>
+              <Link to={'/index/' + id + '/edit'}>{'edit project'}</Link>
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  index: state.graph.index,
+})
+
+const mapDispatchToProps = dispatch => ({
+  // uploadActions: bindActionCreators({ ...uploadActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(GraphIndex)
diff --git a/frontend/app/views/index/containers/graph.new.js b/frontend/app/views/index/containers/graph.new.js
new file mode 100644
index 0000000..28d2f73
--- /dev/null
+++ b/frontend/app/views/index/containers/graph.new.js
@@ -0,0 +1,44 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+import { history } from 'app/store'
+import actions from 'app/actions'
+
+import GraphForm from '../components/graph.form'
+
+class GraphNew extends Component {
+  handleSubmit(data) {
+    console.log(data)
+    actions.graph.create(data)
+      .then(res => {
+        console.log(res)
+        if (res.res && res.res.id) {
+          history.push('/' + res.res.path)
+        }
+      })
+      .catch(err => {
+        console.error('error')
+      })
+  }
+
+  render() {
+    return (
+      <GraphForm
+        isNew
+        data={{}}
+        onSubmit={this.handleSubmit.bind(this)}
+      />
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  graph: state.graph,
+})
+
+const mapDispatchToProps = dispatch => ({
+  // searchActions: bindActionCreators({ ...searchActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(GraphNew)
diff --git a/frontend/app/views/index/index.container.js b/frontend/app/views/index/index.container.js
new file mode 100644
index 0000000..b1fa59f
--- /dev/null
+++ b/frontend/app/views/index/index.container.js
@@ -0,0 +1,36 @@
+import React, { Component } from 'react'
+import { Route } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import './index.css'
+
+import actions from 'app/actions'
+import { Header } from 'app/common'
+// import * as uploadActions from './upload.actions'
+
+import GraphIndex from './containers/graph.index'
+import GraphNew from './containers/graph.new'
+import GraphEdit from './containers/graph.edit'
+
+class Container extends Component {
+  componentDidMount() {
+    actions.site.setSiteTitle("swimmer")
+  }
+  render() {
+    return (
+      <div>
+        <Header />
+        <div className='body'>
+          <div className='index'>
+            <Route exact path='/index/new' component={GraphNew} />
+            <Route exact path='/index/:id/edit' component={GraphEdit} />
+            <Route exact path='/index' component={GraphIndex} />
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Container
diff --git a/frontend/app/views/index/index.css b/frontend/app/views/index/index.css
new file mode 100644
index 0000000..028f6c2
--- /dev/null
+++ b/frontend/app/views/index/index.css
@@ -0,0 +1,38 @@
+* {
+
+}
+.index {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+      -45deg,
+      rgba(0, 0, 64, 0.5),
+      rgba(128, 0, 64, 0.5)
+    );
+  padding: 1rem;
+}
+.index > div {
+  display: inline-block;
+  padding: 1rem;
+  max-height: calc(100% - 2rem);
+  overflow: scroll;
+  background: rgba(64,12,64,0.9);
+  box-shadow: 3px 3px 6px rgba(0,0,0,0.4),
+    inset 0 0 60px rgba(128,255,255,0.1);
+}
+.graphIndex {
+  min-width: 20rem;
+  display: flex;
+  flex-direction: column;
+}
+.graphIndex > * {
+  margin-bottom: 0.5rem;
+}
+.graphIndex > div {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between
+}
+.graphIndex > div > a:first-child {
+  color: #fff;
+}
\ No newline at end of file
diff --git a/frontend/app/views/page/components/page.editor.js b/frontend/app/views/page/components/page.editor.js
new file mode 100644
index 0000000..d324874
--- /dev/null
+++ b/frontend/app/views/page/components/page.editor.js
@@ -0,0 +1,215 @@
+import React, { Component } from 'react'
+import { Route } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import { session } from 'app/session'
+import actions from 'app/actions'
+import * as pageActions from '../page.actions'
+import * as tileActions from '../../tile/tile.actions'
+
+import { Loader } from 'app/common'
+import { clamp, dist } from 'app/utils'
+
+import TileHandle from './tile.handle'
+
+const defaultState = {
+  dragging: false,
+  bounds: null,
+  mouseX: 0,
+  mouseY: 0,
+  box: {
+    x: 0, y: 0,
+    w: 0, h: 0,
+  },
+  tile: null,
+}
+
+class PageEditor extends Component {
+  state = {
+    ...defaultState,
+  }
+
+  constructor() {
+    super()
+    // bind these events in the constructor, so we can remove event listeners later
+    this.handleMouseDown = this.handleMouseDown.bind(this)
+    this.handleMouseMove = this.handleMouseMove.bind(this)
+    this.handleMouseUp = this.handleMouseUp.bind(this)
+    this.handleWindowResize = this.handleWindowResize.bind(this)
+    this.pageRef = React.createRef()
+  }
+
+  getBoundingClientRect() {
+    if (!this.pageRef.current) return null
+    const rect = this.pageRef.current.getBoundingClientRect()
+    const scrollTop = document.body.scrollTop || document.body.parentNode.scrollTop
+    const scrollLeft = document.body.scrollLeft || document.body.parentNode.scrollLeft
+    const bounds = {
+      top: rect.top + scrollTop,
+      left: rect.left + scrollLeft,
+      width: rect.width,
+      height: rect.height,
+    }
+    // console.log(bounds)
+    return bounds
+  }
+
+  componentDidMount() {
+    document.body.addEventListener('mousemove', this.handleMouseMove)
+    document.body.addEventListener('mouseup', this.handleMouseUp)
+    window.addEventListener('resize', this.handleWindowResize)
+    this.setState({ bounds: this.getBoundingClientRect() })
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!this.state.bounds) {
+      this.setState({ bounds: this.getBoundingClientRect() })
+    }
+  }
+
+  handleWindowResize() {
+    this.setState({ bounds: this.getBoundingClientRect() })
+  }
+
+  handleMouseDown(e, tile) {
+    const bounds = this.getBoundingClientRect()
+    const mouseX = e.pageX
+    const mouseY = e.pageY
+    // let w = 128 / bounds.width
+    // let h = 16 / bounds.height
+    let { x, y } = tile.settings
+    // x = clamp(x, 0, 1)
+    // y = clamp(y, 0, 1)
+    this.setState({
+      tile,
+      draggingBox: true,
+      bounds,
+      mouseX,
+      mouseY,
+      box: {
+        dx: 0, dy: 0,
+        // x, y,
+        // w, h,
+      },
+      initialBox: {
+        // x, y,
+        // w, h,
+      }
+    })
+  }
+
+  handleMouseMove(e) {
+    const {
+      dragging, draggingBox,
+      bounds, mouseX, mouseY, initialBox, box
+    } = this.state
+    if (draggingBox) {
+      e.preventDefault()
+      let { x, y, w, h } = initialBox
+      let dx = (e.pageX - mouseX)
+      let dy = (e.pageY - mouseY)
+      this.setState({
+        box: {
+          dx, dy,
+          // x: clamp(x + (dx / bounds.width), 0, 1.0 - w),
+          // y: clamp(y + (dy / bounds.height), 0, 1.0 - h),
+          // w, h,
+        }
+      })
+    }
+  }
+
+  handleMouseUp(e) {
+    // const { actions } = this.props
+    const { temporaryTile } = this.props
+    const { dragging, draggingBox, bounds, box, tile } = this.state
+    if (!dragging && !draggingBox) return
+    e.preventDefault()
+    // const { x, y, w, h } = box
+    const { dx, dy } = box
+    let url = window.location.pathname
+    this.setState({
+      page: null,
+      box: null,
+      initialBox: null,
+      dragging: false,
+      draggingBox: false,
+    })
+    // console.log(page)
+    if (dist(0, 0, dx, dy) < 2) {
+      return
+    }
+    const updatedTile = {
+      ...tile,
+      settings: {
+        ...tile.settings,
+        x: tile.settings.x + dx,
+        y: tile.settings.y + dy,
+      }
+    }
+    if (temporaryTile && tile.id === temporaryTile.id) {
+      this.props.tileActions.updateTemporaryTile(updatedTile)
+    }
+    if (tile.id !== 'new') {
+      console.log(updatedTile)
+      this.props.pageActions.updatePageTile(updatedTile)
+      actions.tile.update(updatedTile)
+    }
+  }
+
+  render(){
+    if (!this.state.bounds || (!this.props.page.show.res && !this.props.page.show.res.tiles)) {
+      return (
+        <div className='page' ref={this.pageRef} />
+      )
+    }
+    const { temporaryTile } = this.props
+    const currentTile = this.state.tile
+    const currentBox = this.state.box
+    const { res } = this.props.page.show
+    const { settings } = res
+    const pageStyle = { backgroundColor: settings ? settings.background_color : '#000000' }
+    return (
+      <div className='page' ref={this.pageRef} style={pageStyle}>
+        {res.tiles.map(tile => {
+          if (temporaryTile && temporaryTile.id === tile.id) {
+            tile = temporaryTile
+          }
+          return (
+            <TileHandle
+              key={tile.id}
+              tile={tile}
+              bounds={this.state.bounds}
+              box={currentTile && tile.id === currentTile.id && currentBox}
+              onMouseDown={e => this.handleMouseDown(e, tile)}
+              onDoubleClick={e => this.props.pageActions.showEditTileForm(tile.id)}
+            />
+          )
+        })}
+        {!!(temporaryTile && temporaryTile.id === 'new') && (
+          <TileHandle
+            key={temporaryTile.id}
+            tile={temporaryTile}
+            bounds={this.state.bounds}
+            box={currentTile && temporaryTile.id === currentTile.id && currentBox}
+            onMouseDown={e => this.handleMouseDown(e, temporaryTile)}
+          />
+        )}
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  graph: state.graph,
+  page: state.page,
+  temporaryTile: state.tile.temporaryTile,
+})
+
+const mapDispatchToProps = dispatch => ({
+  pageActions: bindActionCreators({ ...pageActions }, dispatch),
+  tileActions: bindActionCreators({ ...tileActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(PageEditor)
diff --git a/frontend/app/views/page/components/page.header.js b/frontend/app/views/page/components/page.header.js
new file mode 100644
index 0000000..eb1c3b9
--- /dev/null
+++ b/frontend/app/views/page/components/page.header.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
+
+import * as graphActions from '../../graph/graph.actions'
+import * as pageActions from '../page.actions'
+
+function PageHeader(props) {
+  return (
+    <header>
+      <div>
+        <Link to={props.graph.show.res ? "/" + props.graph.show.res.path : "/"} className="logo"><b>{props.site.siteTitle}</b></Link>
+      </div>
+      <div>
+        <button onClick={() => props.pageActions.toggleAddTileForm()}>+ Add tile</button>
+        <button onClick={() => props.pageActions.toggleTileList()}>Sort tiles</button>
+        <button onClick={() => props.graphActions.toggleEditPageForm()}>Edit page</button>
+      </div>
+    </header>
+  )
+}
+
+const mapStateToProps = (state) => ({
+  // auth: state.auth,
+  site: state.site,
+  graph: state.graph,
+  // isAuthenticated: state.auth.isAuthenticated,
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  graphActions: bindActionCreators({ ...graphActions }, dispatch),
+  pageActions: bindActionCreators({ ...pageActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(PageHeader) 
diff --git a/frontend/app/views/page/components/tile.edit.js b/frontend/app/views/page/components/tile.edit.js
new file mode 100644
index 0000000..2ea09d1
--- /dev/null
+++ b/frontend/app/views/page/components/tile.edit.js
@@ -0,0 +1,84 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+// import { history } from 'app/store'
+import actions from 'app/actions'
+import * as pageActions from '../../page/page.actions'
+import * as tileActions from '../../tile/tile.actions'
+
+import { Loader } from 'app/common'
+
+import TileForm from '../components/tile.form'
+
+class TileEdit extends Component {
+  state = {
+    tile: null
+  }
+
+  componentDidMount() {
+    this.load()
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.page.editor.currentEditTileId !== this.props.page.editor.currentEditTileId) {
+      this.load()
+    }
+  }
+
+  load() {
+    const { currentEditTileId } = this.props.page.editor
+    const tile = this.props.page.show.res.tiles.filter(tile => tile.id === currentEditTileId)[0]
+    console.log('edit', currentEditTileId)
+    this.setState({ tile })
+  }
+
+  handleSubmit(data) {
+    actions.tile.update(data)
+      .then(response => {
+        // console.log(response)
+        if (response.status === 'ok') {
+          this.props.pageActions.updatePageTile(response.res)
+        }
+      })
+  }
+
+  handleClose() {
+    this.props.pageActions.hideEditTileForm()
+    this.props.tileActions.clearTemporaryTile()
+  }
+
+  render() {
+    const { tile } = this.state
+    if (!tile) {
+      return (
+        <div className='form'>
+          <Loader />
+        </div>
+      )
+    }
+    return (
+      <TileForm
+        initialData={tile}
+        graph={this.props.graph.show.res}
+        page={this.props.page.show.res}
+        onSubmit={this.handleSubmit.bind(this)}
+        onClose={this.handleClose.bind(this)}
+      />
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  graph: state.graph,
+  page: state.page,
+  tile: state.tile,
+})
+
+const mapDispatchToProps = dispatch => ({
+  pageActions: bindActionCreators({ ...pageActions }, dispatch),
+  tileActions: bindActionCreators({ ...tileActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(TileEdit)
diff --git a/frontend/app/views/page/components/tile.form.js b/frontend/app/views/page/components/tile.form.js
new file mode 100644
index 0000000..5b25f13
--- /dev/null
+++ b/frontend/app/views/page/components/tile.form.js
@@ -0,0 +1,645 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import { Link } from 'react-router-dom'
+
+import actions from 'app/actions'
+import { session } from 'app/session'
+
+import {
+  TextInput, NumberInput, ColorInput, Slider,
+  Select, LabelDescription, TextArea, Checkbox,
+  SubmitButton, Loader } from 'app/common'
+import { preloadImage } from 'app/utils'
+
+import * as tileActions from '../../tile/tile.actions'
+
+const SELECT_TYPES = [
+  "image", "text", "link"
+].map(s => ({ name: s, label: s }))
+
+const ALIGNMENTS = [
+  "top_left", "top_center", "top_right",
+  "center_left", "center_center", "center_right",
+  "bottom_left", "bottom_center", "bottom_right",
+].map(align => ({
+  name: align,
+  label: align === 'center_center'
+    ? 'center'
+    : align.replace('_', ' ')
+  }))
+
+const REQUIRED_KEYS = {
+  image: ['url'],
+  text: ['content'],
+  link: [],
+}
+
+const IMAGE_TILE_STYLES = [
+  'tile', 'cover', 'contain', 'contain no-repeat'
+].map(style => ({ name: style, label: style }))
+
+const TEXT_FONT_FAMILIES = [
+  'sans-serif', 'serif', 'fantasy', 'monospace', 'cursive',
+].map(style => ({ name: style, label: style }))
+
+const TEXT_FONT_STYLES = [
+  'normal', 'bold', 'italic', 'bold-italic',
+].map(style => ({ name: style, label: style }))
+
+const CURSORS = [
+  { name: 'hand_up', label: 'Up', },
+  { name: 'hand_down', label: 'Down', },
+  { name: 'hand_left', label: 'Left', },
+  { name: 'hand_right', label: 'Right', },
+]
+
+const NO_LINK = 0
+const EXTERNAL_LINK = -1
+const PAGE_LIST_TOP_OPTIONS = [
+  { name: NO_LINK, label: 'No link' },
+  { name: EXTERNAL_LINK, label: 'External link' },
+  { name: -2, label: '──────────', disabled: true },
+]
+
+// target_page_id = Column(Integer, ForeignKey('page.id'), nullable=True)
+// https://s3.amazonaws.com/i.asdf.us/im/1c/gradient_gold1-SpringGreen1_1321159749.jpg
+
+const newImage = (data) => ({
+  settings: {
+    ...newPosition(),
+    is_tiled: false,
+    tile_style: 'tile',
+    url: "",
+    external_link_url: "",
+    cursor: 'hand_up',
+  },
+  type: 'image',
+  target_page_id: null,
+  ...data,
+})
+
+const newText = (data) => ({
+  settings: {
+    ...newPosition(),
+    content: "",
+    font_family: 'sans-serif',
+    font_size: 16,
+    font_style: 'normal',
+    font_color: '#dddddd',
+    background_color: 'transparent',
+    width: 0,
+    height: 0,
+    external_link_url: "",
+    cursor: 'hand_up',
+  },
+  type: 'text',
+  target_page_id: null,
+  ...data,
+})
+
+const newLink = (data) => ({
+  settings: {
+    ...newPosition({ width: 100, height: 100, }),
+    external_link_url: "",
+    cursor: 'hand_up',
+  },
+  type: 'link',
+  target_page_id: null,
+  ...data,
+})
+
+const newPosition = (data) => ({
+  x: 0, y: 0,
+  width: 0, height: 0,
+  rotation: 0, scale: 1,
+  opacity: 1,
+  align: "center_center",
+  ...data,
+})
+
+const TYPE_CONSTRUCTORS = {
+  image: newImage,
+  text: newText,
+  link: newLink,
+}
+
+class TileForm extends Component {
+  state = {
+    title: "",
+    submitTitle: "",
+    errorFields: new Set([]),
+    modified: false,
+    pageList: [],
+  }
+
+  componentDidMount() {
+    const { graph, page, isNew, initialData, sortOrder } = this.props
+    const title = isNew ? 'new tile' : 'editing tile'
+    const submitTitle = isNew ? "Create Tile" : "Save Changes"
+    this.setState({
+      title,
+      submitTitle,
+      errorFields: new Set([]),
+    })
+    const { pages } = graph.show.res
+    const linkPages = initialData ? pages.filter(page => page.id !== initialData.id) : pages
+    let pageList = [
+      ...PAGE_LIST_TOP_OPTIONS,
+      ...linkPages.map(page => ({ name: page.id, label: page.path }))
+    ]
+    this.setState({ pageList })
+    if (isNew) {
+      const newTile = newImage({
+        id: "new",
+        graph_id: graph.show.res.id,
+        page_id: page.show.res.id,
+        sort_order: sortOrder,
+      })
+      this.props.tileActions.updateTemporaryTile(newTile)
+    } else {
+      this.props.tileActions.updateTemporaryTile({ ...initialData })
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!this.props.isNew && this.props.initialData !== prevProps.initialData) {
+      this.handleSubmit()
+      this.props.tileActions.updateTemporaryTile({ ...this.props.initialData })
+      this.setState({
+        errorFields: new Set([]),
+      })
+    }
+  }
+
+  componentWillUnmount() {
+    // if the item has changed, save before we close the form!
+    if (!this.props.isNew && this.state.modified) {
+      this.handleSubmit()
+    }
+  }
+
+  handleChange(e) {
+    const { name, value } = e.target
+    this.clearErrorField(name)
+    this.props.tileActions.updateTemporaryTile({
+      ...this.props.temporaryTile,
+      [name]: value,
+    })
+  }
+
+  handleTypeChange(type) {
+    const { graph, page, temporaryTile } = this.props
+    let newTile = TYPE_CONSTRUCTORS[type]({
+      id: temporaryTile.id,
+      graph_id: temporaryTile.graph_id,
+      page_id: temporaryTile.page_id,
+    })
+    newTile.settings.align = temporaryTile.settings.align
+    this.clearErrorField('type')
+    this.props.tileActions.updateTemporaryTile(newTile)
+  }
+
+  handleSettingsChange(e) {
+    const { name, value } = e.target
+    this.clearErrorField(name)
+    this.props.tileActions.updateTemporaryTile({
+      ...this.props.temporaryTile,
+      settings: {
+        ...this.props.temporaryTile.settings,
+        [name]: value,
+      }
+    })
+  }
+
+  handleSelect(name, value) {
+    this.clearErrorField(name)
+    if (name === 'type') {
+      return this.handleTypeChange(value)
+    }
+    if (name === 'target_page_id') {
+      value = parseInt(value)
+    }
+    this.props.tileActions.updateTemporaryTile({
+      ...this.props.temporaryTile,
+      [name]: value,
+    })
+  }
+
+  handleSettingsSelect(name, value) {
+    this.clearErrorField(name)
+    this.props.tileActions.updateTemporaryTile({
+      ...this.props.temporaryTile,
+      settings: {
+        ...this.props.temporaryTile.settings,
+        [name]: value,
+      }
+    })
+  }
+
+  handleAlignment(name, value) {
+    this.clearErrorField(name)
+    this.props.tileActions.updateTemporaryTile({
+      ...this.props.temporaryTile,
+      settings: {
+        ...this.props.temporaryTile.settings,
+        [name]: value,
+        x: 0, y: 0,
+      }
+    })
+  }
+
+  handleImageChange(e) {
+    const { name, value } = e.target
+    this.handleSettingsSelect(name, value)
+    preloadImage(value).then(img => {
+      // console.log(img)
+      this.props.tileActions.updateTemporaryTile({
+        ...this.props.temporaryTile,
+        settings: {
+          ...this.props.temporaryTile.settings,
+          [name]: value,
+          width: img.naturalWidth,
+          height: img.naturalHeight,
+          x: 0, y: 0,
+        }
+      })
+    })
+  }
+
+  clearErrorField(name) {
+    const { errorFields } = this.state
+    if (errorFields.has(name)) {
+      errorFields.delete(name)
+      this.setState({
+        errorFields,
+        modified: true,
+      })
+    } else if (!this.state.modified) {
+      this.setState({
+        errorFields,
+        modified: true,
+      })
+    }
+  }
+
+  handleSubmit(e) {
+    if (e) e.preventDefault()
+    const { isNew, temporaryTile, onSubmit, onClose } = this.props
+    const requiredSettings = REQUIRED_KEYS[temporaryTile.type]
+    const validKeys = "id graph_id page_id target_page_id type settings".split(" ")
+    const validData = validKeys.reduce((a,b) => { a[b] = temporaryTile[b]; return a }, {})
+    const errorFields = requiredSettings.filter(key => !validData.settings[key])
+    if (errorFields.length) {
+      console.log('error', errorFields, validData)
+      if (e) {
+        this.setState({ errorFields: new Set(errorFields) })
+      }
+    } else {
+      if (isNew) {
+        // side effect: set username if we're creating a new tile
+        // session.set('username', data.username)
+        delete validData.id
+      } else {
+        validData.id = temporaryTile.id
+      }
+      this.setState({ modified: false })
+      console.log('submit', validData)
+      onSubmit(validData)
+      // if submitting after switching elements, don't close the form
+      if (e && onClose) {
+        onClose()
+      }
+    }
+  }
+
+  handleDelete() {
+    const { temporaryTile, isNew, onClose } = this.props
+    if (confirm('Really delete this tile?')) {
+      actions.tile.destroy(temporaryTile)
+      .then(() => {
+        onClose()
+      })
+    }
+  }
+
+  render() {
+    const { temporaryTile, isNew } = this.props
+    const { title, submitTitle, errorFields } = this.state
+    if (!temporaryTile || !temporaryTile.settings) return <div className='box' />
+    return (
+      <div className='box'>
+        <h1>{title}</h1>
+        <form onSubmit={this.handleSubmit.bind(this)}>
+          <div className="row selects">
+            <Select
+              name='type'
+              selected={temporaryTile.type}
+              options={SELECT_TYPES}
+              title=''
+              onChange={this.handleSelect.bind(this)}
+            />
+            <Select
+              name='align'
+              selected={temporaryTile.settings.align}
+              options={ALIGNMENTS}
+              title=''
+              onChange={this.handleAlignment.bind(this)}
+            />
+          </div>
+
+          {this.renderPositionInfo()}
+
+          {temporaryTile.type === 'image'
+            ? this.renderImageForm()
+          : temporaryTile.type === 'text'
+            ? this.renderTextForm()
+          : temporaryTile.type === 'link'
+            ? this.renderLinkForm()
+          : ""}
+
+          {this.renderHyperlinkForm()}
+          {this.renderMiscForm()}
+
+          <div className='row buttons'>
+            <SubmitButton
+              title={submitTitle}
+              onClick={this.handleSubmit.bind(this)}
+            />
+            {!isNew && 
+              <SubmitButton
+                title={'Delete'}
+                className='destroy'
+                onClick={this.handleDelete.bind(this)}
+              />
+            }
+          </div>
+          {!!errorFields.size &&
+            <label>
+              <span></span>
+              <span>Please add the required fields =)</span>
+            </label>
+          }
+        </form>
+      </div>
+    )
+  }
+
+  renderPositionInfo() {
+    const { temporaryTile } = this.props
+    const { x, y, width, height, rotation, scale } = temporaryTile.settings
+    return (
+      <div className='position'>
+        {parseInt(x)}{', '}
+        {parseInt(y)}{' '}
+        {parseInt(width)}{'x'}{parseInt(height)}{' '}
+        {rotation === 0 || <span>{parseInt(rotation)}{'\u00B0 '}</span>}
+        {scale === 1 || <span>{'x'}{scale.toFixed(2)}</span>}
+      </div>
+    )
+  }
+
+  renderImageForm() {
+    // const { isNew } = this.props
+    const { temporaryTile } = this.props
+    const { errorFields } = this.state
+    // console.log(temporaryTile.settings)
+    return (
+      <div>
+        <div className='row imageUrl'>
+          {temporaryTile.settings.url && <div className='thumb'><img src={temporaryTile.settings.url} /></div>}
+          <TextInput
+            title=""
+            placeholder='http://'
+            name="url"
+            required
+            data={temporaryTile.settings}
+            error={errorFields.has('url')}
+            onChange={this.handleImageChange.bind(this)}
+            autoComplete="off"
+          />
+        </div>
+        <div className='row pair'>
+          <Checkbox
+            label="Tiled"
+            name="is_tiled"
+            checked={temporaryTile.settings.is_tiled}
+            onChange={this.handleSettingsSelect.bind(this)}
+            autoComplete="off"
+          />
+          {temporaryTile.settings.is_tiled &&
+            <Select
+              name='tile_style'
+              selected={temporaryTile.settings.tile_style || 'tile'}
+              options={IMAGE_TILE_STYLES}
+              title=''
+              onChange={this.handleSettingsSelect.bind(this)}
+            />
+          }
+        </div>
+      </div>
+    )
+  }
+
+  renderTextForm() {
+    const { temporaryTile } = this.props
+    const { errorFields } = this.state
+    return (
+      <div>
+        <TextArea
+          title=""
+          name="content"
+          required
+          data={temporaryTile.settings}
+          error={errorFields.has('content')}
+          onChange={this.handleSettingsChange.bind(this)}
+          autoComplete="off"
+        />
+        <div className='row font'>
+          <Select
+            title="Font"
+            name='font_family'
+            selected={temporaryTile.settings.font_family || 'sans-serif'}
+            options={TEXT_FONT_FAMILIES}
+            title=''
+            onChange={this.handleSettingsSelect.bind(this)}
+          />
+          <NumberInput
+            title=''
+            name='font_size'
+            data={temporaryTile.settings}
+            min={1}
+            max={1200}
+            error={errorFields.has('font_size')}
+            onChange={this.handleSettingsChange.bind(this)}
+            autoComplete="off"
+          />
+          <Select
+            name='font_style'
+            selected={temporaryTile.settings.font_style || 'normal'}
+            options={TEXT_FONT_STYLES}
+            title=''
+            onChange={this.handleSettingsSelect.bind(this)}
+          />
+        </div>
+        <ColorInput
+          title='Text'
+          name='font_color'
+          data={temporaryTile.settings}
+          error={errorFields.has('font_color')}
+          onChange={this.handleSettingsChange.bind(this)}
+          autoComplete="off"
+        />
+        <ColorInput
+          title='BG'
+          name='background_color'
+          data={temporaryTile.settings}
+          error={errorFields.has('background_color')}
+          onChange={this.handleSettingsChange.bind(this)}
+          autoComplete="off"
+        />
+        <div className='row pair'>
+          <NumberInput
+            title="Width"
+            name="width"
+            data={temporaryTile.settings}
+            min={0}
+            max={1200}
+            error={errorFields.has('width')}
+            onChange={this.handleSettingsChange.bind(this)}
+            autoComplete="off"
+          />
+          <NumberInput
+            title="Height"
+            name="height"
+            data={temporaryTile.settings}
+            min={0}
+            max={1200}
+            error={errorFields.has('height')}
+            onChange={this.handleSettingsChange.bind(this)}
+            autoComplete="off"
+          />
+        </div>
+      </div>
+    )
+  }
+
+  renderLinkForm() {
+    const { temporaryTile } = this.props
+    const { errorFields } = this.state
+    return (
+      <div>
+        <div className='row pair'>
+          <NumberInput
+            title="Width"
+            name="width"
+            data={temporaryTile.settings}
+            min={0}
+            max={1200}
+            error={errorFields.has('width')}
+            onChange={this.handleSettingsChange.bind(this)}
+            autoComplete="off"
+          />
+          <NumberInput
+            title="Height"
+            name="height"
+            data={temporaryTile.settings}
+            min={0}
+            max={1200}
+            error={errorFields.has('height')}
+            onChange={this.handleSettingsChange.bind(this)}
+            autoComplete="off"
+          />
+        </div>
+      </div>
+    )
+  }
+
+  renderHyperlinkForm() {
+    const { temporaryTile } = this.props
+    const { pageList } = this.state
+    const isExternalLink = temporaryTile.target_page_id === EXTERNAL_LINK
+    return (
+      <div>
+        <div className={'row selects'}>
+          <Select
+            title=''
+            name='target_page_id'
+            selected={temporaryTile.target_page_id || NO_LINK}
+            options={pageList}
+            onChange={this.handleSelect.bind(this)}
+          />
+          <Select
+            title=''
+            name='cursor'
+            selected={temporaryTile.settings.cursor}
+            options={CURSORS}
+            defaultOption="Cursor"
+            onChange={this.handleSettingsSelect.bind(this)}
+          />
+        </div>
+        <div>
+          {isExternalLink &&
+            <TextInput
+              title=""
+              placeholder='http://'
+              name="external_link_url"
+              data={temporaryTile.settings}
+              onChange={this.handleSettingsChange.bind(this)}
+              autoComplete="off"
+            />
+          }
+        </div>
+      </div>
+    )
+  }
+
+  renderMiscForm() {
+    const { temporaryTile } = this.props
+    return (
+      <div>
+        <Slider
+          title='Opacity'
+          name='opacity'
+          value={temporaryTile.settings.opacity}
+          onChange={this.handleSettingsSelect.bind(this)}
+          min={0.0}
+          max={1.0}
+          step={0.01}
+        />
+        <Slider
+          title='Scale'
+          name='scale'
+          value={temporaryTile.settings.scale}
+          onChange={this.handleSettingsSelect.bind(this)}
+          min={0.01}
+          max={10.0}
+          step={0.01}
+        />
+        <Slider
+          title='Rotation'
+          name='rotation'
+          value={temporaryTile.settings.rotation}
+          onChange={this.handleSettingsSelect.bind(this)}
+          min={-180.0}
+          max={180.0}
+          step={1}
+          type='int'
+        />
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  graph: state.graph,
+  page: state.page,
+  tile: state.tile,
+  temporaryTile: state.tile.temporaryTile,
+})
+
+const mapDispatchToProps = dispatch => ({
+  tileActions: bindActionCreators({ ...tileActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(TileForm)
diff --git a/frontend/app/views/page/components/tile.handle.js b/frontend/app/views/page/components/tile.handle.js
new file mode 100644
index 0000000..e91f0b1
--- /dev/null
+++ b/frontend/app/views/page/components/tile.handle.js
@@ -0,0 +1,139 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+
+const TileHandle = ({ tile, bounds, box, viewing, onMouseDown, onDoubleClick }) => {
+  // console.log(tile)
+  const { width, height } = tile.settings
+  const style = {
+    transform: generateTransform(tile, box),
+    opacity: tile.settings.opacity,
+  }
+  // console.log(generateTransform(tile))
+  let content;
+  let className = ['tile', tile.type].join(' ')
+  if (tile.target_page_id || (viewing && tile.href)) {
+    className += ' ' + (tile.settings.cursor || 'hand_up')
+  }
+  // console.log(tile.settings)
+  switch (tile.type) {
+    case 'image':
+      if (!tile.settings.url) {
+        return null
+      }
+      if (tile.settings.is_tiled) {
+        style.backgroundImage = 'url(' + tile.settings.url + ')'
+        style.backgroundPosition = tile.settings.align.replace('_', ' ')
+        switch (tile.settings.tile_style) {
+          default:
+          case 'tile':
+            break
+          case 'cover':
+            style.backgroundSize = 'cover'
+            break
+          case 'contain':
+            style.backgroundSize = 'contain'
+            break
+          case 'contain no-repeat':
+            style.backgroundSize = 'contain'
+            style.backgroundRepeat = 'no-repeat'
+            break
+        }
+        className += ' is_tiled'
+      } else {
+        className += ' ' + tile.settings.align
+        content = <img src={tile.settings.url} />
+      }
+      break
+    case 'text':
+      if (!tile.settings.content) {
+        return null
+      }
+      content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
+      className += ' ' + tile.settings.align
+      style.width = tile.settings.width ? tile.settings.width + 'px' : 'auto'
+      style.height = tile.settings.height ? tile.settings.height + 'px' : 'auto'
+      style.fontFamily = tile.settings.font_family
+      style.fontSize = tile.settings.font_size + 'px'
+      style.lineHeight = 1.5
+      style.fontWeight = (tile.settings.font_style || "").indexOf('bold') !== -1 ? 'bold' : 'normal'
+      style.fontStyle = (tile.settings.font_style || "").indexOf('italic') !== -1 ? 'italic' : 'normal'
+      style.backgroundColor = tile.settings.background_color || 'transparent'
+      style.color = tile.settings.font_color || '#dddddd!important'
+      break
+    case 'link':
+      content = ""
+      className += ' ' + tile.settings.align
+      style.width = tile.settings.width ? tile.settings.width + 'px' : 'auto'
+      style.height = tile.settings.height ? tile.settings.height + 'px' : 'auto'
+      break
+  }
+  if (viewing && tile.href) {
+    if (tile.href.indexOf('http') === 0) {
+      return (
+        <a href={tile.href} rel='noopener'>
+          <div
+            className={className}
+            style={style}
+          >
+            {content}
+          </div>
+        </a>
+      )
+    } else {
+      return (
+        <Link to={tile.href}>
+          <div
+            className={className}
+            onMouseDown={onMouseDown}
+            style={style}
+          >
+            {content}
+          </div>
+        </Link>
+      )
+    }
+  } else {
+    return (
+      <div
+        className={className}
+        onMouseDown={onMouseDown}
+        onDoubleClick={onDoubleClick}
+        style={style}
+      >
+        {content}
+      </div>
+    )
+  }
+}
+
+const generateTransform = (tile, box) => {
+  let { x, y, align, rotation, scale, is_tiled } = tile.settings
+  if (is_tiled) {
+    return 'translateZ(0)'
+  }
+  if (box) {
+    x += box.dx
+    y += box.dy
+  }
+  const [yalign, xalign] = align.split('_')
+  let transform = ['translateZ(0)']
+  if (yalign === 'center') {
+    transform.push('translateY(-50%)')
+  }
+  if (xalign === 'center') {
+    transform.push('translateX(-50%)')
+  }
+  // if (x % 2 == 1) x += 0.5
+  // if (y % 2 == 1) y += 0.5
+  transform.push('translateX(' + x + 'px)')
+  transform.push('translateY(' + y + 'px)')
+  if (scale !== 1) {
+    transform.push('scale(' + scale + ')')
+  }
+  if (rotation !== 0) {
+    transform.push('rotateZ(' + rotation + 'deg)')
+  }
+  return transform.join(' ')
+}
+
+export default TileHandle
diff --git a/frontend/app/views/page/components/tile.list.js b/frontend/app/views/page/components/tile.list.js
new file mode 100644
index 0000000..c455489
--- /dev/null
+++ b/frontend/app/views/page/components/tile.list.js
@@ -0,0 +1,142 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { ReactSortable } from "react-sortablejs"
+
+// import actions from 'app/actions'
+import * as tileActions from '../../tile/tile.actions'
+import * as pageActions from '../../page/page.actions'
+
+const DOUBLE_CLICK_THRESHOLD = 250
+
+class TileList extends Component {
+  state = {
+    tiles: [],
+    lastTargetId: 0,
+    lastTimeStamp: 0,
+  }
+  
+  // store doubleclick state as a class property because ReactSortable calls setState promiscuously
+  didDoubleClick = false
+
+  componentDidMount(prevProps) {
+    const { tiles } = this.props.page.show.res
+    const { pages } = this.props.graph.show.res
+    const pageTitles = pages.reduce((a,b) => {
+      a[b.id] = b.title
+      return a
+    }, {})
+    this.setState({ tiles: tiles.slice(0).reverse(), pageTitles })
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (this.didDoubleClick) return
+    const { tiles } = this.state
+    if (prevState.tiles.length && !pageActions.isSameTileOrder(tiles, prevState.tiles)) {
+      this.props.pageActions.setTileSortOrder(tiles.slice(0).reverse())
+    }
+    // since we store the full tiles here (reversed!), they might change from under us
+    // potentially later refactor to only use a sort order / lookup
+    else if (prevProps.page.show.res.tiles !== this.props.page.show.res.tiles) {
+      const tileLookup = this.props.page.show.res.tiles.reduce((a,b) => {
+        a[b.id] = b
+        return a
+      }, {})
+      const newTiles = this.state.tiles.map(tile => {
+        return tileLookup[tile.id]
+      })
+      this.setState({ tiles: newTiles })
+    }
+  }
+
+  handleChoose(e) {
+    const { lastTargetId, lastTimeStamp } = this.state
+    if (lastTimeStamp
+      && parseInt(e.item.dataset.id) === lastTargetId
+      && (e.timeStamp - lastTimeStamp) < DOUBLE_CLICK_THRESHOLD
+      ) {
+      // console.log('selected', lastTargetId)
+      this.didDoubleClick = true
+      this.props.pageActions.showEditTileForm(lastTargetId)
+    } else {
+      this.setState({
+        lastTargetId: parseInt(e.item.dataset.id),
+        lastTimeStamp: e.timeStamp,
+      })
+    }
+  }
+
+  handleUpdate(newTiles) {
+    if (this.didDoubleClick) return
+    this.setState({ tiles: newTiles })
+  }
+
+  render() {
+    const { tiles, pageTitles } = this.state
+    return (
+      <div className='box tileList'>
+        <ReactSortable
+          list={tiles}
+          setList={newTiles => this.handleUpdate(newTiles)}
+          onChoose={e => this.handleChoose(e)}
+        >
+          {tiles.map(tile => (
+            tile.type === 'image'
+            ? <TileListImage key={tile.id} tile={tile} />
+            : tile.type === 'text'
+            ? <TileListText key={tile.id} tile={tile} />
+            : tile.type === 'link'
+            ? <TileListLink key={tile.id} tile={tile} pageTitles={pageTitles} />
+            : <TileListMisc key={tile.id} tile={tile} />
+          ))}
+        </ReactSortable>
+      </div>
+    )
+  }
+}
+
+const TileListImage = ({ tile }) => (
+  <div className='row' data-id={tile.id}>
+    <div className='thumb' style={{ backgroundImage: 'url(' + tile.settings.url + ')' }} />
+  </div>
+)
+
+const TileListText = ({ tile }) => (
+  <div className='row' data-id={tile.id}>
+    <span className='snippet'>{(tile.settings.content || "").substr(0, 100)}</span>
+  </div>
+)
+
+const TileListLink = ({ tile, pageTitles }) => (
+  <div className='row link' data-id={tile.id}>
+    <span className='snippet'>
+      {'Link: '}
+      {tile.target_page_id === -1
+        ? 'External'
+        : !tile.target_page_id
+        ? 'No link specified!'
+        : tile.target_page_id in pageTitles
+        ? pageTitles[tile.target_page_id]
+        : 'Error, broken link!'}
+    </span>
+  </div>
+)
+
+const TileListMisc = ({ tile }) => (
+  <div className='row' data-id={tile.id}>
+    <span className='snippet'>{"Tile: "}{tile.type}</span>
+  </div>
+)
+
+const mapStateToProps = state => ({
+  graph: state.graph,
+  page: state.page,
+})
+
+const mapDispatchToProps = dispatch => ({
+  tileActions: bindActionCreators({ ...tileActions }, dispatch),
+  pageActions: bindActionCreators({ ...pageActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(TileList)
diff --git a/frontend/app/views/page/components/tile.new.js b/frontend/app/views/page/components/tile.new.js
new file mode 100644
index 0000000..fb609a5
--- /dev/null
+++ b/frontend/app/views/page/components/tile.new.js
@@ -0,0 +1,55 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import { history } from 'app/store'
+import actions from 'app/actions'
+import * as tileActions from '../../tile/tile.actions'
+import * as pageActions from '../../page/page.actions'
+
+import TileForm from '../components/tile.form'
+
+class TileNew extends Component {
+  handleSubmit(data) {
+    console.log(data)
+    actions.tile.create(data)
+      .then(res => {
+        console.log(res)
+        // const graph = this.props.graph.show.res
+        // if (res.res && res.res.id) {
+        //   history.push('/' + graph.path + '/' + res.res.path)
+        // }
+        this.props.pageActions.hideAddTileForm()
+        this.props.tileActions.clearTemporaryTile()
+      })
+      .catch(err => {
+        console.error('error')
+      })
+  }
+
+  render() {
+    return (
+      <TileForm
+        isNew
+        graph={this.props.graph.show.res}
+        page={this.props.page.show.res}
+        initialData={null}
+        sortOrder={this.props.page.show.res.tiles.length}
+        onSubmit={this.handleSubmit.bind(this)}
+      />
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  graph: state.graph,
+  page: state.page,
+})
+
+const mapDispatchToProps = dispatch => ({
+  tileActions: bindActionCreators({ ...tileActions }, dispatch),
+  pageActions: bindActionCreators({ ...pageActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(TileNew)
diff --git a/frontend/app/views/page/cursors.css b/frontend/app/views/page/cursors.css
new file mode 100644
index 0000000..56fb088
--- /dev/null
+++ b/frontend/app/views/page/cursors.css
@@ -0,0 +1,21 @@
+/* cursors */
+/* keep in separate file so they don't conflict. a copy of this lives in site.css */
+
+.tile.hand_up {
+  cursor: url(/static/img/hand_up.png) 40 10, pointer;
+}
+.tile.hand_right {
+  cursor: url(/static/img/hand_right.png) 90 40, pointer;
+}
+.tile.hand_down {
+  cursor: url(/static/img/hand_down.png) 60 90, pointer;
+}
+.tile.hand_left {
+  cursor: url(/static/img/hand_left.png) 10 60, pointer;
+}
+
+.tile.link {
+  cursor: pointer;
+  border: 1px solid #31f;
+  background-color: rgba(48,16,255,0.1);
+}
\ No newline at end of file
diff --git a/frontend/app/views/page/page.actions.js b/frontend/app/views/page/page.actions.js
new file mode 100644
index 0000000..d2bbbe2
--- /dev/null
+++ b/frontend/app/views/page/page.actions.js
@@ -0,0 +1,110 @@
+import * as types from 'app/types'
+import { store } from 'app/store'
+import actions from 'app/actions'
+import { default as debounce } from 'lodash.debounce'
+import { post } from 'app/utils'
+
+const url = {
+  sortTiles: (id) => '/api/v1/page/' + id + '/sort',
+}
+
+// Add tile form
+
+export const showAddTileForm = () => dispatch => {
+  dispatch({ type: types.page.show_add_tile_form })
+}
+
+export const hideAddTileForm = () => dispatch => {
+  dispatch({ type: types.page.hide_add_tile_form })
+}
+
+export const toggleAddTileForm = () => dispatch => {
+  dispatch({ type: types.page.toggle_add_tile_form })
+}
+
+// Edit tile form
+
+export const showEditTileForm = tile_id => dispatch => {
+  dispatch({ type: types.page.show_edit_tile_form, tile_id })
+}
+
+export const hideEditTileForm = () => dispatch => {
+  dispatch({ type: types.page.hide_edit_tile_form })
+}
+
+export const toggleEditTileForm = () => dispatch => {
+  dispatch({ type: types.page.toggle_edit_tile_form })
+}
+
+// Tile list
+
+export const showTileList = () => dispatch => {
+  dispatch({ type: types.page.show_tile_list })
+}
+
+export const hideTileList = () => dispatch => {
+  dispatch({ type: types.page.hide_tile_list })
+}
+
+export const toggleTileList = () => dispatch => {
+  dispatch({ type: types.page.toggle_tile_list })
+}
+
+// Update local page tile state when we change it
+
+export const updatePageTile = tile => dispatch => {
+  dispatch({ type: types.page.update_page_tile, tile })
+}
+
+// Fetch graph/page when loading a new URL
+
+export const showGraphAndPageIfUnloaded = ({ graph_name, page_name }) => dispatch => (
+  new Promise((resolve, reject) => {
+    showGraphIfUnloaded({ graph_name })(dispatch)
+    .then(graph => (
+      actions.page.show('name/'  + graph_name + '/' + page_name)
+      .then(resolve)
+      .catch(reject)
+    ))
+    .catch(reject)
+  })
+)
+
+export const showGraphIfUnloaded = ({ graph_name }) => dispatch => (
+  new Promise((resolve, reject) => {
+    const { res: graph } = store.getState().graph.show
+    if (graph && graph.path === graph_name) {
+      return resolve(graph)
+    }
+    actions.graph.show('name/'  + graph_name)
+    .then(resolve)
+    .catch(reject)
+  })
+)
+
+// Sorting tiles in the tile list
+
+export const setTileSortOrder = (tiles) => dispatch => {
+  let oldTiles = store.getState().page.show.res.tiles
+  if (!isSameTileOrder(tiles, oldTiles)) {
+    updateTileSortOrder(tiles, dispatch)
+  }
+  dispatch({ type: types.page.set_tile_sort_order, tiles })
+}
+
+export const isSameTileOrder = (newTiles, oldTiles) => {
+  for (let i = 0; i < newTiles.length; i++) {
+    if (newTiles[i].id !== oldTiles[i].id) {
+      return false
+    }
+  }
+  return true
+}
+
+export const updateTileSortOrder = debounce((tiles, dispatch) => {
+  const { page_id } = tiles[0]
+  const order = tiles.map(tile => (tile.id))
+  console.log(page_id, order)
+  post(dispatch, types.page, 'sort', url.sortTiles(page_id), order)
+}, 1000)
+
diff --git a/frontend/app/views/page/page.container.js b/frontend/app/views/page/page.container.js
new file mode 100644
index 0000000..dc85f5e
--- /dev/null
+++ b/frontend/app/views/page/page.container.js
@@ -0,0 +1,95 @@
+import React, { Component } from 'react'
+import { Route } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import './page.css'
+import './cursors.css'
+
+import actions from 'app/actions'
+import { Loader } from 'app/common'
+
+import * as graphActions from '../graph/graph.actions'
+import * as pageActions from './page.actions'
+
+import PageEdit from '../graph/components/page.edit'
+import TileNew from './components/tile.new'
+import TileEdit from './components/tile.edit'
+import TileList from './components/tile.list'
+
+import PageHeader from './components/page.header'
+import PageEditor from './components/page.editor'
+
+class PageContainer extends Component {
+  componentDidMount() {
+    if (this.shouldShowPage()) this.load()
+  }
+  componentDidUpdate(prevProps) {
+    if (this.shouldLoadPage(prevProps)) this.load()
+  }
+  shouldShowPage() {
+    const { graph_name, page_name } = this.props.match.params
+    // console.log(graph_name, page_name)
+    return (graph_name && page_name && graph_name !== 'index')
+  }
+  shouldLoadPage(prevProps) {
+    const { page, location } = this.props
+    const { key } = location
+    if (key === prevProps.location.key) return false
+    if (!this.shouldShowPage()) return false
+    return (page.show.name === prevProps.page.show.name)
+  }
+  load() {
+    actions.site.setSiteTitle("loading " + this.props.match.params.page_name + "...")
+    this.props.pageActions.showGraphAndPageIfUnloaded(this.props.match.params)
+    .then(data => {
+      actions.site.setSiteTitle(data.res.title)
+      if (!data.res.tiles.length) {
+        this.props.pageActions.showAddTileForm()
+      } else {
+        this.props.pageActions.hideAddTileForm()
+      }
+    })
+  }
+  render() {
+    if (!this.shouldShowPage()) return null
+    if (!this.props.page.show.res || this.props.page.show.loading) {
+      return (
+        <div>
+          <PageHeader />
+          <div className='body'>
+            <div className='page loading'>
+              <Loader />
+            </div>
+          </div>
+        </div>
+      )
+    }
+    return (
+      <div>
+        <PageHeader />
+        <div className='body'>
+          <PageEditor />
+          <div className='sidebar'>
+            {this.props.graph.editor.editingPage && <PageEdit />}
+            {this.props.page.editor.addingTile && <TileNew />}
+            {this.props.page.editor.editingTile && <TileEdit />}
+            {this.props.page.editor.tileList && <TileList />}
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  graph: state.graph,
+  page: state.page,
+})
+
+const mapDispatchToProps = dispatch => ({
+  graphActions: bindActionCreators({ ...graphActions }, dispatch),
+  pageActions: bindActionCreators({ ...pageActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(PageContainer)
diff --git a/frontend/app/views/page/page.css b/frontend/app/views/page/page.css
new file mode 100644
index 0000000..4559543
--- /dev/null
+++ b/frontend/app/views/page/page.css
@@ -0,0 +1,167 @@
+.page.loading {
+  padding: 1rem;
+}
+
+.page {
+  width: 100%;
+  height: 100%;
+}
+
+/* tiles */
+
+.tile {
+  position: absolute;
+}
+.tile.image {
+  display: block;
+}
+.tile.image.is_tiled {
+  width: 100%;
+  height: 100%;
+}
+.tile.text {
+  display: block;
+  white-space: break-spaces;
+  padding: 0.25rem;
+  user-select: none;
+  cursor: arrow;
+}
+.tile.link {
+  display: block;
+}
+
+/* tile orientations */
+
+.tile.top_left { top: 0; left: 0; }
+.tile.center_left { top: 50%; left: 0; }
+.tile.bottom_left { bottom: 0; left: 0; }
+.tile.top_center { top: 0; left: 50%; }
+.tile.center_center { top: 50%; left: 50%; }
+.tile.bottom_center { bottom: 0; left: 50%; }
+.tile.top_right { top: 0; right: 0; }
+.tile.center_right { top: 50%; right: 0; }
+.tile.bottom_right { bottom: 0; right: 0; }
+
+/* sortable tile list */
+
+.tileList .row {
+  justify-content: flex-start;
+  align-items: center;
+  min-height: 2.5rem;
+  margin-bottom: 0.5rem;
+  box-shadow: 4px 4px 6px rgba(0,0,0,0.5);
+}
+.tileList .row:last-child {
+  margin-bottom: 0;
+}
+.tileList .row:nth-child(odd) {
+  background: rgba(0,0,0,0.2);
+}
+.tileList .row:nth-child(even) {
+  background: rgba(255,255,255,0.2);
+}
+.tileList span {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  white-space: nowrap;
+  padding: 0.25rem;
+  cursor: default;
+}
+.tileList .thumb {
+  width: 100%;
+  height: 2.5rem;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.tileList .row.sortable-chosen {
+  background-color: #000;
+}
+.tileList .row.sortable-ghost {
+}
+.tileList .row.sortable-drag {
+  opacity: 0.6;
+}
+.tileList .row.link {
+  border: 1px solid #31f;
+  background: rgba(48,16,255,0.3);
+  box-shadow: inset 0 0 16px rgba(0,0,0,0.5);
+  padding-left: 0.375rem;
+}
+
+/* tile form */
+
+.row.imageUrl label {
+  width: 13rem;
+}
+.row.imageUrl .thumb {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 1.5rem;
+  width: 1.9475rem;
+  margin-right: 0.5rem;
+}
+.row.imageUrl img {
+  max-width: 100%;
+  max-height: 100%;
+}
+.box .row.buttons {
+  justify-content: space-between;
+}
+.box .row.pair {
+  justify-content: space-between;
+}
+.box .pair label:last-child {
+  margin-right: 0;
+}
+
+/* tile font form */
+
+.box .font {
+  justify-content: space-between;
+}
+.box .font input[type=number] {
+  width: 3rem;
+}
+.box .font .select {
+  width: 6rem;
+  padding: 0.25rem;
+  margin-right: 0;
+}
+.box .font label:last-child .select {
+  width: 3.75rem;
+}
+.box .font label {
+  flex-direction: row;
+  width: 6.5rem;
+  margin-right: 0.5rem;
+  min-width: auto;
+}
+.box .font label span {
+  display: none;
+}
+.box form .font label {
+}
+
+/* tile color form */
+
+.box form label.color span {
+  min-width: 4rem;
+  width: 4rem;
+}
+.box label.color {
+  display: flex;
+  flex-direction: row;
+}
+.box label.color input[type='color'] {
+  width: 2rem;
+  margin-right: 0.5rem;
+  padding: 0;
+}
+.box label.color input[type='text'] {
+  width: 6rem;
+  max-width: 6rem;
+}
diff --git a/frontend/app/views/page/page.reducer.js b/frontend/app/views/page/page.reducer.js
new file mode 100644
index 0000000..c2d231a
--- /dev/null
+++ b/frontend/app/views/page/page.reducer.js
@@ -0,0 +1,202 @@
+import * as types from 'app/types'
+// import { session, getDefault, getDefaultInt } from 'app/session'
+
+import { crudState, crudReducer } from 'app/api/crud.reducer'
+
+const initialState = crudState('page', {
+  editor: {
+    addingTile: false,
+    editingTile: false,
+    currentEditTileId: 0,
+    tileList: false,
+  },
+  options: {
+  }
+})
+
+const reducer = crudReducer('page')
+
+export default function pageReducer(state = initialState, action) {
+  // console.log(action.type, action)
+  state = reducer(state, action)
+  switch (action.type) {
+    case types.tile.create:
+      return {
+        ...state,
+        show: {
+          ...state.show,
+          res: {
+            ...state.show.res,
+            tiles: state.show.res.tiles.concat(action.data.res),
+          }
+        }
+      }
+
+    case types.page.update:
+      if (state.show.res && state.show.res.id === action.data.res.id) {
+        return {
+          ...state,
+          show: {
+            ...state.show,
+            res: {
+              ...action.data.res,
+              tiles: state.show.res.tiles,
+            }
+          }
+        }
+      }
+      return {
+        ...state,
+        show: {
+          ...state.show,
+          res: {
+            ...action.data.res,
+          }
+        }
+      }
+
+    case types.page.update_page_tile:
+      console.log(action.tile)
+      return {
+        ...state,
+        show: {
+          ...state.show,
+          res: {
+            ...state.show.res,
+            tiles: state.show.res.tiles.map(tile => {
+              if (tile.id === action.tile.id) {
+                return { ...action.tile }
+              } else {
+                return tile
+              }
+            }),
+          }
+        }
+      }
+
+    case types.tile.destroy:
+      return {
+        ...state,
+        show: {
+          ...state.show,
+          res: {
+            ...state.show.res,
+            tiles: state.show.res.tiles.filter(tile => tile.id !== action.data.id)
+          }
+        }
+      }
+
+    // add tile UI
+    case types.page.show_add_tile_form:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          addingTile: true,
+          editingTile: false,
+          tileList: false,
+        }
+      }
+
+    case types.page.hide_add_tile_form:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          addingTile: false,
+        }
+      }
+
+    case types.page.toggle_add_tile_form:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          addingTile: !state.editor.addingTile,
+          editingTile: false,
+          tileList: false,
+        }
+      }
+
+    // edit tile UI
+    case types.page.show_edit_tile_form:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          addingTile: false,
+          editingTile: true,
+          currentEditTileId: action.tile_id,
+          tileList: false,
+        }
+      }
+
+    case types.page.hide_edit_tile_form:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          editingTile: false,
+        }
+      }
+
+    // tile list UI
+    case types.page.show_tile_list:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          addingTile: false,
+          editingTile: false,
+          tileList: true,
+        }
+      }
+
+    case types.page.hide_tile_list:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          tileList: false,
+        }
+      }
+
+    case types.page.toggle_tile_list:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          addingTile: false,
+          editingTile: false,
+          tileList: !state.editor.tileList,
+        }
+      }
+
+    case types.graph.toggle_edit_page_form:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          addingTile: false,
+          editingTile: false,
+          tileList: false,
+        }
+      }
+
+    case types.page.set_tile_sort_order:
+      return {
+        ...state,
+        show: {
+          ...state.show,
+          res: {
+            ...state.res,
+            tiles: action.tiles,
+          }
+        }
+      }
+
+
+    default:
+      return state
+  }
+}
diff --git a/frontend/app/views/site/site.actions.js b/frontend/app/views/site/site.actions.js
new file mode 100644
index 0000000..9c66933
--- /dev/null
+++ b/frontend/app/views/site/site.actions.js
@@ -0,0 +1,6 @@
+import * as types from 'app/types'
+
+export const setSiteTitle = title => dispatch => {
+  document.querySelector('title').innerText = title
+  dispatch({ type: types.site.set_site_title, payload: title })
+}
diff --git a/frontend/app/views/site/site.reducer.js b/frontend/app/views/site/site.reducer.js
new file mode 100644
index 0000000..b40d6f1
--- /dev/null
+++ b/frontend/app/views/site/site.reducer.js
@@ -0,0 +1,19 @@
+import * as types from 'app/types'
+
+const initialState = {
+  'siteTitle': 'swimmer',
+}
+
+export default function graphReducer(state = initialState, action) {
+  // console.log(action.type, action)
+  switch (action.type) {
+    case types.site.set_site_title:
+      return {
+        ...state,
+        siteTitle: action.payload,
+      }
+
+    default:
+      return state
+  }
+}
diff --git a/frontend/app/views/tile/tile.actions.js b/frontend/app/views/tile/tile.actions.js
new file mode 100644
index 0000000..e3be717
--- /dev/null
+++ b/frontend/app/views/tile/tile.actions.js
@@ -0,0 +1,9 @@
+import * as types from 'app/types'
+
+export const updateTemporaryTile = data => dispatch => {
+  dispatch({ type: types.tile.update_temporary_tile, data })
+}
+
+export const clearTemporaryTile = () => dispatch => {
+  dispatch({ type: types.tile.clear_temporary_tile })
+}
diff --git a/frontend/app/views/tile/tile.reducer.js b/frontend/app/views/tile/tile.reducer.js
new file mode 100644
index 0000000..d327a0c
--- /dev/null
+++ b/frontend/app/views/tile/tile.reducer.js
@@ -0,0 +1,31 @@
+import * as types from 'app/types'
+
+import { crudState, crudReducer } from 'app/api/crud.reducer'
+
+const initialState = crudState('tile', {
+  temporaryTile: null,
+  options: {},
+})
+
+const reducer = crudReducer('tile')
+
+export default function tileReducer(state = initialState, action) {
+  // console.log(action.type, action)
+  state = reducer(state, action)
+  switch (action.type) {
+    case types.tile.update_temporary_tile:
+      return {
+        ...state,
+        temporaryTile: action.data
+      }
+
+    case types.tile.clear_temporary_tile:
+      return {
+        ...state,
+        temporaryTile: null
+      }
+
+    default:
+      return state
+  }
+}
diff --git a/frontend/app/views/upload/components/upload.form.js b/frontend/app/views/upload/components/upload.form.js
new file mode 100644
index 0000000..e35bfaa
--- /dev/null
+++ b/frontend/app/views/upload/components/upload.form.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+
+import { MenuButton, FileInput } from 'app/common'
+
+export default class UploadForm extends Component {
+  render() {
+    return (
+      <div className='uploadForm'>
+        <MenuButton name="upload" label={false}>
+          <FileInput onChange={this.props.uploadActions.upload} />
+        </MenuButton>
+      </div>
+    )
+  }
+}
diff --git a/frontend/app/views/upload/components/upload.index.js b/frontend/app/views/upload/components/upload.index.js
new file mode 100644
index 0000000..00cedc2
--- /dev/null
+++ b/frontend/app/views/upload/components/upload.index.js
@@ -0,0 +1,104 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+
+import { uploadUri, formatDateTime } from 'app/utils'
+import { SmallMenuButton, Loader } from 'app/common'
+import actions from 'app/actions'
+
+import UploadIndexOptions from './upload.indexOptions'
+import UploadMenu from './upload.menu'
+
+// const { result, collectionLookup } = this.props
+
+export default class UploadIndex extends Component {
+  componentDidMount() {
+    this.fetch(false)
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.upload.options.sort !== prevProps.upload.options.sort) {
+      this.fetch(false)
+    }
+  }
+
+  fetch(load_more) {
+    const { options, index } = this.props.upload
+    const { order: index_order } = index
+    const [ sort, order ] = options.sort.split('-')
+    actions.upload.index({
+      sort, order, limit: 50, offset: load_more ? index_order.length : 0,
+    }, load_more)
+  }
+
+  render() {
+    const { searchOptions, uploadActions } = this.props
+    const { options } = this.props.upload
+    const { loading, lookup, order } = this.props.upload.index
+    if (loading) {
+      return (
+        <section>
+          <UploadIndexOptions />
+          <div className="row">
+            {order && !!order.length &&
+              <div className={'results ' + searchOptions.thumbnailSize}>
+                {order.map(id => <UploadItem key={id} data={lookup[id]} />)}
+              </div>
+            }
+          </div>
+          <Loader />
+        </section>
+      )
+    }
+    if (!lookup || !order.length) {
+      return (
+        <section>
+          <UploadIndexOptions />
+          <div className="row">
+            <UploadMenu uploadActions={uploadActions} />
+            <p className='gray'>
+              {"No uploads"}
+            </p>
+          </div>
+        </section>
+      )
+    }
+    return (
+      <section>
+        <UploadIndexOptions />
+        <div className="row">
+          <UploadMenu uploadActions={uploadActions} />
+          <div className={'results ' + searchOptions.thumbnailSize}>
+            {order.map(id => <UploadItem key={id} data={lookup[id]} />)}
+          </div>
+        </div>
+        {order.length >= 50 && <button className='loadMore' onClick={() => this.fetch(true)}>Load More</button>}
+      </section>
+    )
+  }
+}
+
+const UploadItem = ({ data }) => {
+  // console.log(data)
+  const imageUri = uploadUri(data)
+  return (
+    <div className='cell'>
+      <div className='img'>
+        <Link to={"/upload/" + data.id + "/show/"}>
+          <img src={imageUri} alt={"Uploaded image"} />
+        </Link>
+      </div>
+      <div className='meta center'>
+        <div className='row'>
+          <SmallMenuButton name="search" href={"/search/upload/" + data.id + "/"} />
+        </div>
+        <div>
+          {data.username}
+        </div>
+        <div>
+          {formatDateTime(data.created_at)}
+        </div>
+      </div>
+    </div>
+  )
+}
+
diff --git a/frontend/app/views/upload/components/upload.indexOptions.js b/frontend/app/views/upload/components/upload.indexOptions.js
new file mode 100644
index 0000000..df266ef
--- /dev/null
+++ b/frontend/app/views/upload/components/upload.indexOptions.js
@@ -0,0 +1,62 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+
+import { Select, Checkbox } from 'app/common'
+
+const thumbnailOptions = [
+  { name: 'th', label: 'Thumbnails', },
+  { name: 'sm', label: 'Small', },
+  { name: 'md', label: 'Medium', },
+  { name: 'lg', label: 'Large', },
+  { name: 'orig', label: 'Original', },
+]
+
+const sortOptions = [
+  { name: 'id-asc', label: 'Most recent' },
+  { name: 'id-desc', label: 'Oldest first' },
+  { name: 'username-asc', label: 'Username (A-Z)' },
+  { name: 'username-desc', label: 'Username (Z-A)' },
+  // { name: '-asc', label: '' },
+  // { name: '-desc', label: '' },
+  // { name: '-asc', label: '' },
+  // { name: '-desc', label: '' },
+  // { name: '-asc', label: '' },
+  // { name: '-desc', label: '' },
+]
+
+class IndexOptions extends Component {
+  render() {
+    const { options, searchOptions } = this.props
+    return (
+      <div className='row menubar'>
+        <div />
+        <Select
+          name={'sort'}
+          options={sortOptions}
+          selected={options.sort}
+          onChange={actions.upload.updateOption}
+        />
+        <Select
+          name={'thumbnailSize'}
+          options={thumbnailOptions}
+          selected={searchOptions.thumbnailSize}
+          onChange={actions.search.updateOption}
+        />
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  options: state.upload.options,
+  searchOptions: state.search.options,
+})
+
+const mapDispatchToProps = dispatch => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(IndexOptions)
diff --git a/frontend/app/views/upload/components/upload.menu.js b/frontend/app/views/upload/components/upload.menu.js
new file mode 100644
index 0000000..485d06f
--- /dev/null
+++ b/frontend/app/views/upload/components/upload.menu.js
@@ -0,0 +1,18 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+
+import { MenuButton, FileInput } from 'app/common'
+
+import actions from 'app/actions'
+
+export default class UploadMenu extends Component {
+  render() {
+    return (
+      <div className='menuButtons'>
+        <MenuButton name="upload">
+          <FileInput onChange={this.props.uploadActions.upload} />
+        </MenuButton>
+      </div>
+    )
+  }
+}
diff --git a/frontend/app/views/upload/components/upload.show.js b/frontend/app/views/upload/components/upload.show.js
new file mode 100644
index 0000000..f63bc5f
--- /dev/null
+++ b/frontend/app/views/upload/components/upload.show.js
@@ -0,0 +1,70 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+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() {
+    actions.upload.show(this.props.match.params.id)
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.match.params.id !== this.props.match.params.id) {
+      actions.upload.show(this.props.match.params.id)
+    }
+  }
+
+  handleDestroy() {
+    const { res: data } = this.props.upload.show
+    if (confirm("Really delete this upload?")) {
+      actions.upload.destroy(data).then(() => {
+        history.push('/upload/')
+      })
+    }
+  }
+
+  render() {
+    const { show, destroy } = this.props.upload
+    if (show.loading || destroy.loading) {
+      return <Loader />
+    }
+    if (!show.loading && !show.res || show.not_found) {
+      return <div className='gray'>Upload {this.props.match.params.id} not found</div>
+    }
+    const { res: data } = show
+    return (
+      <section className="row uploadShow">
+        <div className="menuButtons">
+          <MenuButton name="delete" onClick={this.handleDestroy.bind(this)} />
+          <MenuButton name="search" href={'/search/upload/' + data.id + '/'} />
+        </div>
+        <div>
+          <img src={uploadUri(data)} />
+          <div className='byline'>
+            {'Uploaded by '}
+            {data.username}
+            {' on '}
+            {formatDate(data.created_at)}
+            {' at '}
+            {formatTime(data.created_at)}
+            {'. '}
+          </div>
+        </div>
+      </section>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  upload: state.upload,
+})
+
+const mapDispatchToProps = dispatch => ({
+  // searchActions: bindActionCreators({ ...searchActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(UploadShow)
diff --git a/frontend/app/views/upload/upload.actions.js b/frontend/app/views/upload/upload.actions.js
new file mode 100644
index 0000000..8739bf7
--- /dev/null
+++ b/frontend/app/views/upload/upload.actions.js
@@ -0,0 +1,14 @@
+import actions from 'app/actions'
+import { session } from 'app/session'
+
+export const upload = file => dispatch => {
+  const formData = {
+    'image': file,
+    'username': session('username'),
+  }
+  // console.log(formData)
+  return actions.upload.upload(formData).then(data => {
+    // console.log(data.res)
+    return data.res
+  })
+}
diff --git a/frontend/app/views/upload/upload.container.js b/frontend/app/views/upload/upload.container.js
new file mode 100644
index 0000000..608f01a
--- /dev/null
+++ b/frontend/app/views/upload/upload.container.js
@@ -0,0 +1,35 @@
+import React, { Component } from 'react'
+import { Route, Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import './upload.css'
+
+import * as uploadActions from './upload.actions'
+
+import UploadIndex from './components/upload.index'
+import UploadShow from './components/upload.show'
+
+class Container extends Component {
+  render() {
+    return (
+      <div className='row upload'>
+        <div>
+          <Route exact path='/upload/:id/show/' component={UploadShow} />
+          <UploadIndex {...this.props} />
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  upload: state.upload,
+  searchOptions: state.search.options,
+})
+
+const mapDispatchToProps = dispatch => ({
+  uploadActions: bindActionCreators({ ...uploadActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Container)
diff --git a/frontend/app/views/upload/upload.css b/frontend/app/views/upload/upload.css
new file mode 100644
index 0000000..8d77754
--- /dev/null
+++ b/frontend/app/views/upload/upload.css
@@ -0,0 +1,10 @@
+.uploadShow img {
+  max-width: 30rem;
+  max-height: 20rem;
+}
+.upload {
+  height: 100%;
+}
+.upload > div:last-child {
+  flex: 1;
+}
\ No newline at end of file
diff --git a/frontend/app/views/upload/upload.reducer.js b/frontend/app/views/upload/upload.reducer.js
new file mode 100644
index 0000000..1f39f6e
--- /dev/null
+++ b/frontend/app/views/upload/upload.reducer.js
@@ -0,0 +1,21 @@
+import * as types from 'app/types'
+import { session, getDefault, getDefaultInt } from 'app/session'
+
+import { crudState, crudReducer } from 'app/api/crud.reducer'
+
+const initialState = crudState('upload', {
+  options: {
+    sort: getDefault('upload.sort', 'id-desc'),
+  }
+})
+
+const reducer = crudReducer('upload')
+
+export default function uploadReducer(state = initialState, action) {
+  // console.log(action.type, action)
+  state = reducer(state, action)
+  switch (action.type) {
+    default:
+      return state
+  }
+}
diff --git a/frontend/common/app.css b/frontend/common/app.css
deleted file mode 100644
index d9f9946..0000000
--- a/frontend/common/app.css
+++ /dev/null
@@ -1,428 +0,0 @@
-* { box-sizing: border-box; }
-html, body {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 100%;
-}
-body {
-  background: #000;
-  color: #ddd;
-  overflow: hidden;
-  font-family: 'Roboto', sans-serif;
-  font-size: 0.875rem;
-  height: 100%;
-  width: 100%;
-}
-.gray {
-  color: #888;
-}
-
-/* layout */
-
-.container {
-  height: 100%;
-  width: 100%;
-}
-.app {
-  /*display: flex;*/
-  height: 100%;
-  width: 100%;
-}
-.app > div {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-}
-.app .body {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  position: relative;
-  height: 100%;
-  width: 100%;
-}
-
-.row {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: flex-start;
-}
-.row > div {
-  margin-right: 1.5rem;
-}
-.row > div:last-child {
-  margin-right: 0;
-}
-
-
-.row.menubar {
-  justify-content: flex-end;
-}
-.menubar > :first-child {
-  flex: 1;
-}
-
-/* lists */
-
-ul {
-  margin: 0.75rem 0;
-}
-li {
-  line-height: 1.5;
-}
-
-/* header */
-
-header {
-  height: 3.125rem;
-  font-size: 0.875rem;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  background: rgba(16,32,64,0.5);
-  color: white;
-  z-index: 50;
-}
-header b {
-  font-weight: 900;
-}
-header a {
-  color: rgba(255,255,255,0.95);
-  text-decoration: none;
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-header > div:first-child {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  padding-left: 1.5rem;
-}
-header > div:last-child {
-  padding-right: 1.5rem;
-}
-header > div > button {
-  padding: 0.25rem;
-  margin: 0 0 0 0.5rem;
-  background: #000;
-  border-color: #888;
-  color: #888;
-}
-header > div > button:hover {
-  border-color: #fff;
-  color: #fff;
-}
-header .vcat-btn {
-  font-size: 0.875rem;
-  padding-left: 0.5rem;
-  letter-spacing: 0.0625rem;
-}
-header > div:last-child a {
-  padding: 0.5rem;
-}
-header .btn-link:focus,
-header .btn-link:hover,
-header .btn-link:active,
-header a:focus,
-header a:hover,
-header a:active {
-  text-decoration: none;
-  color: white;
-}
-header a:focus,
-header a:hover,
-header a:active {
-  color: white;
-}
-.menuToggle {
-  width: 1.625rem;
-  height: 1.625rem;
-  cursor: pointer;
-  line-height: 1;
-}
-header a.navbar-brand {
-  font-size: .8rem;
-}
-
-header .username {
-  cursor: pointer;
-}
-
-/* headings */
-
-h1 {
-  color: #eee;
-  margin-bottom: 1.25rem;
-  font-size: 1.5rem;
-  font-weight: normal;
-}
-div:first-child > h1:first-child,
-.menuButtons + div > h1:first-child {
-  margin-top: 0;
-}
-h2 {
-  color: #eee;
-  font-size: 1.25rem;
-  font-weight: normal;
-}
-h3 {
-  color: #eee;
-  margin-top: 0;
-  margin-bottom: 1.25rem;
-  font-size: 1.0rem;
-  font-weight: normal;
-}
-p {
-  margin: 1.25rem 0;
-  line-height: 1.5;
-}
-.byline {
-  color: #888;
-  font-size: 0.75rem;
-  margin-top: 0.25rem;
-  margin-bottom: 1.25rem;
-}
-
-/* links */
-
-b {
-  color: #fff;
-}
-a {
-  text-decoration: underline;
-  color: #8df;
-}
-
-/* menu button */
-
-.menuButtons {
-  width: 2.5rem;
-  min-height: 18rem;
-}
-.menuButton {
-  position: relative;
-  text-align: center;
-  text-transform: uppercase;
-  font-size: 0.625rem;
-  color: #333;
-  text-decoration: none;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 2.5rem;
-  margin-bottom: 0.75rem;
-}
-.menuButton .icon {
-  background-color: #fff;
-  width: 2.5rem;
-  height: 2.5rem;
-  border: 1px solid;
-  border-color: #888;
-  margin-bottom: 0.3rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: border-color 0.1s;
-  border-radius: 0.125rem;
-}
-.menuButton svg {
-  width: 80%;
-  fill: #888;
-}
-.menuButton:hover .icon {
-  background-color: #eef;
-  border-color: #000;
-}
-.menuButton:hover svg {
-  fill: #000;
-}
-
-.menuButton.small {
-  width: 2.0rem;
-  margin-bottom: 0;
-  margin-right: 0.1875rem;
-}
-.menuButton.small .icon {
-  border: 0;
-  border-color: #888;
-  margin-bottom: 0;
-  width: 2.0rem;
-  height: 2.0rem;
-  border-radius: 0.0625rem;
-}
-.menuButton.small svg {
-  fill: #888;
-  width: 1.75rem;
-  height: 1.75rem;
-}
-.menuButton.small .icon:hover {
-  border-color: #11f;
-  background-color: #11f;
-}
-.menuButton.small:hover svg {
-  fill: #fff;
-}
-.results.th .menuButton.small {
-  width: 1.5rem;
-}
-.results.th .menuButton.small .icon {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.results.th .menuButton.small svg {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.menuButton.small.active .icon {
-  border-color: #11f;
-  background-color: #11f;
-}
-.menuButton.small.active svg {
-  fill: #fff;
-}
-.menuButton.small.active:hover .icon {
-  border-color: #fff;
-  background-color: #11f;
-}
-.menuButton.small.active:hover svg {
-  fill: #fff;
-}
-
-/* rows - like a table */
-
-.rows {
-  width: 100%;
-}
-.rows .row {
-  width: 100%;
-}
-.rows .row:nth-of-type(2n+1) {
-  background: #f8f8f8;
-}
-.rows .row:nth-of-type(2n+2) {
-  background: #eeeeee;
-}
-.rows .row:hover {
-  background: #d8d8d8;
-}
-.rows .row > div,
-.rows .row a > div {
-  padding: 0.75rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin: 0;
-}
-.rows .row div.title {
-  width: 10rem;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.rows .row div.string,
-.rows .row div.str {
-  min-width: 6rem;
-}
-.rows .row div.bool {
-  width: 4rem;
-  overflow: visible;
-  text-align: center;
-}
-.rows .row div.color {
-  width: 4rem;
-  overflow: visible;
-  text-align: center;
-}
-.rows .row div.date {
-  min-width: 10rem;
-}
-.rows .row div.int,
-.rows .row div.float {
-  text-align: right;
-  min-width: 6rem;
-}
-.rows .row.heading div.int,
-.rows .row.heading div.float {
-  text-align: center;
-}
-.rows .row div.text {
-  flex: 1;
-  max-width: 20rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.rows .row.heading div {
-  text-transform: capitalize;
-  font-weight: bold;
-  background: #f8f8f8;
-}
-.rows .row.heading:hover {
-  background: #f8f8f8;
-}
-
-/* misc ui */
-
-pre, code, .license {
-  font-family: Menlo, monospace;
-  font-size: 0.75rem;
-  line-height: 2;
-}
-.swatch {
-  display: inline-block;
-  width: 0.75rem;
-  height: 0.75rem;
-  border: 1px solid #333;
-}
-.dot {
-  display: inline-block;
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 50%;
-}
-.light {
-  color: #888;
-}
-.pill {
-  display: inline-block;
-  padding: 0.125rem;
-  width: 2.5rem;
-  text-align: center;
-  border-radius: 0.5rem;
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  font-weight: bold;
-}
-.pill.yes {
-  background: #11f;
-  color: #fff;
-}
-.pill.no {
-  color: #ccc;
-  border: 1px solid;
-}
-
-/* columns (of tags) */
-
-.form .columnCells {
-  padding-top: 0.25rem
-}
-.columnCells .column {
-  margin-top: 0.25rem;
-}
-.columnCells .column > div {
-  max-width: 100%;
-  padding: 0 0.375rem 0.375rem 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.columnCells .selected {
-  color: #11f;
-}
\ No newline at end of file
diff --git a/frontend/common/copyToClipboardButton.component.js b/frontend/common/copyToClipboardButton.component.js
deleted file mode 100644
index cfe7103..0000000
--- a/frontend/common/copyToClipboardButton.component.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React, { Component } from 'react';
-import { writeToClipboard } from '../util'
-
-export default class CopyToClipboardButton extends Component {
-  state = {
-    copied: false,
-  }
-
-  handleClick() {
-    writeToClipboard(this.props.data)
-    this.setState({ copied: true })
-  }
-
-  render() {
-    return (
-      <button
-        className={this.state.copied ? 'copyButton copied' : 'copyButton'}
-        onClick={this.handleClick.bind(this)}
-      >
-        {this.state.copied ? 'Copied!' : 'Copy'}
-      </button>
-    )
-  }
-}
diff --git a/frontend/common/fonts.css b/frontend/common/fonts.css
deleted file mode 100644
index c782885..0000000
--- a/frontend/common/fonts.css
+++ /dev/null
@@ -1,55 +0,0 @@
-@font-face {
-  font-family: 'Roboto';
-  src: url('/static/fonts/Roboto-Bold.ttf') format('truetype');
-  font-weight: bold;
-}
-@font-face {
-  font-family: 'Roboto';
-  src: url('/static/fonts/Roboto-BoldItalic.ttf') format('truetype');
-  font-weight: bold;
-  font-style: italic;
-}
-/*
-@font-face {
-  font-family: 'Roboto';
-  src: url('/static/fonts/Roboto-Light.ttf') format('truetype');
-  font-weight: 100;
-}
-@font-face {
-  font-family: 'Roboto';
-  src: url('/static/fonts/Roboto-LightItalic.ttf') format('truetype');
-  font-weight: 100;
-}
-*/
-@font-face {
-  font-family: 'Roboto';
-  src: url('/static/fonts/Roboto-Medium.ttf') format('truetype');
-  font-weight: 300;
-}
-@font-face {
-  font-family: 'Roboto';
-  src: url('/static/fonts/Roboto-MediumItalic.ttf') format('truetype');
-  font-style: italic;
-  font-weight: 300;
-}
-@font-face {
-  font-family: 'Roboto';
-  src: url('/static/fonts/Roboto-Regular.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Roboto';
-  src: url('/static/fonts/Roboto-Italic.ttf') format('truetype');
-  font-style: italic;
-}
-/*
-@font-face {
-  font-family: 'Roboto';
-  src: url('/static/fonts/Roboto-Thin.ttf') format('truetype');
-  font-weight: 100;
-}
-@font-face {
-  font-family: 'Roboto';
-  src: url('/static/fonts/Roboto-ThinItalic.ttf') format('truetype');
-  font-weight: 100;
-}
-*/
\ No newline at end of file
diff --git a/frontend/common/form.component.js b/frontend/common/form.component.js
deleted file mode 100644
index f3775a2..0000000
--- a/frontend/common/form.component.js
+++ /dev/null
@@ -1,220 +0,0 @@
-import React, { Component } from 'react';
-import { courtesyS } from '../util'
-
-export const TextInput = props => (
-  <label className={props.error ? 'error' : 'text'}>
-    {props.title && <span>{props.title}</span>}
-    <input
-      type="text"
-      required={props.required}
-      onChange={props.onChange}
-      name={props.name}
-      value={props.data[props.name]}
-      placeholder={props.placeholder}
-      autoComplete={props.autoComplete}
-    />
-  </label>
-)
-
-export const LabelDescription = props => (
-  <label className={'text description'}>
-    <span>{props.title}</span>
-    <span>{props.children}</span>
-  </label>
-)
-
-export const NumberInput = props => (
-  <label className={props.error ? 'error' : 'text'}>
-    <span>{props.title}</span>
-    <input
-      type="number"
-      required={props.required}
-      onChange={props.onChange}
-      name={props.name}
-      value={props.data[props.name]}
-      min={props.min}
-      max={props.max}
-      step={props.step || 1}
-    />
-  </label>
-)
-
-export const ColorInput = props => (
-  <label className={props.error ? 'error color' : 'text color'}>
-    <span>{props.title}</span>
-    <input
-      type="color"
-      required={props.required}
-      onChange={props.onChange}
-      name={props.name}
-      value={props.data[props.name]}
-    />
-    <input
-      type="text"
-      required={props.required}
-      onChange={props.onChange}
-      name={props.name}
-      value={props.data[props.name]}
-    />
-  </label>
-)
-
-export const TextArea = props => (
-  <label className={props.error ? 'textarea error' : 'textarea'}>
-    {props.title && <span>{props.title}</span>}
-    <textarea
-      onChange={props.onChange}
-      name={props.name}
-      value={props.data[props.name]}
-    />
-  </label>
-)
-
-export const Checkbox = props => (
-  <label className="checkbox">
-    <input
-      type="checkbox"
-      name={props.name}
-      value={1}
-      checked={props.checked}
-      onChange={(e) => props.onChange(props.name, e.target.checked)}
-    />
-    <span>{props.label}</span>
-  </label>
-)
-
-export const Radio = props => {
-  return (
-    <label className="radio">
-      <input
-        type="radio"
-        name={props.name}
-        value={props.value}
-        checked={props.value === props.currentValue}
-        onChange={() => props.onChange(props.name, props.value)}
-      />
-      <span>{props.label}</span>
-    </label>
-  )
-}
-
-export class Select extends Component {
-  state = {
-    focused: false,
-  }
-
-  render() {
-    const { name, selected, options, defaultOption, title, loading, onChange, className } = this.props
-    if (loading) {
-      return <label className='select'><div>Loading...</div></label>
-    }
-    const { focused } = this.state
-    return (
-      <label>
-        {title && <span>{title}</span>}
-        <div className={(focused ? 'select focus' : 'select') + " " + (className || "")}>
-          <div>{(options.find(opt => opt.name === selected) || {label: defaultOption}).label}</div>
-          <select
-            onFocus={() => this.setState({ focused: true })}
-            onBlur={() => this.setState({ focused: false })}
-            onChange={e => {
-              onChange(name, e.target.value)
-              // this.setState({ focused: false })
-            }}
-            value={selected || "__default__"}
-          >
-            {!selected && defaultOption && <option value="__default__">{defaultOption}</option>}
-            {options.map((option, i) => (
-              <option
-                key={option.name}
-                value={option.name}
-                disabled={option.disabled}
-              >{option.label}</option>
-            ))}
-          </select>
-        </div>
-      </label>
-    )
-  }
-}
-
-export class FileInputField extends Component {
-  state = {
-    count: 0,
-  }
-
-  handleChange(files) {
-    const { multiple, onChange } = this.props
-    if (!files) {
-      this.setState({ count: 0 })
-    } else {
-      this.setState({ count: multiple ? files.length : 0 })
-    }
-    onChange(files)
-  }
-  
-  render() {
-    const { error, title, label, required, multiple, mime, name } = this.props
-    return (
-      <label className={error ? 'error' : 'text fileInput'}>
-        <span>{title}</span>
-        <div className="row">
-          <button>
-            {label || "Choose files"}
-            <FileInput
-              mime={mime}
-              multiple={multiple}
-              onChange={this.handleChange.bind(this)}
-            />
-          </button>
-          {!!this.state.count && <span>{courtesyS(this.state.count, "file")}{" selected"}</span>}
-        </div>
-      </label>
-    )
-  }
-}
-
-export class FileInput extends Component {
-  handleChange(e) {
-    let { multiple, mime } = this.props
-    if (!mime) {
-      mime = "image/"
-    }
-    const files = e.dataTransfer ? e.dataTransfer.files : e.target.files
-    let i
-    let file, selectedFiles = []
-    for (i = 0; i < files.length; i++) {
-      file = files[i]
-      if (file && file.type.indexOf(mime) === 0) {
-        if (multiple) {
-          selectedFiles.push(file)
-        } else {
-          break
-        }
-      }
-    }
-    if (multiple && selectedFiles.length) {
-      this.props.onChange(selectedFiles)
-    } else if (!multiple && file) {
-      this.props.onChange(file)
-    } else {
-      this.props.onChange()
-    }
-  }
-
-  render() {
-    return (
-      <input type="file" multiple={!!this.props.multiple} onChange={this.handleChange.bind(this)} />
-    )
-  }
-}
-
-export const SubmitButton = (props) => (
-  <label>
-    <span></span>
-    <button
-      className={props.className ? "submit " + props.className : "submit"}
-      onClick={props.onClick}
-    >{props.title}</button>
-  </label>
-)
diff --git a/frontend/common/form.css b/frontend/common/form.css
deleted file mode 100644
index dbfa01f..0000000
--- a/frontend/common/form.css
+++ /dev/null
@@ -1,323 +0,0 @@
-/* label */
-
-label {
-  display: flex;
-  min-width: 10rem;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  cursor: pointer;
-}
-
-.label {
-  display: flex;
-  min-width: 10rem;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: flex-start;
-  cursor: pointer;
-}
-
-/* form (stock forms) */
-
-form label,
-form .label {
-  width: 100%;
-  margin-bottom: 0.5rem;
-}
-form label span,
-form .label > span {
-  display: inline-block;
-  min-width: 8rem;
-  padding: 0.5rem 0;
-}
-form label.textarea {
-  align-items: flex-start;
-}
-form input[type="checkbox"] {
-  margin: -0.0625rem 0.625rem 0 8rem;
-}
-
-/* form errors */
-
-form .error span {
-  color: #f11;
-}
-form .error input[type=text],
-form .error input[type=number],
-form .error input[type=password] {
-  border-color: #f11;
-}
-
-/* form field descriptions */
-
-form label.description {
-  cursor: normal;
-  font-size: small;
-  color: #ddd;
-}
-form label.description span {
-  padding-top: 0;
-}
-
-/* text input */
-
-input[type=text],
-input[type=number],
-input[type=password] {
-  padding: 0.5rem;
-  border: 1px solid #ddd;
-  color: #fff;
-  background: #111;
-  font-family: 'Roboto', sans-serif;
-  font-size: 0.875rem;
-  width: 15rem;
-  border-radius: 0.125rem;
-}
-
-input[type=text]:focus,
-input[type=number]:focus,
-input[type=password]:focus {
-  border: 1px solid #84f;
-  background: #000;
-}
-
-textarea {
-  width: 20rem;
-  height: 10rem;
-  padding: 0.5rem;
-  border: 1px solid #ddd;
-  font-family: 'Roboto', sans-serif;
-  background: #111;
-  color: #fff;
-  font-size: 0.875rem;
-  border-radius: 0.125rem;
-}
-textarea:focus {
-  border: 1px solid #84f;
-  background: #000;
-}
-
-/* checkbox */
-
-input[type=checkbox] {
-  position: relative;
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-  margin-right: 0.625rem;
-  cursor: pointer;
-  outline: 0;
-}
-input[type=checkbox] + span {
-  font-size: 0.825rem;
-  text-transform: uppercase;
-  color: #444;
-}
-input[type=checkbox]:hover + span {
-  color: #000;
-}
-input[type=checkbox]:focus + span {
-  color: #84f;
-}
-input[type="checkbox"]:checked + span {
-  color: #000;
-}
-input[type="checkbox"]:focus:checked + span {
-  color: #84f;
-}
-
-input[type="checkbox"]:after {
-  position: relative;
-  display: block;
-  left: 0;
-  width: 0.75rem;
-  height: 0.75rem;
-  border: 0.0625rem solid #ddd;
-  content: "";
-  background-color: #fff;
-  background-repeat: no-repeat;
-  background-position: center;
-  cursor: pointer;
-  transition: background-color 0.1s;
-  border-radius: 0.125rem;
-}
-input[type=checkbox]:focus:after {
-  border-color: #84f;
-}
-input[type="checkbox"]:checked:after {
-  border-color: #84f;
-  background-color: #84f;
-  background-image: url(/static/img/check.svg);
-  background-size: cover;
-}
-
-/* select */
-
-.select {
-  position: relative;
-  width: 9rem;
-  min-width: auto;
-  background: #111;
-  border-radius: 0.125rem;
-  border: 1px solid #ddd;
-  padding: 0.5rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-right: 1.25rem;
-  cursor: pointer;
-}
-.select select {
-  position: absolute;
-  top: 0; left: 0;
-  width: 100%; height: 100%;
-  opacity: 0;
-  cursor: pointer;
-}
-.select:after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  right: 0.375rem;
-  transform: translateY(-0.125rem);
-  width: 0; 
-  height: 0; 
-  border-left: 0.375rem solid transparent;
-  border-right: 0.375rem solid transparent;
-  border-top: 0.375rem solid #ddd;
-}
-.select.focus {
-  border-color: #84f;
-  background: #000;
-}
-.select.focus:after {
-  border-top-color: #84f;
-}
-.select:hover {
-  background-color: #000;
-}
-.select div {
-  width: calc(100% - 1.025rem);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.select.wide {
-  width: 20rem;
-}
-
-/* button */
-
-button {
-  position: relative;
-  background: #333;
-  border-radius: 0.125rem;
-  color: #ddd;
-  border: 1px solid;
-  padding: 0.5rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-family: 'Roboto', sans-serif;
-  font-size: 0.875rem;
-  cursor: pointer;
-  /*text-transform: uppercase;*/
-  transition: all 0.1s;
-}
-button:hover {
-  background-color: #000;
-  border-color: #fff;
-}
-button.process {
-  padding-left: 1.5rem;
-}
-button.process:after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 0.625rem;
-  transform: translateY(-0.375rem);
-  width: 0; 
-  height: 0; 
-  border-top: 0.375rem solid transparent;
-  border-bottom: 0.375rem solid transparent;
-  border-left: 0.375rem solid #888;
-}
-button.process:focus:after {
-  border-left-color: #84f;
-}
-button:focus {
-  background: #000;
-  border-color: #fff;
-  color: #fff;
-  outline: 0;
-}
-button:disabled {
-  background: #eee;
-  color: #888;
-  border-color: #bbb;
-  pointer-events: none;  
-}
-button:disabled:after {
-  border-left-color: #aaa;
-}
-.buttons button {
-  margin-right: 0.75rem;
-}
-button.submit {
-  border-color: #d8f;
-  color: #fff;
-  background: #111;
-}
-button.submit:focus,
-button.submit:hover {
-  border-color: #fff;
-  color: #fff;
-  background: #222;
-}
-button.submit.destroy {
-  background-color: rgba(16,16,16,0.5);
-  border-color: #b11;
-  color: #d11;
-}
-button.submit.destroy:focus,
-button.submit.destroy:hover {
-  background: #000;
-  border-color: #f33;
-  color: #f33;
-}
-
-/* file upload, should always be inside a container */
-
-input[type=file] {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: pointer;
-}
-::-webkit-file-upload-button { cursor: pointer; }
-.fileInput > .row {
-  align-items: center;
-}
-.fileInput > .row > span {
-  padding-left: 1rem;
-}
-
-/* copy button */
-
-.copyButton {
-  border-color: transparent;
-  color: #84f;
-  font-size: 0.675rem;
-  padding: 0.25rem;
-  margin-left: 0.25rem;
-}
-.desktop .copyButton:hover {
-  border-color: #84f;
-}
-.copyButton.copied {
-  color: #84f;
-}
\ No newline at end of file
diff --git a/frontend/common/header.component.js b/frontend/common/header.component.js
deleted file mode 100644
index 9e96e80..0000000
--- a/frontend/common/header.component.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react'
-// import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import { Link } from 'react-router-dom'
-import { session } from '../session'
-
-function Header(props) {
-  return (
-    <header>
-      <div>
-        <Link to="/" className="logo"><b>{props.site.siteTitle}</b></Link>
-      </div>
-      <div>
-        <span className='username' onClick={() => changeUsername()}>
-          {' → '}{props.username}
-        </span>
-      </div>
-    </header>
-  )
-}
-
-const changeUsername = () => {
-  const username = prompt("Please enter your username:", session('username'))
-  if (username && username.length) {
-    session.set('username', username)
-    document.querySelector('Header div span').innerText = ' → ' + username // very naughty
-  }
-}
-
-
-const mapStateToProps = (state) => ({
-  // auth: state.auth,
-  site: state.site,
-  username: session.get('username'),
-  // isAuthenticated: state.auth.isAuthenticated,
-})
-
-const mapDispatchToProps = (dispatch) => ({
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(Header) 
diff --git a/frontend/common/imageCrop.component.js b/frontend/common/imageCrop.component.js
deleted file mode 100644
index 9cae850..0000000
--- a/frontend/common/imageCrop.component.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { Component } from 'react';
-import { cropImage } from '../util'
-
-export default class ImageCrop extends Component {
-  state = {
-    cropURL: null
-  }
-
-  componentDidMount() {
-    const { url, crop } = this.props
-    this.crop(url, crop)
-  }
-
-  componentDidUpdate(prevProps) {
-    const { url, crop } = this.props
-    if (this.props.crop !== prevProps.crop) {
-      cropImage(url, crop).then(canvas =>{
-        const cropURL = canvas.toDataURL('image/jpeg', 0.8)
-        this.setState({ cropURL })
-      })
-    }
-  }
-
-  crop(url, crop) {
-    cropImage(url, crop).then(canvas =>{
-      const cropURL = canvas.toDataURL('image/jpeg', 0.8)
-      this.setState({ cropURL })
-    })
-  }
-
-
-  render() {
-    const { cropURL } = this.state
-    if (!cropURL) {
-      return null
-    }
-    return (
-      <img src={cropURL} className='preview' />
-    )
-  }
-}
diff --git a/frontend/common/index.js b/frontend/common/index.js
deleted file mode 100644
index 5c0dc50..0000000
--- a/frontend/common/index.js
+++ /dev/null
@@ -1,32 +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 {
-  Swatch, Dot, Columns, Statistic, Detections, Progress
-} from './miscellaneous.component'
-export { default as TableIndex } from './tableIndex.component'
-export { Loader } from './loader.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/frontend/common/loader.component.js b/frontend/common/loader.component.js
deleted file mode 100644
index f0a0c69..0000000
--- a/frontend/common/loader.component.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, { Component } from 'react';
-
-import './loader.css'
-
-const Loader = () => (
-  <div>
-    <div className='circular-loader color'>
-      <div className="stroke">
-        <div className="stroke-left"></div>
-        <div className="stroke-right"></div>
-      </div>
-    </div>
-  </div>
-)
-
-export { Loader }
diff --git a/frontend/common/loader.css b/frontend/common/loader.css
deleted file mode 100644
index f047e8e..0000000
--- a/frontend/common/loader.css
+++ /dev/null
@@ -1,125 +0,0 @@
-
-@keyframes L_circle_rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@keyframes L_stroke_rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(1080deg);
-  }
-}
-@keyframes L_stroke_fix {
-  0% {
-    transform: rotate(0deg);
-  }
-  50% {
-    transform: rotate(135deg);
-  }
-  100% {
-    transform: rotate(270deg);
-  }
-}
-@keyframes L_stroke_left_grow {
-  0% {
-    transform: rotate(-5deg);
-  }
-  50% {
-    transform: rotate(-140deg);
-  }
-  100% {
-    transform: rotate(-5deg);
-  }
-}
-@keyframes L_stroke_right_grow {
-  0% {
-    transform: rotate(5deg);
-  }
-  50% {
-    transform: rotate(140deg);
-  }
-  100% {
-    transform: rotate(5deg);
-  }
-}
-.circular-loader .stroke::before, .circular-loader .stroke-right::before, .circular-loader .stroke-left::before {
-  content: "";
-  display: block;
-}
-
-.circular-loader, .circular-loader .stroke, .circular-loader .stroke::before, .circular-loader .stroke-right, .circular-loader .stroke-right::before, .circular-loader .stroke-left, .circular-loader .stroke-left::before {
-  width: 2em;
-  height: 2em;
-  box-sizing: border-box;
-  border-radius: 50%;
-}
-
-.circular-loader .stroke::before, .circular-loader .stroke-right::before, .circular-loader .stroke-left::before {
-  border-style: solid;
-  border-width: 0.21429em;
-  border-color: #778;
-}
-
-.circular-loader .stroke-right, .circular-loader .stroke-left::before {
-  position: absolute;
-  clip: rect(0 2em 2em 1em);
-}
-.circular-loader .stroke-right::before, .circular-loader .stroke-left {
-  position: absolute;
-  clip: rect(0 1em 2em 0);
-}
-.circular-loader .stroke::before {
-  position: absolute;
-  clip: rect(0 1.05em 1em 0.95em);
-}
-
-/**/
-.circular-loader {
-  animation: L_circle_rotate 1568.23529ms linear infinite both;
-}
-.circular-loader .stroke::before,
-.circular-loader .stroke-right, .circular-loader .stroke-left {
-  animation: L_stroke_fix 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-}
-.circular-loader .stroke {
-  animation: L_stroke_rotate 5332ms steps(4) infinite both;
-}
-.circular-loader .stroke-right::before {
-  animation: L_stroke_right_grow 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-}
-.circular-loader .stroke-left::before {
-  animation: L_stroke_left_grow 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-}
-@keyframes color_K {
-  0%, 15% {
-    border-color: #44444f;
-  }
-  25%, 40% {
-    border-color: #bbbbc7;
-  }
-  50%, 65% {
-    border-color: #66666f;
-  }
-  75%, 90% {
-    border-color: #ccccd4;
-  }
-  100% {
-    border-color: #44444f;
-  }
-}
-.circular-loader.color .stroke::before {
-  animation: L_stroke_fix 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, color_K 5332ms linear infinite both;
-}
-.circular-loader.color .stroke-right::before {
-  animation: L_stroke_right_grow 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, color_K 5332ms linear infinite both;
-}
-.circular-loader.color .stroke-left::before {
-  animation: L_stroke_left_grow 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, color_K 5332ms linear infinite both;
-}
-
diff --git a/frontend/common/menubutton.component.js b/frontend/common/menubutton.component.js
deleted file mode 100644
index d4c2e31..0000000
--- a/frontend/common/menubutton.component.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import React, { Component } from 'react'
-import { Route, Link } from 'react-router-dom'
-import { history } from '../store'
-
-const icons = {
-  upload: {
-    title: 'Upload',
-    image: '/static/img/add.svg',
-    // svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>,
-    // svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" /></svg>
-    // svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9,10V16H15V10H19L12,3L5,10H9M12,5.8L14.2,8H13V14H11V8H9.8L12,5.8M19,18H5V20H19V18Z" /></svg>
-    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0,0h24v24H0V0z"/><path d="M19,12v7H5v-7H3v7c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-7H19z M11,6.83L8.41,9.41L7,8l5-5l5,5l-1.41,1.41L13,6.83v9.67h-2 V6.83z"/></svg>,
-  },
-  new: {
-    title: 'New',
-    image: '/static/img/add.svg',
-    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>,
-    // svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" /></svg>,
-    // svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9,10V16H15V10H19L12,3L5,10H9M12,5.8L14.2,8H13V14H11V8H9.8L12,5.8M19,18H5V20H19V18Z" /></svg>
-  },
-  save: {
-    title: 'Export',
-    image: '/static/img/save.svg',
-    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2v9.67z"/></svg>,
-  },
-  saved: {
-    title: 'Saved',
-    image: '/static/img/folder.svg',
-    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M9.17 6l2 2H20v10H4V6h5.17M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>,
-  },
-  recent: {
-    title: 'Recent',
-    image: '/static/img/history.svg',
-    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.25 2.52.77-1.28-3.52-2.09V8z"/></svg>,
-  },
-  random: {
-    title: 'Random',
-    image: '/static/img/random.svg',
-    // svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"/></svg>,
-    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/><circle cx="7.5" cy="16.5" r="1.5"/><circle cx="7.5" cy="7.5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="16.5" cy="16.5" r="1.5"/><circle cx="16.5" cy="7.5" r="1.5"/></svg>
-  },
-  menu: {
-    title: 'Menu',
-    image: '/static/img/menu.svg',
-    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>,
-  },
-  list: {
-    title: 'List',
-    image: '/static/img/view_list.svg',
-    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path d="M3 5v14h17V5H3zm4 2v2H5V7h2zm-2 6v-2h2v2H5zm0 2h2v2H5v-2zm13 2H9v-2h9v2zm0-4H9v-2h9v2zm0-4H9V7h9v2z"/></svg>,
-  },
-  edit: {
-    title: 'Edit',
-    image: '/static/img/edit.svg',
-    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"/></svg>
-  },
-  delete: {
-    title: 'Delete',
-    image: '/static/img/delete.svg',
-    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"/></svg>
-  },
-  back: {
-    title: 'Back',
-    image: '/static/img/back.svg',
-    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path d="M17.51 3.87L15.73 2.1 5.84 12l9.9 9.9 1.77-1.77L9.38 12l8.13-8.13z"/></svg>,
-  },
-  image_search: {
-    title: 'Search',
-    image: '/static/img/image_search.svg',
-    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M18 13v7H4V6h5.02c.05-.71.22-1.38.48-2H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-5l-2-2zm-1.5 5h-11l2.75-3.53 1.96 2.36 2.75-3.54zm2.8-9.11c.44-.7.7-1.51.7-2.39C20 4.01 17.99 2 15.5 2S11 4.01 11 6.5s2.01 4.5 4.49 4.5c.88 0 1.7-.26 2.39-.7L21 13.42 22.42 12 19.3 8.89zM15.5 9C14.12 9 13 7.88 13 6.5S14.12 4 15.5 4 18 5.12 18 6.5 16.88 9 15.5 9z"/><path fill="none" d="M0 0h24v24H0z"/></svg>,
-  },
-  search: {
-    title: 'Search',
-    image: '/static/img/search.svg',
-    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/></svg>,
-  },
-  open_in_new: {
-    title: 'Open',
-    image: '/static/img/open_in_new.svg',
-    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></svg>,
-  },
-  test: {
-    title: 'Test',
-    image: '/static/img/fastfood.svg',
-    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.06 22.99h1.66c.84 0 1.53-.64 1.63-1.46L23 5.05h-5V1h-1.97v4.05h-4.97l.3 2.34c1.71.47 3.31 1.32 4.27 2.26 1.44 1.42 2.43 2.89 2.43 5.29v8.05zM1 21.99V21h15.03v.99c0 .55-.45 1-1.01 1H2.01c-.56 0-1.01-.45-1.01-1zm15.03-7c0-8-15.03-8-15.03 0h15.03zM1.02 17h15v2h-15z"/><path fill="none" d="M0 0h24v24H0z"/></svg>
-  },
-  // export: {
-  //   title: 'Export',
-  //   image: '/static/img/export.svg',
-  //   svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0,0h24v24H0V0z"/><path d="M19,12v7H5v-7H3v7c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-7H19z M11,6.83L8.41,9.41L7,8l5-5l5,5l-1.41,1.41L13,6.83v9.67h-2 V6.83z"/></svg>,
-  // },
-}
-
-const goBack = () => history.goBack()
-
-export const MenuButton = ({ name, href, onClick, label, children, className }) => {
-  const { svg, title } = icons[name]
-  if (name === 'back') {
-    onClick = goBack
-  }
-  if (href) {
-    return (
-      <Link to={href} className={className || 'menuButton'}>
-        <div className='icon'>{svg}</div>
-        {label === false ? "" : title}
-        {children}
-      </Link>
-    )
-  } else {
-    return (
-      <div className={className || 'menuButton'} onClick={onClick}>
-        <div className='icon'>{svg}</div>
-        {label === false ? "" : title}
-        {children}
-      </div>
-    )
-  }
-}
-
-export const SmallMenuButton = (props) => (
-  <MenuButton {...props} label={false} className={props.active ? 'menuButton small active' : 'menuButton small'} />
-)
-
-export const MenuRoute = ({ component: Component, props, ...rest }) => (
-  <Route {...rest} render={routeProps => (
-    <Component {...routeProps} {...props} />
-  )}/>
-)
diff --git a/frontend/common/miscellaneous.component.js b/frontend/common/miscellaneous.component.js
deleted file mode 100644
index cf12ef5..0000000
--- a/frontend/common/miscellaneous.component.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, { Component } from 'react';
-import { Link } from 'react-router-dom'
-import { clamp, percent } from '../util'
-
-export const Swatch = ({ color }) => (
-  <div
-    className='swatch'
-    style={{ backgroundColor: color ? 'rgb(' + color.join(',') + ')' : 'transparent' }}
-  />
-)
-
-export const Dot = ({ color }) => (
-  <div
-    className='dot'
-    style={{ backgroundColor: color }}
-  />
-)
-
-export const Columns = ({ count, margin, width, object, children, className }) => {
-  if (!object || !object.length) object = children
-  if (!object || !object.length) return null
-  margin = margin || 380
-  width = width || 250
-  count = count || Math.floor((window.innerWidth - margin) / width)
-  let columns = []
-  let len = object.length
-  let j = 0
-  for (let i = 0; i < count; i++) {
-    let column_len = len * (i + 1) / count
-    let column = []
-    for (; j < column_len; j++) {
-      column.push(<div key={j}>{object[j]}</div>)
-    }
-    columns.push(<div key={"col_" + i + "_" + j} className='column' style={{ width }}>{column}</div>)
-    if (j >= len) break
-  }
-  return (
-    <div className={'row columnCells ' + className}>
-      {columns}
-    </div>
-  )
-}
-
-export const Statistic = ({ name, value, link }) => (
-  <div className='statistic row'>
-    <div className='title'>{link ? <Link to={link}>{name}</Link> : name}</div>
-    <div className='int'>{value}</div>
-  </div>
-)
-
-export const Detections = ({ detections, labels }) => (
-  (detections || []).map(({ label, rect }, i) => (
-    <div
-    className='rect'
-      key={i}
-      style={{
-        left: percent(clamp(rect.x1)),
-        width: percent(clamp(rect.x2 - rect.x1, 0, Math.min(1.0, 1.0 - rect.x1))),
-        top: percent(clamp(rect.y1)),
-        height: percent(clamp(rect.y2 - rect.y1, 0, Math.min(1.0, 1.0 - rect.y1))),
-      }}>
-      {labels && <span>{label.replace(/_/g, ' ')}</span>}
-    </div>
-  )
-))
-
-export const Progress = ({ current, total }) => (
-  <div className='progress'>
-    <div className='bar' style={{ width: Math.round(100 * current / total) + '%' }} />
-  </div>
-)
diff --git a/frontend/common/miscellaneous.css b/frontend/common/miscellaneous.css
deleted file mode 100644
index 32c3e7b..0000000
--- a/frontend/common/miscellaneous.css
+++ /dev/null
@@ -1,18 +0,0 @@
-
-/* Progress bar */
-
-.progress {
-  background: #f8f8f8;
-  margin: 0.25rem 0;
-  height: 0.25rem;
-  width: 20rem;
-  position: relative;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
-  margin-bottom: 0.2rem;
-}
-.progress .bar {
-  position: absolute;
-  top: 0; left: 0;
-  height: 100%;
-  background: #11f;
-}
diff --git a/frontend/common/modal.component.js b/frontend/common/modal.component.js
deleted file mode 100644
index 75c479c..0000000
--- a/frontend/common/modal.component.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React, { Component } from 'react'
-
-export const Modal = ({ visible, children }) => (
-  <div className={visible ? "modal visible" : "modal"}>
-    <div>
-      {children}
-    </div>
-  </div>
-)
diff --git a/frontend/common/modal.css b/frontend/common/modal.css
deleted file mode 100644
index 5e95a09..0000000
--- a/frontend/common/modal.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 100;
-  background: rgba(0,0,0,0.2);
-  display: none;
-}
-.modal.visible {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.modal > div {
-  background: #fff;
-  padding: 1rem;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
-}
diff --git a/frontend/common/slider.component.js b/frontend/common/slider.component.js
deleted file mode 100644
index 9d96b1e..0000000
--- a/frontend/common/slider.component.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import React, { Component } from 'react'
-import { default as throttle } from 'lodash.throttle'
-
-const SLIDER_THROTTLE_TIME = 1000 / 30
-
-export default class Slider extends Component {
-  state = {
-    value: 0
-  }
-
-  constructor(props){
-    super(props)
-    this.timeout = 0
-    this.handleInput = this.handleInput.bind(this)
-    this.handleRange = this.handleRange.bind(this)
-    this.handleKeyDown = this.handleKeyDown.bind(this)
-    this.onChange = throttle(props.onChange, SLIDER_THROTTLE_TIME)
-  }
-  componentDidMount() {
-    let { value } = this.props
-    if (this.props.type === 'int') {
-      value = parseInt(value)
-    }
-    this.setState({ value })
-  }
-  componentDidUpdate(prevProps) {
-    let { value } = this.props
-    if (prevProps.value !== value) {
-      if (this.props.type === 'int') {
-        value = parseInt(value)
-      }
-      this.setState({ value })
-    }
-  }
-  handleInput(e){
-    let { name } = this.props
-    let new_value = e.target.value
-    if (new_value === '') {
-      new_value = this.props.defaultValue || (this.props.max - this.props.min) / 2
-    }
-    else if (this.props.type === 'int') {
-      new_value = parseInt(new_value)
-    }
-    else if (this.props.type === 'odd') {
-      new_value = parseInt(Math.floor(new_value / 2) * 2 + 1)
-    }
-    else {
-      new_value = parseFloat(new_value)
-    }
-    if (this.state.value !== new_value) {
-      this.setState({ value: new_value })
-      this.props.onChange(this.props.name, new_value)
-    }
-  }
-  handleKeyDown(e) {
-    console.log(e.keyCode)
-  }
-  handleRange(e){
-    let { value: new_value } = e.target
-    if (this.props.type === 'int') {
-      new_value = parseInt(new_value)
-    }
-    else if (this.props.type === 'odd') {
-      new_value = parseInt(Math.floor(new_value / 2) * 2 + 1)
-    }
-    else if (this.props.type === 'list') {
-      new_value = this.props.options[new_value] || this.props.options[0]
-    }
-    else {
-      new_value = parseFloat(new_value)
-    }
-    this.setState({ value: new_value })
-    this.onChange(this.props.name, new_value)
-  }
-  render(){
-    let { name, title } = this.props
-    let value = this.state.value
-    if (typeof value === 'undefined') {
-      value = this.props.min
-    }
-    let text_value = value
-    let step;
-    let min = this.props.min || 0
-    let max = this.props.max || 0
-    if (this.props.type === 'int') {
-      step = 1
-    } else if (this.props.type === 'list') {
-      min = 0
-      max = this.props.options.length - 1
-      step = 1
-      value = this.props.options.indexOf(value)
-    } else {
-      step = (this.props.max - this.props.min) / 100
-      text_value = parseFloat(value).toFixed(2)
-    }
-    return (
-      <label className={this.props.error ? 'slider error' : 'slider'}>
-        <span>{title}</span>
-        <input
-          type='number'
-          min={min}
-          max={max}
-          step={step}
-          value={text_value}
-          onKeyDown={this.handleKeyDown}
-          onChange={this.handleInput}
-          onBlur={this.handleInput}
-        />
-        <input
-          type='range'
-          min={min}
-          max={max}
-          step={step}
-          value={value}
-          onChange={this.handleRange}
-        />
-      </label>
-    )
-  }
-}
diff --git a/frontend/common/table.component.js b/frontend/common/table.component.js
deleted file mode 100644
index 8a74a79..0000000
--- a/frontend/common/table.component.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import React from 'react'
-
-import { formatName } from '../util'
-
-const __HR__ = '__HR__'
-
-export function TableObject({ tag, object, order, summary }) {
-  if (!object) return null
-  if (object === 'loading') {
-    return <div className='tableObject loading'>{tag}{': Loading'}</div>
-  }
-  if (object.err) {
-    return <div className='tableObject error'>{tag}{' Error: '}{object.err}</div>
-  }
-  let objects = Object.keys(object)
-  if (order) {
-    const grouped = objects.reduce((a, b) => {
-      const index = order.indexOf(b)
-      if (index !== -1) {
-        a.order.push([index, b])
-      } else {
-        a.alpha.push(b)
-      }
-      return a
-    }, { order: [], alpha: [] })
-    objects = grouped.order
-      .sort((a, b) => a[0] - b[0])
-      .map(([i, s]) => s)
-    if (!summary) {
-      objects = objects
-        // .concat([__HR__])
-        .concat(grouped.alpha.sort())
-    }
-  } else {
-    objects = objects.sort()
-  }
-  return (
-    <div>
-      {tag && <h3 className='tt'>{tag}</h3>}
-      <table className={'tableObject ' + tag}>
-        <tbody>
-          {objects.map((key, i) => (
-            <TableRow key={key + '_' + i} name={key} value={object[key]} />
-          ))}
-        </tbody>
-      </table>
-    </div>
-  )
-}
-
-export function TableArray({ tag, list }) {
-  if (!list) return null
-  return (
-    <div>
-      {tag && <h3>{tag}</h3>}
-      <table className={'tableArray ' + tag}>
-        <tbody>
-          {list.map((value, i) => (
-            <tr key={tag + '_' + i}>
-              <TableCell value={value} />
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  )
-}
-
-export function TableTuples({ tag, list }) {
-  if (!list) return null
-  return (
-    <div>
-      {tag && <h3>{tag}</h3>}
-      <table className={'tableTuples ' + tag}>
-        <tbody>
-          {list.map(([key, ...values], i) => (
-            <tr key={tag + '_' + i}>
-              <th>{formatName(key)}</th>
-              {values.map((value, j) => (
-                <TableCell key={i + '_' + j} value={value} />
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  )
-}
-
-export function TableRow({ name, value }) {
-  if (name === __HR__) {
-    return (
-      <tr>
-        <th className='tr'>
-          <hr />
-        </th>
-      </tr>
-    )
-  }
-  return (
-    <tr>
-      <th>{formatName(name)}</th>
-      <TableCell name={name} value={value} />
-    </tr>
-  )
-}
-
-export function TableCell({ value }) {
-  if (value && typeof value === 'object') {
-    if (value._raw) {
-      value = value.value
-    } else if (value.length) {
-      value = <TableArray nested tag={''} list={value} />
-    } else {
-      value = <TableObject nested tag={''} object={value} />
-    }
-  }
-  if (typeof value === 'boolean') {
-    return <td>{value ? <Pill type='yes' /> : <Pill type='no' />}</td>
-  }
-  return (
-    <td>{value}</td>
-  )
-}
-
-export const Pill = ({ color, type }) => (
-  <div className={'pill ' + type} style={{ backgroundColor: color }}>{type}</div>
-)
\ No newline at end of file
diff --git a/frontend/common/table.css b/frontend/common/table.css
deleted file mode 100644
index 4752e21..0000000
--- a/frontend/common/table.css
+++ /dev/null
@@ -1,96 +0,0 @@
-/* tables on metadata pages */
-
-h3.tt {
-  margin: 1.5rem 0 0.25rem 0;
-  font-size: 1.25rem;
-}
-table {
-  border: 0;
-  margin: 0;
-  padding: 0;
-  border-spacing: 0;
-  line-height: 1.5;
-  color: #666;
-}
-.tableObject td,
-.tableObject th {
-  padding: 0.1875rem;
-  vertical-align: top;
-}
-.tableObject hr {
-  width: 100%;
-  color: transparent;
-  border: 0;
-  border-bottom: 1px solid #bbb;
-  align: left;
-  margin: 3px 0;
-  padding: 0;
-}
-.tableObject th,
-.tableTuples th {
-  min-width: 8rem;
-  text-align: left;
-  text-transform: capitalize;
-  padding-left: 0;
-  padding-right: 0.625rem;
-  font-weight: 300;
-  color: #333;
-}
-.tableTuples td {
-  text-align: right;
-}
-.tableObject td {
-  font-weight: normal;
-  color: #000;
-}
-.tableObject .tableObject {
-  border: 0.0625rem solid #ddd;
-}
-.tableArray {
-  border: 0.0625rem solid #ddd;
-  border-spacing: 0;
-}
-.tableArray td {
-  border-bottom: 0.0625rem solid #ddd;
-}
-
-.rows .tableRow {
-  flex-wrap: wrap;
-}
-.rows .row > div.galleryRow {
-  padding: 0 0.75rem 0.75rem 0.75rem;
-}
-.rows .row > div.galleryRow > div {
-  display: flex;
-  flex-direction: row;
-  max-height: 100px;
-  flex-wrap: wrap;
-  max-width: 100%;
-  overflow: hidden;
-}
-.galleryRow .thumbnail {
-  height: 100px;
-  margin-right: 0.75rem;
-}
-/*
-.gray {
-  font-size: 12px;
-  color: #888;
-  display: block;
-}
-.sha256.heading {
-  margin: 20px 0 0px;
-}
-.gray span {
-  padding-right: 5px;
-}
-.gray {
-  margin-bottom: 10px;
-}
-.gray a {
-  color: #666;
-}
-*/
-.tableIndex {
-  width: 100%;
-}
\ No newline at end of file
diff --git a/frontend/common/tableIndex.component.js b/frontend/common/tableIndex.component.js
deleted file mode 100644
index a34a9e9..0000000
--- a/frontend/common/tableIndex.component.js
+++ /dev/null
@@ -1,129 +0,0 @@
-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'
-
-/*
-  <TableIndex
-    title="Collections"
-    actions={actions.collection}
-    data={data.collection.index}
-    fields={[
-      { name: 'title', type: 'title', link: row => '/collection/' + row.id + '/show/' },
-      { name: 'username', type: 'string' },
-      { name: 'date', type: 'date' },
-      { name: 'notes', type: 'text' },
-    ]}
-  />
-*/
-
-export default class TableIndex extends Component {
-  componentDidMount() {
-    this.props.actions && this.props.actions.index()
-  }
-
-  render() {
-    const { data, els, title, fields, noHeadings, notFoundMessage } = this.props
-    if (data.loading) {
-      return <Loader />
-    }
-    if (!els && (!data.lookup || !data.order.length)) {
-      return (
-        <div>
-          <h1>{title}</h1>
-          <p className='gray'>
-            {notFoundMessage || ("No " + title)}
-          </p>
-        </div>
-      )
-    }
-    return (
-      <div className='tableIndex'>
-        <h1>{title}</h1>
-        <div className='rows'>
-        {!noHeadings && <RowHeadings fields={fields} />}
-        {els
-          ? els.map(el => <Row key={el.id} row={el} fields={fields} />)
-          : data.order.map(id => <Row key={id} row={data.lookup[id]} fields={fields} />)
-        }
-        </div>
-      </div>
-    )
-  }
-}
-
-const RowHeadings = ({fields}) => {
-  return (
-    <div className='row heading'>
-      {fields.map(field => {
-        if (field.type === 'gallery') return
-        let css = {}
-        if (field.width) {
-          css = { width: field.width, maxWidth: 'none', flex: 'none', }
-        }
-        if (field.flex) {
-          css.flex = field.flex
-        }
-        return <div key={field.name} className={field.type} style={css}>{(field.title || field.name).replace(/_/g, ' ')}</div>
-      })}
-    </div>
-  )
-}
-
-const Row = ({ row, fields }) => {
-  return (
-    <div className='row tableRow'>
-      {fields.map(field => {
-        let value = field.valueFn ? field.valueFn(row) : row[field.name]
-        let css = {}
-        if (field.type === 'date' && (row.updated_at || row.created_at || value)) {
-          // value = (value || "").split('.')[0]
-          value = formatDateTime(row.updated_at || row.created_at || value)
-        } else if (field.type === 'text') {
-          value = String(value || "").trim().split('\n')[0].replace(/^#+/, '').substr(0, 100)          
-        } else if (field.type === 'color') {
-          value = <Swatch color={value} />
-        } else if (field.type === 'bool') {
-          value = <Dot color={value ? '#11f' : '#fff'} />
-        } else if (field.type === 'str') {
-          value = String(value || "").replace(/_/g, ' ')
-        } else if (field.type === 'gallery') {
-          return <GalleryRow key={field.name} media={value} />
-        }
-        if (field.width) {
-          css = { width: field.width, maxWidth: 'none', flex: 'none', }
-        }
-        if (field.flex) {
-          css.flex = field.flex
-        }
-        let className
-        if (field.style) {
-          className = field.type + ' ' + field.style
-        } else {
-          className = field.type
-        }
-        value = <div title={value} key={field.name} className={className} style={css}>{value}</div>
-        if (field.link) {
-          return <Link key={field.name} to={field.link(row)}>{value}</Link>
-        }
-        return value
-      })}
-    </div>
-  )
-}
-
-const GalleryRow = ({ media }) => {
-  return (
-    <div className='galleryRow'>
-      <div>
-        {media.map(img => (
-          <Link to={"/media/id/" + img.id + "/"} key={img.url}>
-            <img src={img.url} className='thumbnail' />
-          </Link>
-        ))}
-      </div>
-    </div>
-  )
-}
diff --git a/frontend/common/upload.css b/frontend/common/upload.css
deleted file mode 100644
index 719f98c..0000000
--- a/frontend/common/upload.css
+++ /dev/null
@@ -1,26 +0,0 @@
-/* drag-and-drop */
-
-.dragCurtain {
-  display: none;
-  pointer-events: none;
-  justify-content: center;
-  align-items: center;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0,0,0,0.5);
-  z-index: 1;
-}
-.dragCurtain div {
-  color: #11f;
-  background: white;
-  border: 2px solid #11f;
-  padding: 2rem;
-  font-size: 1.5rem;
-  font-weight: bold;
-}
-.dragging .dragCurtain {
-  display: flex;
-}
diff --git a/frontend/common/upload.helpers.js b/frontend/common/upload.helpers.js
deleted file mode 100644
index f26e2cc..0000000
--- a/frontend/common/upload.helpers.js
+++ /dev/null
@@ -1,174 +0,0 @@
-import ExifReader from 'exifreader'
-
-function base64ToUint8Array(string, start, finish) {
-  start = start || 0
-  finish = finish || string.length
-  // atob that shit
-  const binary = atob(string)
-  const buffer = new Uint8Array(binary.length)
-  for (let i = start; i < finish; i++) {
-    buffer[i] = binary.charCodeAt(i)
-  }
-  return buffer
-}
-
-function getOrientation(uri) {
-  // Split off the base64 data
-  const base64String = uri.split(',')[1]
-  // Read off first 128KB, which is all we need to
-  // get the EXIF data
-  const arr = base64ToUint8Array(base64String, 0, 2 ** 17)
-  try {
-    const tags = ExifReader.load(arr.buffer)
-    // console.log(tags)
-    if (typeof tags.Orientation == 'number') {
-      return tags.Orientation
-    }
-    return tags.Orientation.value
-  } catch (err) {
-    return 1
-  }
-}
-
-function applyRotation(canvas, ctx, deg) {
-  const radians = deg * (Math.PI / 180)
-  if (deg === 90) {
-    ctx.translate(canvas.width, 0)
-  } else if (deg === 180) {
-    ctx.translate(canvas.width, canvas.height)
-  } else if (deg === 270) {
-    ctx.translate(0, canvas.height)
-  }
-  ctx.rotate(radians)
-}
-
-/**
- * Mapping from EXIF orientation values to data
- * regarding the rotation and mirroring necessary to
- * render the canvas correctly
- * Derived from:
- * http://www.daveperrett.com/articles/2012/07/28/exif-orientation-handling-is-a-ghetto/
- */
-const orientationToTransform = {
-  1: { rotation: 0, mirror: false },
-  2: { rotation: 0, mirror: true },
-  3: { rotation: 180, mirror: false },
-  4: { rotation: 180, mirror: true },
-  5: { rotation: 90, mirror: true },
-  6: { rotation: 90, mirror: false },
-  7: { rotation: 270, mirror: true },
-  8: { rotation: 270, mirror: false }
-}
-
-function applyOrientationCorrection(canvas, ctx, uri) {
-  const orientation = getOrientation(uri)
-  // Only apply transform if there is some non-normal orientation
-  if (orientation && orientation !== 1) {
-    console.log(orientation)
-    const transform = orientationToTransform[orientation]
-    const { rotation } = transform
-    const flipAspect = rotation === 90 || rotation === 270
-    if (flipAspect) {
-      // Fancy schmancy swap algo
-      canvas.width = canvas.height + canvas.width
-      canvas.height = canvas.width - canvas.height
-      canvas.width -= canvas.height
-    }
-    if (rotation > 0) {
-      applyRotation(canvas, ctx, rotation)
-    }
-  }
-}
-
-function getScale(width, height, viewportWidth, viewportHeight, fillViewport) {
-  function fitHorizontal() {
-    return viewportWidth / width
-  }
-  function fitVertical() {
-    return viewportHeight / height
-  }
-  fillViewport = !!fillViewport
-  const landscape = (width / height) > (viewportWidth / viewportHeight)
-  if (landscape) {
-    if (fillViewport) {
-      return fitVertical()
-    }
-    if (width > viewportWidth) {
-      return fitHorizontal()
-    }
-  } else {
-    if (fillViewport) {
-      return fitHorizontal()
-    }
-    if (height > viewportHeight) {
-      return fitVertical()
-    }
-  }
-  return 1
-}
-
-export function renderToCanvas(img, options) {
-  if (!img) return null
-  options = options || {}
-
-  // Canvas max size for any side
-  const maxSide = options.maxSide || 0
-  const canvas = document.createElement('canvas')
-  const ctx = canvas.getContext('2d')
-  const initialScale = options.scale || 1
-  /*
-  // constrain
-  // Scale to needed to constrain canvas to max size
-  let scale = getScale(img.naturalWidth * initialScale, img.naturalHeight * initialScale, maxSide, maxSide, true)
-  // console.log(scale)
-  // Still need to apply the user defined scale
-  scale *= initialScale
-  canvas.width = Math.round(img.naturalWidth * scale)
-  canvas.height = Math.round(img.naturalHeight * scale)
-  */
-  const { naturalWidth, naturalHeight } = img
-  if (maxSide > 0) {
-    if (naturalWidth > naturalHeight) {
-      canvas.width = Math.min(maxSide, naturalWidth)
-      canvas.height = naturalHeight * canvas.width / naturalWidth
-    } else {
-      canvas.height = Math.min(maxSide, naturalHeight)
-      canvas.width = naturalWidth * canvas.height / naturalHeight
-    }
-  } else {
-    canvas.width = naturalWidth
-    canvas.height = naturalHeight
-  }
-  const { correctOrientation } = options
-  const jpeg = !!img.src.match(/data:image\/jpeg|\.jpeg$|\.jpg$/i)
-  const hasDataURI = !!img.src.match(/^data:/)
-
-  ctx.save()
-
-  // Can only correct orientation on JPEGs represented as dataURIs
-  // for the time being
-  if (correctOrientation && jpeg && hasDataURI) {
-    applyOrientationCorrection(canvas, ctx, img.src)
-  }
-  // Resize image if too large
-  // if (scale !== 1) {
-  //   ctx.scale(scale, scale)
-  // }
-
-  ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
-  ctx.restore()
-
-  return canvas
-}
-
-export function renderThumbnail(img) {
-  const resized = renderToCanvas(img, { correctOrientation: true })
-  // const canvas = document.createElement('canvas') // document.querySelector('#user_photo_canvas')
-  // const ctx = canvas.getContext('2d')
-  // ctx.fillStyle = 'black'
-  // ctx.fillRect(0, 0, MAX_SIDE, MAX_SIDE)
-  // const xOffset = (MAX_SIDE - resized.width) / 2
-  // const yOffset = (MAX_SIDE - resized.height) / 2
-  // ctx.drawImage(resized, xOffset, yOffset, resized.width, resized.height)
-  return resized
-}
diff --git a/frontend/common/uploadImage.component.js b/frontend/common/uploadImage.component.js
deleted file mode 100644
index 3ae41c8..0000000
--- a/frontend/common/uploadImage.component.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import React, { Component } from 'react'
-
-import { renderThumbnail } from './upload.helpers'
-
-export default class UploadImageComponent extends Component {
-  constructor(props) {
-    super(props)
-    document.body.addEventListener("dragover", this.dragOver.bind(this))
-    document.body.addEventListener("dragleave", this.dragLeave.bind(this))
-    document.body.addEventListener("drop", this.upload.bind(this))
-  }
-  
-  dragOver(e) {
-    e.stopPropagation()
-    e.preventDefault()
-    document.body.className = 'dragging'
-  }
-
-  dragLeave(e) {
-    e.stopPropagation()
-    e.preventDefault()
-    document.body.className = ''
-  }
-
-  upload(e) {
-    e.preventDefault()
-    document.body.className = ''
-    const files = e.dataTransfer ? e.dataTransfer.files : e.target.files
-    let i
-    let file
-    for (i = 0; i < files.length; i++) {
-      file = files[i]
-      if (file && file.type.match('image.*')) break
-    }
-    if (!file) {
-      console.log('No file specified')
-      return
-    }
-    const fr = new FileReader()
-    fr.onload = fileReaderEvent => {
-      fr.onload = null
-      const img = new Image()
-      img.onload = () => {
-        img.onload = null
-        this.resizeAndUpload(file, img)
-      }
-      img.src = fileReaderEvent.target.result
-    }
-    fr.readAsDataURL(file)
-  }
-
-  resizeAndUpload(file, img) {
-    const canvas = renderThumbnail(img, this.props)
-    canvas.toBlob(blob => {
-      this.props.onUpload({ file, img, canvas, blob, freshen: true })
-    }, 'image/jpeg', this.props.quality || 80)
-  }
-
-  render() {
-    return (
-      <div className='uploadButton'>
-        <input
-          type="file"
-          accept="image/*"
-          onChange={this.upload.bind(this)}
-          required
-        />
-        <div className='dragCurtain'>
-          <div className='dragLabel'>Drop image here</div>
-        </div>
-      </div>
-    )
-  }
-}
diff --git a/frontend/index.js b/frontend/index.js
index 6f1a0a5..393282c 100644
--- a/frontend/index.js
+++ b/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 '/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
 )
diff --git a/frontend/session.js b/frontend/session.js
deleted file mode 100644
index aea0db4..0000000
--- a/frontend/session.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Storage from 'store2'
-
-export const session = Storage.namespace('vcat.search')
-
-export const getDefault = (key, def) => {
-  const val = session.get(key);
-  return (val === null) ? def : val
-}
-export const getDefaultInt = (key, def) => {
-  return parseInt(getDefault(key, def), 10)
-}
-export const getDefaultFloat = (key, def) => {
-  return parseFloat(getDefault(key, def), 10)
-}
-
-const username = session.get('username')
-if (!username) {
-  session.set('username', 'anonymous')
-}
diff --git a/frontend/site/actions.js b/frontend/site/actions.js
deleted file mode 100644
index e672028..0000000
--- a/frontend/site/actions.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { bindActionCreators } from 'redux'
-// import { actions as crudActions } from './api'
-
-import * as siteActions from './site/site.actions'
-
-import { store } from './store'
-
-export default
-    // Object.keys(crudActions)
-          // .map(a => [a, crudActions[a]])
-          // .concat(
-          [
-            ['site', siteActions],
-          ] //)
-          .map(p => [p[0], bindActionCreators(p[1], store.dispatch)])
-          .concat([
-            // ['socket', socketActions],
-          ])
-          .reduce((a,b) => (a[b[0]] = b[1])&&a,{})
\ No newline at end of file
diff --git a/frontend/site/app.js b/frontend/site/app.js
deleted file mode 100644
index cf52460..0000000
--- a/frontend/site/app.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { Component } from 'react'
-import { ConnectedRouter } from 'connected-react-router'
-import { Route } from 'react-router'
-
-import ViewerContainer from './viewer/viewer.container'
-import actions from './actions'
-
-export default class App extends Component {
-  componentDidMount() {
-    const path_partz = window.location.pathname.split('/')
-    const graph_name = path_partz[1]
-    let path_name = null
-    if (path_partz.length > 2) {
-      path_name = path_partz[2]
-    }
-    // console.log('loading', graph_name, path_name)
-    actions.site.loadSite(graph_name, path_name)
-  }
-  
-  render() {
-    return (
-      <ConnectedRouter history={this.props.history}>
-        <div className='app'>
-          <Route path={'/:graph_name/:page_name'} component={ViewerContainer} exact />
-          <Route exact key='root' path='/' render={() => {
-            // setTimeout(() => this.props.history.push('/'), 10)
-            return null
-          }} />
-        </div>
-      </ConnectedRouter>
-    )
-  }
-}
diff --git a/frontend/site/index.js b/frontend/site/index.js
deleted file mode 100644
index 6f1a0a5..0000000
--- a/frontend/site/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { Provider } from 'react-redux'
-
-import App from './app'
-
-import { store, history } from './store'
-
-const container = document.createElement('div')
-container.classList.add('container')
-document.body.appendChild(container)
-
-ReactDOM.render(
-  <Provider store={store}>
-    <App history={history} />
-  </Provider>, container
-)
diff --git a/frontend/site/site/site.actions.js b/frontend/site/site/site.actions.js
deleted file mode 100644
index 5724df8..0000000
--- a/frontend/site/site/site.actions.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as types from '../types'
-import { api } from '../../util'
-import { history } from '../store'
-// import actions from '../../actions'
-// import { session } from '../../session'
-
-export const setSiteTitle = title => dispatch => {
-  document.querySelector('title').innerText = title
-  dispatch({ type: types.site.set_site_title, payload: title })
-}
-
-export const loadSite = (graph_name, path_name) => dispatch => (
-  api(dispatch, types.site, 'site', '/' + graph_name + '/index.json')
-  // .then(res => {
-  //   const { graph } = res.data
-  //   // console.log(graph)
-  //   // console.log(graph.home_page)
-  //   const first_path = ["", graph_name, path_name].join("/")
-  //   if (!path_name || !(first_path in graph.pages)) {
-  //     // console.log(graph.home_page)
-  //     window.location.href = graph.home_page
-  //   }
-  // })
-)
diff --git a/frontend/site/site/site.reducer.js b/frontend/site/site/site.reducer.js
deleted file mode 100644
index f630b9c..0000000
--- a/frontend/site/site/site.reducer.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as types from '../types'
-// import { session, getDefault, getDefaultInt } from '../../session'
-
-const initialState = {
-  siteTitle: 'swimmer',
-  graph: {
-    loading: true,
-  }
-}
-
-export default function siteReducer(state = initialState, action) {
-  console.log(action.type, action)
-  switch (action.type) {
-    case types.site.set_site_title:
-      return {
-        ...state,
-        siteTitle: action.payload,
-      }
-
-    case types.site.loaded:
-      return {
-        ...state,
-        graph: action.data.graph,
-      }
-
-    case '@@router/LOCATION_CHANGE':
-      return {
-        ...state,
-        graph: {
-          ...state.graph,
-        }
-      }
-
-    default:
-      return state
-  }
-}
diff --git a/frontend/site/store.js b/frontend/site/store.js
deleted file mode 100644
index cd77990..0000000
--- a/frontend/site/store.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { applyMiddleware, compose, combineReducers, createStore } from 'redux'
-import { connectRouter, routerMiddleware } from 'connected-react-router'
-import { createBrowserHistory } from 'history'
-import thunk from 'redux-thunk'
-// import { login } from './util'
-
-import siteReducer from './site/site.reducer'
-
-const createRootReducer = history => (
-  combineReducers({
-    auth: (state = {}) => state,
-    router: connectRouter(history),
-    site: siteReducer,
-  })
-)
-
-const configureStore = (initialState = {}, history) => {
-  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
-
-  const store = createStore(
-    createRootReducer(history),
-    initialState,
-    composeEnhancers(
-      applyMiddleware(
-        thunk,
-        routerMiddleware(history)
-      ),
-    ),
-  )
-
-  return store
-}
-
-const history = createBrowserHistory()
-const store = configureStore({}, history)
-const { dispatch } = store
-
-export { store, history, dispatch }
diff --git a/frontend/site/types.js b/frontend/site/types.js
deleted file mode 100644
index 8388eff..0000000
--- a/frontend/site/types.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { with_type, crud_type } from '../api/crud.types'
-
-export const site = with_type('site', [
-  'set_site_title', 'loading', 'loaded', 'error',
-])
-
-export const system = with_type('system', [
-  'load_site',
-])
-
-export const init = '@@INIT'
diff --git a/frontend/site/viewer/viewer.container.js b/frontend/site/viewer/viewer.container.js
deleted file mode 100644
index da81551..0000000
--- a/frontend/site/viewer/viewer.container.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import React, { Component } from 'react'
-import { Route } from 'react-router-dom'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-
-import actions from '../actions'
-import { Loader } from '../../common/loader.component'
-import TileHandle from '../../views/page/components/tile.handle'
-
-import '../../views/page/page.css'
-
-class ViewerContainer extends Component {
-  state = {
-    page: {},
-  }
-
-  constructor(props) {
-    super(props)
-    this.pageRef = React.createRef()
-    this.handleMouseDown = this.handleMouseDown.bind(this)
-  }
-
-  componentDidUpdate(prevProps) {
-    // console.log('didUpdate', this.props.graph !== prevProps.graph, this.props.location.pathname !== prevProps.location.pathname)
-    if (this.props.graph !== prevProps.graph || this.props.location.pathname !== prevProps.location.pathname) {
-      this.load()
-    }
-  }
-
-  load() {
-    const { graph_name, page_name } = this.props.match.params
-    const page_path = ["", graph_name, page_name].join('/')
-    const { pages, home_page } = this.props.graph
-    const page = pages[page_path]
-    if (!page) {
-      // console.log('-> home page')
-      console.log(page_path)
-      const { home_page } = this.props.graph
-      this.setState({ page: pages[home_page] })
-    } else {
-      // console.log(page)
-      console.log(page_path)
-      this.setState({ page })
-    }
-  }
-
-  handleMouseDown(e, tile) {
-    // console.log(tile)
-  }
-
-  render() {
-    const { page } = this.state
-    if (this.props.graph.loading || !page.id) {
-      return (
-        <div>
-          <div className='body'>
-            <div className='page loading'>
-              <Loader />
-            </div>
-          </div>
-        </div>
-      )
-    }
-    const { settings } = page
-    const pageStyle = { backgroundColor: settings ? settings.background_color : '#000000' }
-    // console.log(page)
-    return (
-      <div className='body'>
-        <div className='page' ref={this.pageRef} style={pageStyle}>
-          {page.tiles.map(tile => {
-            return (
-              <TileHandle
-                viewing
-                key={tile.id}
-                tile={tile}
-                bounds={this.state.bounds}
-                onMouseDown={e => this.handleMouseDown(e, tile)}
-                onDoubleClick={e => {}}
-              />
-            )
-          })}
-        </div>
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  site: state.site,
-  graph: state.site.graph,
-})
-
-const mapDispatchToProps = dispatch => ({
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(ViewerContainer)
diff --git a/frontend/store.js b/frontend/store.js
deleted file mode 100644
index e72c54e..0000000
--- a/frontend/store.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { applyMiddleware, compose, combineReducers, createStore } from 'redux'
-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 uploadReducer from './views/upload/upload.reducer'
-import graphReducer from './views/graph/graph.reducer'
-import pageReducer from './views/page/page.reducer'
-import tileReducer from './views/tile/tile.reducer'
-import siteReducer from './views/site/site.reducer'
-// import collectionReducer from './views/collection/collection.reducer'
-
-const createRootReducer = history => (
-  combineReducers({
-    auth: (state = {}) => state,
-    router: connectRouter(history),
-    site: siteReducer,
-    graph: graphReducer,
-    page: pageReducer,
-    tile: tileReducer,
-    upload: uploadReducer,
-    // collection: collectionReducer,
-  })
-)
-
-const configureStore = (initialState = {}, history) => {
-  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
-
-  const store = createStore(
-    createRootReducer(history),
-    initialState,
-    composeEnhancers(
-      applyMiddleware(
-        thunk,
-        // createDebounce(),
-        routerMiddleware(history)
-      ),
-    ),
-  )
-
-  return store
-}
-
-const history = createBrowserHistory()
-const store = configureStore({}, history)
-const { dispatch } = store
-
-export { store, history, dispatch }
diff --git a/frontend/types.js b/frontend/types.js
deleted file mode 100644
index 10fb411..0000000
--- a/frontend/types.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { with_type, crud_type } from './api/crud.types'
-
-export const api = crud_type('api', [])
-
-export const graph = crud_type('graph', [
-  'show_add_page_form', 'hide_add_page_form', 'toggle_add_page_form',
-  'show_edit_page_form', 'hide_edit_page_form', 'toggle_edit_page_form',
-  'update_graph_page',
-])
-
-export const page = crud_type('page', [
-  'show_add_tile_form', 'hide_add_tile_form', 'toggle_add_tile_form',
-  'show_edit_tile_form', 'hide_edit_tile_form', 'toggle_edit_tile_form',
-  'update_page_tile',
-  'set_tile_sort_order', 'update_tile_sort_order',
-  'show_tile_list', 'hide_tile_list', 'toggle_tile_list',
-])
-
-export const tile = crud_type('tile', [
-  'update_temporary_tile', 'clear_temporary_tile',
-])
-
-export const upload = crud_type('upload', [])
-
-export const site = with_type('site', [
-  'set_site_title',
-])
-
-export const system = with_type('system', [
-  'load_site',
-])
-
-export const init = '@@INIT'
diff --git a/frontend/util/index.js b/frontend/util/index.js
deleted file mode 100644
index 194ecf0..0000000
--- a/frontend/util/index.js
+++ /dev/null
@@ -1,331 +0,0 @@
-import { api as api_type } from '../types'
-
-// import { format, formatDistance } from 'date-fns'
-import format from 'date-fns/format'
-import formatDistance from 'date-fns/formatDistance'
-
-export const formatDateTime = dateStr => format(new Date(dateStr), 'd MMM yyyy H:mm')
-export const formatDate = dateStr => format(new Date(dateStr), 'd MMM yyyy')
-export const formatTime = dateStr => format(new Date(dateStr), 'H:mm')
-export const formatAge = dateStr => formatDistance(new Date(), new Date(dateStr)) + ' ago.'
-
-/* Mobile check */
-
-export const isiPhone = !!((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
-export const isiPad = !!(navigator.userAgent.match(/iPad/i))
-export const isAndroid = !!(navigator.userAgent.match(/Android/i))
-export const isMobile = isiPhone || isiPad || isAndroid
-export const isDesktop = !isMobile
-
-const htmlClassList = document.body.parentNode.classList
-htmlClassList.add(isDesktop ? 'desktop' : 'mobile')
-
-/* Default image dimensions */
-
-export const widths = {
-  th: 160,
-  sm: 320,
-  md: 640,
-  lg: 1280,
-}
-
-/* Formatting functions */
-
-const acronyms = 'id url cc sa fp md5 sha256'.split(' ').map(s => '_' + s)
-const acronymsUpperCase = acronyms.map(s => s.toUpperCase())
-
-export const formatName = s => {
-  acronyms.forEach((acronym, i) => s = s.replace(acronym, acronymsUpperCase[i]))
-  return s.replace(/_/g, ' ')
-}
-
-// Use to pad frame numbers with zeroes
-export const pad = (n, m) => {
-  let s = String(n || 0)
-  while (s.length < m) {
-    s = '0' + s
-  }
-  return s
-}
-
-export const courtesyS = (n, s) => n + ' ' + (n === 1 ? s : s + 's')
-
-export const padSeconds = n => n < 10 ? '0' + n : n
-
-export const timestamp = (n = 0, fps = 25) => {
-  n /= fps
-  let s = padSeconds(Math.round(n) % 60)
-  n = Math.floor(n / 60)
-  if (n > 60) {
-    return Math.floor(n / 60) + ':' + padSeconds(n % 60) + ':' + s
-  }
-  return (n % 60) + ':' + s
-}
-
-export const percent = n => (n * 100).toFixed(1) + '%'
-
-export const px = (n, w) => Math.round(n * w) + 'px'
-
-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)
-
-/* URLs */
-
-export const sha256_tree = (sha256, branch_size=2, tree_depth=2) => {
-  const tree_size = tree_depth * branch_size
-  let tree = ""
-  for (var i = 0; i < tree_size; i += branch_size) {
-    tree += '/' + sha256.substr(i, branch_size)
-  }
-  return tree
-}
-
-export const imageUrl = (sha256, frame, size = 'th') => [
-  'https://' + process.env.S3_HOST + '/v1/media/keyframes',
-  sha256_tree(sha256),
-  pad(frame, 6),
-  size,
-  'index.jpg'
-].filter(s => !!s).join('/')
-
-export const uploadUri = ({ sha256, ext }) => '/static/data/uploads' + sha256_tree(sha256) + '/' + sha256 + ext
-export const metadataUri = (sha256, tag) => '/metadata/' + sha256 + '/' + tag + '/'
-export const keyframeUri = (sha256, frame) => '/metadata/' + sha256 + '/keyframe/' + pad(frame, 6) + '/'
-
-export const preloadImage = url => (
-  new Promise((resolve, reject) => {
-    const image = new Image()
-    let loaded = false
-    image.onload = () => {
-      if (loaded) return
-      loaded = true
-      image.onload = null
-      image.onerror = null
-      resolve(image)
-    }
-    image.onerror = () => {
-      if (loaded) return
-      image.onload = null
-      image.onerror = null
-      resolve(image)
-    }
-    // console.log(img.src)
-    // image.crossOrigin = 'anonymous'
-    image.src = url
-    if (image.complete) {
-      image.onload()
-    }
-  })
-)
-
-export const cropImage = (url, crop) => {
-  return new Promise((resolve, reject) => {
-    let { x, y, w, h } = crop
-    const image = new Image()
-    let loaded = false
-    x = parseFloat(x)
-    y = parseFloat(y)
-    w = parseFloat(w)
-    h = parseFloat(h)
-    image.onload = () => {
-      if (loaded) return
-      loaded = true
-      image.onload = null
-      const canvas = document.createElement('canvas')
-      const ctx = canvas.getContext('2d')
-      const width = image.naturalWidth
-      const height = image.naturalHeight
-      canvas.width = w * width
-      canvas.height = h * height
-      ctx.drawImage(
-        image,
-        Math.round(x * width),
-        Math.round(y * height),
-        Math.round(w * width),
-        Math.round(h * height),
-        0, 0, canvas.width, canvas.height
-      )
-      resolve(canvas)
-    }
-    image.onerror = () => {
-      console.log('image error')
-      reject()
-    }
-    // console.log(img.src)
-    image.crossOrigin = 'anonymous'
-    image.src = url
-    if (image.complete) {
-      image.onload()
-    }
-  })
-}
-export const urlSearchParamsToDict = search => {
-  const params = new URLSearchParams(search)
-  const dict = {}
-  params.forEach((value, key) => { // ???
-    dict[key] = value
-  })
-  return dict
-}
-
-/* AJAX */
-
-let cachedAuth = null
-let token = ''
-let username = ''
-
-export const post = (dispatch, type=api_type, tag, url, data) => {
-  let headers
-  if (data instanceof FormData) {
-    headers = {
-      Accept: 'application/json',
-    }
-  } else if (data) {
-    headers = {
-      Accept: 'application/json',
-      'Content-Type': 'application/json; charset=utf-8',
-    }
-    data = JSON.stringify(data)
-  }
-
-  dispatch({
-    type: type.loading,
-    tag,
-  })
-  return fetch(url, {
-    method: 'POST',
-    body: data,
-    headers,
-  })
-  .then(res => res.json())
-  .then(res => dispatch({
-    type: type.loaded,
-    tag,
-    data: res,
-  }))
-  .catch(err => dispatch({
-    type: type.error,
-    tag,
-    err,
-  }))
-}
-
-export const api = (dispatch, type=api_type, tag, url, data) => {
-  dispatch({
-    type: type.loading,
-    tag,
-  })
-  if (url.indexOf('http') !== 0) {
-    url = window.location.origin + url
-  }
-  url = new URL(url)
-  if (data) {
-    url.search = new URLSearchParams(data).toString()
-  }
-  return fetch(url, {
-    method: 'GET',
-    // mode: 'cors',
-  })
-  .then(res => res.json())
-  .then(res => dispatch({
-    type: type.loaded,
-    tag,
-    data: res,
-  }))
-  .catch(err => dispatch({
-    type: type.error,
-    tag,
-    err,
-  }))
-}
-
-/* sorting */
-
-export const numericSort = {
-  asc: (a,b) => a[0] - b[0],
-  desc: (a,b) => b[0] - a[0],
-}
-export const stringSort = {
-  asc: (a,b) => a[0].localeCompare(b[0]),
-  desc: (a,b) => b[0].localeCompare(a[0]),
-}
-export const orderByFn = (s='name asc') => {
-  const [field='name', direction='asc'] = s.split(' ')
-  let mapFn, sortFn
-  switch (field) {
-    case 'id':
-      mapFn = a => [parseInt(a.id) || 0, a]
-      sortFn = numericSort[direction]
-      break
-    case 'epoch':
-      mapFn = a => [parseInt(a.epoch || a.epochs) || 0, a]
-      sortFn = numericSort[direction]
-      break
-    case 'size':
-      mapFn = a => [parseInt(a.size) || 0, a]
-      sortFn = numericSort[direction]
-      break
-    case 'date':
-      mapFn = a => [+new Date(a.date || a.created_at), a]
-      sortFn = numericSort[direction]
-      break
-    case 'updated_at':
-      mapFn = a => [+new Date(a.updated_at), a]
-      sortFn = numericSort[direction]
-      break
-    case 'priority':
-      mapFn = a => [parseInt(a.priority) || parseInt(a.id) || 1000, a]
-      sortFn = numericSort[direction]
-    case 'name':
-    default:
-      mapFn = a => [a.name || "", a]
-      sortFn = stringSort[direction]
-      break
-  }
-  return { mapFn, sortFn }
-}
-export const getOrderedIds = (objects, sort, prepend=[]) => {
-  const { mapFn, sortFn } = orderByFn(sort)
-  return prepend.concat(objects.map(mapFn).sort(sortFn).map(a => a[1].id))
-}
-export const getOrderedIdsFromLookup = (lookup, sort) => {
-  return getOrderedIds(Object.keys(lookup).map(key => lookup[key]), sort)
-}
-
-/* parallel promises */
-
-export const allProgress = (promises, progress_cb) => {
-  let d = 0
-  progress_cb(0, 0, promises.length)
-  promises.forEach((p) => {
-    p.then((s) => {
-      d += 1
-      progress_cb(Math.floor((d * 100) / promises.length), d, promises.length)
-      return s
-    })
-  })
-  return Promise.all(promises)
-}
-
-/* Clipboard */
-
-export function writeToClipboard(str) {
-  return new Promise((resolve, reject) => {
-    let success = false
-    function listener(e) {
-      e.clipboardData.setData("text/plain", str)
-      e.preventDefault()
-      success = true
-    }
-    document.addEventListener("copy", listener)
-    document.execCommand("copy")
-    document.removeEventListener("copy", listener)
-    if (success) {
-      resolve()
-    } else {
-      reject()
-    }
-  })
-}
\ No newline at end of file
diff --git a/frontend/views/graph/components/graph.canvas.js b/frontend/views/graph/components/graph.canvas.js
deleted file mode 100644
index d10de4f..0000000
--- a/frontend/views/graph/components/graph.canvas.js
+++ /dev/null
@@ -1,138 +0,0 @@
-import React, { Component } from 'react'
-
-import { mod, angle } from '../../../util'
-
-const DEFAULT_MEASUREMENT = { width: 16, height: 16 }
-const BACKLINK_SPACING = 10
-const ARROWHEAD_LENGTH = 10
-const GRAPH_LINK_COLOR = "#ff88ff"
-const GRAPH_BACKLINK_COLOR = "#88ffff"
-const GRAPH_UNHOVER_LINK_COLOR = "#884488"
-const GRAPH_UNHOVER_BACKLINK_COLOR = "#448888"
-
-export default class GraphCanvas extends Component {
-  constructor(props) {
-    super(props)
-    this.canvasRef = React.createRef()
-  }
-  
-  componentDidMount() {
-    if (this.props.bounds) {
-      this.draw({})      
-    }
-  }
-  
-  componentDidUpdate(prevProps) {
-    this.draw(prevProps)
-  }
-
-  draw(prevProps) {
-    const { current: canvas } = this.canvasRef
-    const { bounds, pages, currentPage, box, measurements, highlightedPageId } = this.props
-    const { width, height } = bounds
-    if (prevProps.bounds !== bounds) {
-      canvas.width = width
-      canvas.height = height
-    }
-    const ctx = canvas.getContext('2d')
-    ctx.clearRect(0, 0, width, height)
-    ctx.lineWidth = 2
-    const coordsLookup = pages.reduce((a,b) => {
-      if (currentPage && box && b.id === currentPage.id) {
-        a[b.id] = {
-          x: box.x,
-          y: box.y,
-          backlinks: new Set([]),
-        }
-      } else {
-        a[b.id] = {
-          x: b.settings.x,
-          y: b.settings.y,
-          backlinks: new Set([]),
-        }
-      }
-      return a
-    }, {})
-    pages.map(page => {
-      const sourceCoord = coordsLookup[page.id]
-      page.backlinks.map(tile => {
-        if (tile.target_page_id <= 0) return
-        const targetCoord = coordsLookup[tile.page_id]
-        const isHighlightedPage = !highlightedPageId || highlightedPageId === page.id || highlightedPageId === tile.page_id
-        let tile_measurement = measurements[tile.page_id] || DEFAULT_MEASUREMENT
-        let target_measurement = measurements[tile.target_page_id] || DEFAULT_MEASUREMENT
-        let theta = angle(targetCoord.x, targetCoord.y, sourceCoord.x, sourceCoord.y)
-        let x1_offset = tile_measurement.width / 2 // * (0.5 - Math.cos(theta))
-        let y1_offset = tile_measurement.height / 2
-        let x2_offset = target_measurement.width / 2 // (0.5 - Math.cos(theta))
-        let y2_offset = target_measurement.height / 2
-        // skip duplicate links
-        if (sourceCoord.backlinks.has(tile.page_id)) {
-          return
-        }
-        /*
-          if it's pointing right, cos(t) is 1
-          if it's pointing left,  cos(t) is -1
-        */
-        // if (Math.abs(Math.cos(theta)) > 0.5) {
-        // x1_offset += target_measurement.width / 3 * (- Math.cos(theta))
-        // x1_offset += target_measurement.height / 4 * (- Math.sin(theta))
-        x2_offset += target_measurement.width / 3 * (- Math.cos(theta))
-        y2_offset += target_measurement.height / 6 * (- Math.sin(theta))
-        // }
-        // if this is the first time encountering this link...
-        if (!targetCoord.backlinks.has(tile.target_page_id)) {
-          sourceCoord.backlinks.add(tile.page_id)
-          ctx.strokeStyle = isHighlightedPage
-            ? GRAPH_LINK_COLOR
-            : GRAPH_UNHOVER_LINK_COLOR
-        } else { // otherwise this is a two-way link
-          x1_offset += BACKLINK_SPACING * Math.sin(theta)
-          y1_offset += BACKLINK_SPACING * Math.cos(theta)
-          x2_offset += BACKLINK_SPACING * Math.sin(theta)
-          y2_offset += BACKLINK_SPACING * Math.cos(theta)
-          // x1_offset += BACKLINK_SPACING * Math.cos(theta + Math.PI /2)
-          // y1_offset += BACKLINK_SPACING * Math.sin(theta + Math.PI /2)
-          // x2_offset += BACKLINK_SPACING * Math.cos(theta + Math.PI /2)
-          // y2_offset += BACKLINK_SPACING * Math.sin(theta + Math.PI /2)
-          ctx.strokeStyle = isHighlightedPage
-            ? GRAPH_BACKLINK_COLOR
-            : GRAPH_UNHOVER_BACKLINK_COLOR
-        }
-        ctx.beginPath()
-        const x1 = targetCoord.x * width + x1_offset
-        const y1 = targetCoord.y * height + y1_offset
-        const x2 = sourceCoord.x * width + x2_offset
-        const y2 = sourceCoord.y * height + y2_offset
-        this.arrow(ctx, x1, y1, x2, y2)
-        ctx.stroke()
-      })
-    })
-  }
-  
-  arrow(ctx, x1, y1, x2, y2) {
-    const farOffset = 20
-    const endOffset = 1
-    const theta = angle(x1, y1, x2, y2)
-    x1 += Math.cos(theta) * 0
-    x2 -= Math.cos(theta) * farOffset
-    y1 += Math.sin(theta) * 0
-    y2 -= Math.sin(theta) * farOffset
-    const xEnd = x2 - Math.cos(theta) * endOffset
-    const yEnd = y2 - Math.sin(theta) * endOffset
-    const leftAngle = mod(theta - Math.PI / 6, Math.PI * 2)
-    const rightAngle = mod(theta + Math.PI / 6, Math.PI * 2)
-    ctx.moveTo(x1, y1)
-    ctx.lineTo(xEnd, yEnd)
-    ctx.moveTo(x2, y2)
-    ctx.lineTo(x2 - ARROWHEAD_LENGTH * Math.cos(leftAngle), y2 - ARROWHEAD_LENGTH * Math.sin(leftAngle))
-    ctx.moveTo(x2, y2)
-    ctx.lineTo(x2 - ARROWHEAD_LENGTH * Math.cos(rightAngle), y2 - ARROWHEAD_LENGTH * Math.sin(rightAngle))
-  }
-
-  render() {
-    return (
-      <canvas ref={this.canvasRef} />
-    )
-  }
-}
diff --git a/frontend/views/graph/components/graph.editor.js b/frontend/views/graph/components/graph.editor.js
deleted file mode 100644
index f0a5753..0000000
--- a/frontend/views/graph/components/graph.editor.js
+++ /dev/null
@@ -1,212 +0,0 @@
-import React, { Component } from 'react'
-import { Route, Link } from 'react-router-dom'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-
-import { session } from '../../../session'
-import actions from '../../../actions'
-import * as graphActions from '../graph.actions'
-
-import { Loader } from '../../../common'
-import { clamp, dist, mod, angle } from '../../../util'
-
-import GraphCanvas from './graph.canvas'
-import PageHandle from './page.handle'
-
-const defaultState = {
-  dragging: false,
-  bounds: null,
-  mouseX: 0,
-  mouseY: 0,
-  box: {
-    x: 0, y: 0,
-    w: 0, h: 0,
-  },
-  page: null,
-  highlightedPageId: null,
-  measurements: {},
-}
-
-class GraphEditor extends Component {
-  state = {
-    ...defaultState,
-  }
-
-  constructor() {
-    super()
-    // bind these events in the constructor, so we can remove event listeners later
-    this.handleMouseDown = this.handleMouseDown.bind(this)
-    this.handleMouseMove = this.handleMouseMove.bind(this)
-    this.handleMouseUp = this.handleMouseUp.bind(this)
-    this.handleWindowResize = this.handleWindowResize.bind(this)
-    this.handleMouseEnter = this.handleMouseEnter.bind(this)
-    this.handleMouseLeave = this.handleMouseLeave.bind(this)
-    this.graphRef = React.createRef()
-    this.measurements = {}
-  }
-
-  getBoundingClientRect() {
-    if (!this.graphRef.current) return null
-    const rect = this.graphRef.current.getBoundingClientRect()
-    const scrollTop = document.body.scrollTop || document.body.parentNode.scrollTop
-    const scrollLeft = document.body.scrollLeft || document.body.parentNode.scrollLeft
-    const bounds = {
-      top: rect.top + scrollTop,
-      left: rect.left + scrollLeft,
-      width: rect.width,
-      height: rect.height,
-    }
-    // console.log(bounds)
-    return bounds
-  }
-
-  componentDidMount() {
-    document.body.addEventListener('mousemove', this.handleMouseMove)
-    document.body.addEventListener('mouseup', this.handleMouseUp)
-    window.addEventListener('resize', this.handleWindowResize)
-    this.setState({ bounds: this.getBoundingClientRect() })
-  }
-
-  componentDidUpdate(prevProps) {
-    if (!this.state.bounds) {
-      this.setState({ bounds: this.getBoundingClientRect() })
-    }
-  }
-
-  addMeasurement({ id, width, height }) {
-    this.measurements[id] = { width, height }
-    this.setState({
-      measurements: { ...this.measurements },
-    })
-  }
-
-  handleWindowResize() {
-    this.setState({ bounds: this.getBoundingClientRect() })
-  }
-
-  handleMouseDown(e, page) {
-    if (e.shiftKey) {
-      e.preventDefault()
-      this.props.graphActions.setHomePageId(this.props.graph.show.res, page)
-      return
-    }
-    const bounds = this.getBoundingClientRect()
-    const mouseX = e.pageX
-    const mouseY = e.pageY
-    let w = 128 / bounds.width
-    let h = 16 / bounds.height
-    let { x, y } = page.settings
-    x = clamp(x, 0, 1)
-    y = clamp(y, 0, 1)
-    this.setState({
-      page,
-      dragging: true,
-      bounds,
-      mouseX,
-      mouseY,
-      box: {
-        x, y,
-        w, h,
-      },
-      initialBox: {
-        x, y,
-        w, h,
-      }
-    })
-  }
-
-  handleMouseMove(e) {
-    const {
-      dragging,
-      bounds, mouseX, mouseY, initialBox, box
-    } = this.state
-    if (dragging) {
-      e.preventDefault()
-      let { x, y, w, h } = initialBox
-      let dx = (e.pageX - mouseX) / bounds.width
-      let dy = (e.pageY - mouseY) / bounds.height
-      this.setState({
-        box: {
-          x: clamp(x + dx, 0, 1.0 - w),
-          y: clamp(y + dy, 0, 1.0 - h),
-          w, h,
-        }
-      })
-    }
-  }
-
-  handleMouseUp(e) {
-    // const { actions } = this.props
-    const { dragging, bounds, initialBox, box, page } = this.state
-    if (!dragging) return
-    e.preventDefault()
-    const { width, height } = bounds
-    const { x, y, w, h } = box
-    let url = window.location.pathname
-    this.setState({
-      page: null,
-      box: null,
-      initialBox: null,
-      dragging: false,
-    })
-    if (dist(width * x, height * y, width * initialBox.x, height * initialBox.y) < 3) return
-    const updatedPage = {
-      ...page,
-      settings: {
-        ...page.settings,
-        x, y,
-      }
-    }
-    this.props.graphActions.updateGraphPage(updatedPage)
-    actions.page.update(updatedPage)
-  }
-
-  handleMouseEnter(e, page) {
-    this.setState({ highlightedPageId: page.id })
-  }
-  handleMouseLeave(e, page) {
-    this.setState({ highlightedPageId: null })
-  }
-
-  render(){
-    // console.log(this.props.graph.show.res)
-    const { page: currentPage, box, measurements, highlightedPageId } = this.state
-    const { res: graph } = this.props.graph.show
-    // console.log(res.pages)
-    return (    
-      <div className='graph' ref={this.graphRef}>
-        <GraphCanvas
-          bounds={this.state.bounds}
-          pages={graph.pages}
-          currentPage={currentPage}
-          highlightedPageId={highlightedPageId}
-          measurements={measurements}
-          box={box}
-        />
-        {this.state.bounds && graph.pages.map(page => (
-          <PageHandle
-            key={page.id}
-            graph={graph}
-            page={page}
-            bounds={this.state.bounds}
-            box={currentPage && page.id === currentPage.id && box}
-            onMouseDown={e => this.handleMouseDown(e, page)}
-            onMouseEnter={e => this.handleMouseEnter(e, page)}
-            onMouseLeave={e => this.handleMouseLeave(e, page)}
-            onMeasure={measurement => this.addMeasurement(measurement)}
-          />
-        ))}
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  graph: state.graph,
-})
-
-const mapDispatchToProps = dispatch => ({
-  graphActions: bindActionCreators({ ...graphActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(GraphEditor)
diff --git a/frontend/views/graph/components/graph.header.js b/frontend/views/graph/components/graph.header.js
deleted file mode 100644
index 46ad962..0000000
--- a/frontend/views/graph/components/graph.header.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import { Link } from 'react-router-dom'
-
-import * as graphActions from '../graph.actions'
-
-function GraphHeader(props) {
-  return (
-    <header>
-      <div>
-        <Link to="/" className="logo"><b>{props.site.siteTitle}</b></Link>
-      </div>
-      <div>
-        <button onClick={() => props.graphActions.toggleAddPageForm()}>+ Add page</button>
-      </div>
-    </header>
-  )
-}
-
-const mapStateToProps = (state) => ({
-  // auth: state.auth,
-  site: state.site,
-  // isAuthenticated: state.auth.isAuthenticated,
-})
-
-const mapDispatchToProps = (dispatch) => ({
-  graphActions: bindActionCreators({ ...graphActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(GraphHeader) 
diff --git a/frontend/views/graph/components/page.edit.js b/frontend/views/graph/components/page.edit.js
deleted file mode 100644
index 5bc64d6..0000000
--- a/frontend/views/graph/components/page.edit.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React, { Component } from 'react'
-import { Link } from 'react-router-dom'
-import { connect } from 'react-redux'
-import { bindActionCreators } from 'redux'
-
-import { history } from '../../../store'
-import actions from '../../../actions'
-import * as siteActions from '../../site/site.actions'
-import * as graphActions from '../../graph/graph.actions'
-
-import { Loader } from '../../../common'
-
-import PageForm from '../components/page.form'
-
-class PageEdit extends Component {
-  componentDidMount() {
-    // actions.page.show(this.props.match.params.id)
-  }
-
-  handleSubmit(data) {
-    const { path: graphPath } = this.props.graph.show.res
-    const { path: oldPagePath } = this.props.page.show.res
-    const { path: newPagePath } = data
-    actions.page.update(data)
-      .then(response => {
-        // console.log(response)
-        actions.site.setSiteTitle(response.res.title)
-        this.props.graphActions.hideEditPageForm()
-        if (oldPagePath !== newPagePath) {
-          const newPath = '/' + graphPath + '/' + newPagePath
-          history.push(newPath)
-        }
-      })
-  }
-
-  render() {
-    const { show } = this.props.page
-    if (show.loading || !show.res) {
-      return (
-        <div className='form'>
-          <Loader />
-        </div>
-      )
-    }
-    return (
-      <PageForm
-        data={show.res}
-        graph={this.props.graph.show.res}
-        onSubmit={this.handleSubmit.bind(this)}
-      />
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  graph: state.graph,
-  page: state.page,
-})
-
-const mapDispatchToProps = dispatch => ({
-  siteActions: bindActionCreators({ ...siteActions }, dispatch),
-  graphActions: bindActionCreators({ ...graphActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(PageEdit)
diff --git a/frontend/views/graph/components/page.form.js b/frontend/views/graph/components/page.form.js
deleted file mode 100644
index 38fee18..0000000
--- a/frontend/views/graph/components/page.form.js
+++ /dev/null
@@ -1,185 +0,0 @@
-import React, { Component } from 'react'
-import { Link } from 'react-router-dom'
-
-import { session } from '../../../session'
-
-import { TextInput, ColorInput, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from '../../../common'
-
-const newPage = (data) => ({
-  path: '',
-  title: '',
-  username: session('username'),
-  description: '',
-  settings: {
-    x: 0.05,
-    y: 0.05,
-    background_color: '#000000',
-  },
-  ...data,
-})
-
-export default class PageForm extends Component {
-  state = {
-    title: "",
-    submitTitle: "",
-    data: { ...newPage() },
-    errorFields: new Set([]),
-  }
-
-  componentDidMount() {
-    const { graph, data, isNew } = this.props
-    const title = isNew ? 'new page' : 'editing ' + data.title
-    const submitTitle = isNew ? "Create Page" : "Save Changes"
-    this.setState({
-      title,
-      submitTitle,
-      errorFields: new Set([]),
-      data: { 
-        ...newPage({ graph_id: graph.id }),
-        ...data,
-      },
-    })
-  }
-
-  handleChange(e) {
-    const { errorFields } = this.state
-    const { name, value } = e.target
-    if (errorFields.has(name)) {
-      errorFields.delete(name)
-    }
-    let sanitizedValue = value
-    if (name === 'path') {
-      sanitizedValue = sanitizedValue.toLowerCase().replace(/ /, '-').replace(/[!@#$%^&*()[\]{}]/, '-').replace(/-+/, '-')
-    }
-    this.setState({
-      errorFields,
-      data: {
-        ...this.state.data,
-        [name]: sanitizedValue,
-      }
-    })
-  }
-
-  handleSelect(name, value) {
-    const { errorFields } = this.state
-    if (errorFields.has(name)) {
-      errorFields.delete(name)
-    }
-    this.setState({
-      errorFields,
-      data: {
-        ...this.state.data,
-        [name]: value,
-      }
-    })
-  }
-
-  handleSettingsChange(e) {
-    const { name, value } = e.target
-    this.setState({
-      data: {
-        ...this.state.data,
-        settings: {
-          ...this.state.data.settings,
-          [name]: value,
-        }
-      }
-    })
-  }
-
-  handleSubmit(e) {
-    e.preventDefault()
-    const { isNew, onSubmit } = this.props
-    const { data } = this.state
-    const requiredKeys = "path title".split(" ")
-    const validKeys = "graph_id path title username description settings".split(" ")
-    const validData = validKeys.reduce((a,b) => { a[b] = data[b]; return a }, {})
-    const errorFields = requiredKeys.filter(key => !validData[key])
-    if (errorFields.length) {
-      console.log('error', errorFields, validData)
-      this.setState({ errorFields: new Set(errorFields) })
-    } else {
-      if (isNew) {
-        // side effect: set username if we're creating a new page
-        // session.set('username', data.username)
-      } else {
-        validData.id = data.id
-      }
-      console.log('submit', validData)
-      onSubmit(validData)
-    }
-  }
-
-  handleDelete() {
-    const { data } = this.state
-    console.log(data)
-    if (confirm('Really delete this page?')) {
-      actions.page.delete(page_id)
-    }
-  }
-
-  render() {
-    const { graph, isNew } = this.props
-    const { title, submitTitle, errorFields, data } = this.state
-    return (
-      <div className='box'>
-        <h1>{title}</h1>
-        <form onSubmit={this.handleSubmit.bind(this)}>
-          <TextInput
-            title="Path"
-            name="path"
-            required
-            data={data}
-            error={errorFields.has('path')}
-            onChange={this.handleChange.bind(this)}
-            autoComplete="off"
-          />
-          <LabelDescription>
-            {'Page URL: /' + graph.path + '/'}<b>{data.path}</b>
-          </LabelDescription>
-          <TextInput
-            title="Title"
-            name="title"
-            required
-            data={data}
-            error={errorFields.has('title')}
-            onChange={this.handleChange.bind(this)}
-            autoComplete="off"
-          />
-          <ColorInput
-            title='BG'
-            name='background_color'
-            data={data.settings}
-            onChange={this.handleSettingsChange.bind(this)}
-            autoComplete="off"
-          />
-          <TextArea
-            title="Description"
-            name="description"
-            data={data}
-            onChange={this.handleChange.bind(this)}
-          />
-          <div className='row buttons'>
-            <SubmitButton
-              title={submitTitle}
-              onClick={this.handleSubmit.bind(this)}
-            />
-            {!isNew && 
-              <SubmitButton
-                title={'Delete'}
-                className='destroy'
-                onClick={this.handleDelete.bind(this)}
-              />
-            }
-          </div>
-          {!!errorFields.size &&
-            <label>
-              <span></span>
-              <span>Please complete the required fields =)</span>
-            </label>
-          }
-        </form>
-      </div>
-    )
-  }
-}
diff --git a/frontend/views/graph/components/page.handle.js b/frontend/views/graph/components/page.handle.js
deleted file mode 100644
index 7093399..0000000
--- a/frontend/views/graph/components/page.handle.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, { Component } from 'react'
-import { Link } from 'react-router-dom'
-
-import { history } from '../../../store'
-
-export default class PageHandle extends Component {
-  constructor(props){
-    super(props)
-    this.ref = React.createRef()
-  }
-  componentDidMount(){
-    this.measure()
-  }
-  componentDidUpdate(prevProps){
-    if (this.props.page.title !== prevProps.page.title) {
-      this.measure()
-    }
-  }
-  measure() {
-    const { offsetWidth: width, offsetHeight: height } = this.ref.current
-    const { id } = this.props.page
-    // console.log(id, width, height)
-    this.props.onMeasure({ id, width, height })
-  }
-  render() {
-    const { graph, page, bounds, box, onMouseDown, onMouseEnter, onMouseLeave } = this.props
-    let style;
-    if (box) {
-      style = {
-        top: (bounds.height) * box.y,
-        left: (bounds.width) * box.x,
-      }
-    } else {
-      style = {
-        top: (bounds.height) * Math.min(page.settings.y, 0.95),
-        left: (bounds.width) * Math.min(page.settings.x, 0.95),
-      }
-    }
-    const className = (graph.home_page_id === page.id)
-      ? 'handle homepage'
-      : 'handle'
-    const url = '/' + graph.path + '/' + page.path
-    // console.log(style)
-    return (
-      <div
-        className={className}
-        ref={this.ref}
-        onMouseDown={onMouseDown}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        onDoubleClick={() => history.push(url)}
-        style={style}
-      >
-        {page.path}
-        <Link to={url}>{'>'}</Link>
-      </div>
-    )
-  }
-}
diff --git a/frontend/views/graph/components/page.new.js b/frontend/views/graph/components/page.new.js
deleted file mode 100644
index bc74358..0000000
--- a/frontend/views/graph/components/page.new.js
+++ /dev/null
@@ -1,47 +0,0 @@
-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 PageForm from '../components/page.form'
-
-class PageNew extends Component {
-  handleSubmit(data) {
-    console.log(data)
-    actions.page.create(data)
-      .then(res => {
-        console.log(res)
-        const graph = this.props.graph.show.res
-        if (res.res && res.res.id) {
-          history.push('/' + graph.path + '/' + res.res.path)
-        }
-      })
-      .catch(err => {
-        console.error('error', err)
-      })
-  }
-
-  render() {
-    return (
-      <PageForm
-        isNew
-        graph={this.props.graph.show.res}
-        data={{}}
-        onSubmit={this.handleSubmit.bind(this)}
-      />
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  graph: state.graph,
-  page: state.page,
-})
-
-const mapDispatchToProps = dispatch => ({
-  // searchActions: bindActionCreators({ ...searchActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(PageNew)
diff --git a/frontend/views/graph/graph.actions.js b/frontend/views/graph/graph.actions.js
deleted file mode 100644
index bf6b643..0000000
--- a/frontend/views/graph/graph.actions.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as types from '../../types'
-import actions from '../../actions'
-
-export const showAddPageForm = () => dispatch => {
-  dispatch({ type: types.graph.show_add_page_form })
-}
-
-export const hideAddPageForm = () => dispatch => {
-  dispatch({ type: types.graph.hide_add_page_form })
-}
-
-export const toggleAddPageForm = () => dispatch => {
-  dispatch({ type: types.graph.toggle_add_page_form })
-}
-
-export const showEditPageForm = () => dispatch => {
-  dispatch({ type: types.graph.show_edit_page_form })
-}
-
-export const hideEditPageForm = () => dispatch => {
-  dispatch({ type: types.graph.hide_edit_page_form })
-}
-
-export const toggleEditPageForm = () => dispatch => {
-  dispatch({ type: types.graph.toggle_edit_page_form })
-}
-
-export const updateGraphPage = page => dispatch => {
-  dispatch({ type: types.graph.update_graph_page, page })
-}
-
-export const setHomePageId = (graph, page) => dispatch => {
-  let updated_graph = { ...graph }
-  delete updated_graph.pages
-  updated_graph.home_page_id = page.id
-  actions.graph.update(updated_graph)
-}
\ No newline at end of file
diff --git a/frontend/views/graph/graph.container.js b/frontend/views/graph/graph.container.js
deleted file mode 100644
index 7f53d64..0000000
--- a/frontend/views/graph/graph.container.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import React, { Component } from 'react'
-import { Route } from 'react-router-dom'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-
-import './graph.css'
-
-import actions from '../../actions'
-import { Loader } from '../../common'
-
-// import * as uploadActions from './upload.actions'
-
-import PageNew from './components/page.new'
-import PageEdit from './components/page.edit'
-
-import GraphHeader from './components/graph.header'
-import GraphEditor from './components/graph.editor'
-
-class GraphContainer extends Component {
-  componentDidMount() {
-    if (this.shouldShowGraph()) this.load()
-  }
-  componentDidUpdate(prevProps) {
-    if (this.shouldLoadGraph(prevProps)) this.load()
-  }
-  shouldShowGraph() {
-    const { graph_name, page_name } = this.props.match.params
-    return (graph_name && !page_name && graph_name !== 'index')
-  }
-  shouldLoadGraph(prevProps) {
-    const { graph, location } = this.props
-    const { key } = location
-    if (key === prevProps.location.key) return false
-    if (!this.shouldShowGraph()) return false
-    return (graph.show.name === prevProps.graph.show.name)
-  }
-  load() {
-    actions.site.setSiteTitle("loading " + this.props.match.params.graph_name + "...")
-    actions.graph.show('name/' + this.props.match.params.graph_name)
-    .then(data => {
-      actions.site.setSiteTitle(data.res.title)
-    })
-  }
-  render() {
-    if (!this.shouldShowGraph()) return <div />
-    if (!this.props.graph.show.res || this.props.graph.show.loading) {
-      return (
-        <div>
-          <GraphHeader />
-          <div className='body'>
-            <div className='graph loading'>
-              <Loader />
-            </div>
-          </div>
-        </div>
-      )
-    }
-    return (
-      <div>
-        <GraphHeader />
-        <div className='body'>
-          <GraphEditor />
-          <div className='sidebar'>
-            {this.props.graph.editor.addingPage && <PageNew />}
-            {this.props.graph.editor.editingPage && <PageEdit />}
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-// <Route exact path='/:graph_name' component={GraphView} />
-const mapStateToProps = state => ({
-  graph: state.graph,
-})
-
-const mapDispatchToProps = dispatch => ({
-  // uploadActions: bindActionCreators({ ...uploadActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(GraphContainer)
diff --git a/frontend/views/graph/graph.css b/frontend/views/graph/graph.css
deleted file mode 100644
index 389a55d..0000000
--- a/frontend/views/graph/graph.css
+++ /dev/null
@@ -1,172 +0,0 @@
-.graph.loading {
-  padding: 1rem;
-}
-.graph {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background: linear-gradient(
-      0deg,
-      rgba(128, 0, 64, 0.5),
-      rgba(0, 0, 64, 0.5)
-    );
-}
-.graph canvas {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-/* Sidebar boxes */
-
-.sidebar {
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 1rem;
-  overflow: auto;
-  max-height: 100%;
-  z-index: 20;
-}
-.box {
-  width: 15rem;
-  padding: 0.5rem;
-  background: rgba(64,12,64,0.9);
-  border: 2px solid #000;
-  box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
-}
-.box h1,
-.box h2 {
-  font-size: 1rem;
-  margin: 0 0 0.5rem 0;
-}
-.box form label {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  margin-bottom: 0.25rem;
-}
-.box form .buttons {
-  justify-content: space-between;
-}
-.box form .buttons label {
-  width: auto;
-  min-width: auto;
-}
-.box form .buttons label span {
-  display: none;
-}
-.box form .buttons button:last-child {
-  margin-right: 0;
-}
-.box form label.checkbox {
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-}
-.box form input[type="checkbox"] {
-  margin-left: 0rem;
-}
-.box form input[type=checkbox] + span {
-  color: #ddd;
-}
-.box form input[type=checkbox]:hover + span {
-  color: #fff;
-}
-.box form input[type="checkbox"]:after {
-  border-color: #84f;
-}
-.box form input[type="checkbox"]:checked:after {
-  border-color: #84f;
-  background-color: #84f;
-}
-.box form input[type=checkbox]:hover + span {
-  color: #84f;
-}
-.box input[type=text],
-.box input[type=number],
-.box input[type=password] {
-  padding: 0.25rem;
-  max-width: 100%;
-  border-color: #888;
-}
-.box textarea {
-  max-width: 100%;
-  height: 5rem;
-  border-color: #888;
-}
-.box .select {
-  padding: 0.25rem;
-  margin-right: 0;
-}
-.box .selects label {
-  flex-direction: row;
-  width: 6.5rem;
-  margin-right: 0.5rem;
-  min-width: auto;
-}
-.box form textarea {
-  padding: 0.25rem;
-}
-
-.box form .pair label span {
-  min-width: 3rem;
-  padding: 0.25rem 0;
-}
-.box .pair label {
-  flex-direction: row;
-  width: 6.5rem;
-  margin-right: 0.5px;
-  min-width: auto;
-}
-.box .pair input[type=text] {
-  width: 3rem;
-}
-.box .position {
-  font-size: smaller;
-  margin-bottom: 0.25rem;
-}
-
-.box .slider {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}
-.box .slider span {
-  min-width: 4rem;
-  width: 4rem;
-  padding: 0.125rem 0;
-}
-.box .slider input[type='number'] {
-  width: 3.5rem;
-}
-.box .slider input[type='range'] {
-  width: 5.5rem; 
-}
-
-/* Graph handles */
-
-.handle {
-  position: absolute;
-  border: 2px solid #888;
-  background: #8833dd;
-  padding: 0.25rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 8rem;
-  user-select: none;
-  cursor: arrow;
-}
-.handle.homepage {
-  background: #533854;
-  border-color: #edc40e;
-}
-.handle a {
-  margin-left: 0.25rem;
-  color: #fff;
-  font-weight: bold;
-  text-decoration: none;
-}
diff --git a/frontend/views/graph/graph.reducer.js b/frontend/views/graph/graph.reducer.js
deleted file mode 100644
index 37798b3..0000000
--- a/frontend/views/graph/graph.reducer.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import * as types from '../../types'
-// import { session, getDefault, getDefaultInt } from '../../session'
-
-import { crudState, crudReducer } from '../../api/crud.reducer'
-
-const initialState = crudState('graph', {
-  editor: {
-    addingPage: false,
-    editingPage: false,
-  },
-  options: {
-  }
-})
-
-const reducer = crudReducer('graph')
-
-export default function graphReducer(state = initialState, action) {
-  // console.log(action.type, action)
-  state = reducer(state, action)
-  switch (action.type) {
-    case types.graph.update_graph_page:
-      return {
-        ...state,
-        show: {
-          ...state.show,
-          res: {
-            ...state.show.res,
-            pages: state.show.res.pages.map(page => {
-              if (page.id === action.page.id) {
-                return { ...action.page }
-              } else {
-                return page
-              }
-            }),
-          }
-        }
-      }
-
-    case types.graph.show_add_page_form:
-      return {
-        ...state,
-        editor: {
-          ...state.editor,
-          addingPage: true,
-          editingPage: false,
-        }
-      }
-
-    case types.graph.hide_add_page_form:
-      return {
-        ...state,
-        editor: {
-          ...state.editor,
-          addingPage: false,
-        }
-      }
-
-    case types.graph.toggle_add_page_form:
-      return {
-        ...state,
-        editor: {
-          ...state.editor,
-          addingPage: !state.editor.addingPage,
-          editingPage: false,
-        }
-      }
-
-    case types.graph.show_edit_page_form:
-      return {
-        ...state,
-        editor: {
-          ...state.editor,
-          addingPage: false,
-          editingPage: true,
-        }
-      }
-
-    case types.graph.hide_edit_page_form:
-      return {
-        ...state,
-        editor: {
-          ...state.editor,
-          editingPage: false,
-        }
-      }
-
-    case types.graph.toggle_edit_page_form:
-      return {
-        ...state,
-        editor: {
-          ...state.editor,
-          addingPage: false,
-          editingPage: !state.editor.editingPage,
-        }
-      }
-
-    default:
-      return state
-  }
-}
diff --git a/frontend/views/index.js b/frontend/views/index.js
deleted file mode 100644
index c50ab80..0000000
--- a/frontend/views/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as index } from './index/index.container'
-export { default as graph } from './graph/graph.container'
-export { default as page } from './page/page.container'
-export { default as upload } from './upload/upload.container'
diff --git a/frontend/views/index/components/graph.form.js b/frontend/views/index/components/graph.form.js
deleted file mode 100644
index d90b663..0000000
--- a/frontend/views/index/components/graph.form.js
+++ /dev/null
@@ -1,153 +0,0 @@
-import React, { Component } from 'react'
-import { Link } from 'react-router-dom'
-
-import { session } from '../../../session'
-
-import { TextInput, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from '../../../common'
-
-const newGraph = () => ({
-  path: '',
-  title: '',
-  username: session('username'),
-  description: '',
-})
-
-export default class GraphForm extends Component {
-  state = {
-    title: "",
-    submitTitle: "",
-    data: { ...newGraph() },
-    errorFields: new Set([]),
-  }
-
-  componentDidMount() {
-    const { data, isNew } = this.props
-    const title = isNew ? 'new project' : 'editing ' + data.title
-    const submitTitle = isNew ? "Create Graph" : "Save Changes"
-    this.setState({
-      title,
-      submitTitle,
-      errorFields: new Set([]),
-      data: { 
-        ...newGraph(),
-        ...data
-      },
-    })
-  }
-
-  handleChange(e) {
-    const { errorFields } = this.state
-    const { name, value } = e.target
-    if (errorFields.has(name)) {
-      errorFields.delete(name)
-    }
-    let sanitizedValue = value
-    if (name === 'path') {
-      sanitizedValue = sanitizedValue.toLowerCase().replace(/ /, '-').replace(/[!@#$%^&*()[\]{}]/, '-').replace(/-+/, '-')
-    }
-    this.setState({
-      errorFields,
-      data: {
-        ...this.state.data,
-        [name]: sanitizedValue,
-      }
-    })
-  }
-
-  handleSelect(name, value) {
-    const { errorFields } = this.state
-    if (errorFields.has(name)) {
-      errorFields.delete(name)
-    }
-    this.setState({
-      errorFields,
-      data: {
-        ...this.state.data,
-        [name]: value,
-      }
-    })
-  }
-
-  handleSubmit(e) {
-    e.preventDefault()
-    const { isNew, onSubmit } = this.props
-    const { data } = this.state
-    const requiredKeys = "title username path description".split(" ")
-    const validKeys = "title username path description".split(" ")
-    const validData = validKeys.reduce((a,b) => { a[b] = data[b]; return a }, {})
-    const errorFields = requiredKeys.filter(key => !validData[key])
-    if (errorFields.length) {
-      console.log('error', errorFields, validData)
-      this.setState({ errorFields: new Set(errorFields) })
-    } else {
-      if (isNew) {
-        // side effect: set username if we're creating a new graph
-        session.set('username', data.username)
-      } else {
-        validData.id = data.id
-      }
-      console.log('submit', validData)
-      onSubmit(validData)
-    }
-  }
-
-  render() {
-    const { isNew } = this.props
-    const { title, submitTitle, errorFields, data } = this.state
-    return (
-      <div className='form'>
-        <h1>{title}</h1>
-        <form onSubmit={this.handleSubmit.bind(this)}>
-          <TextInput
-            title="Path"
-            name="path"
-            required
-            data={data}
-            error={errorFields.has('path')}
-            onChange={this.handleChange.bind(this)}
-            autoComplete="off"
-          />
-          <LabelDescription>
-            {data.path
-              ? 'Project URLs will be: /' + data.path + '/example'
-              : 'Enter the base path for this project.'}
-          </LabelDescription>
-          <TextInput
-            title="Title"
-            name="title"
-            required
-            data={data}
-            error={errorFields.has('title')}
-            onChange={this.handleChange.bind(this)}
-            autoComplete="off"
-          />
-          <TextInput
-            title="Author"
-            name="username"
-            required
-            data={data}
-            error={errorFields.has('username')}
-            onChange={this.handleChange.bind(this)}
-            autoComplete="off"
-          />
-          <TextArea
-            title="Description"
-            name="description"
-            data={data}
-            onChange={this.handleChange.bind(this)}
-          />
-          <SubmitButton
-            title={submitTitle}
-            onClick={this.handleSubmit.bind(this)}
-          />
-          {!!errorFields.size &&
-            <label>
-              <span></span>
-              <span>Please complete the required fields =)</span>
-            </label>
-          }
-        </form>
-      </div>
-    )
-  }
-}
diff --git a/frontend/views/index/containers/graph.edit.js b/frontend/views/index/containers/graph.edit.js
deleted file mode 100644
index ce1b404..0000000
--- a/frontend/views/index/containers/graph.edit.js
+++ /dev/null
@@ -1,53 +0,0 @@
-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 { Loader } from '../../../common'
-
-import GraphForm from '../components/graph.form'
-
-class GraphEdit extends Component {
-  componentDidMount() {
-    console.log(this.props.match.params.id)
-    actions.graph.show(this.props.match.params.id)
-  }
-
-  handleSubmit(data) {
-    actions.graph.update(data)
-      .then(response => {
-        // response
-        console.log(response)
-        history.push('/' + data.path)
-      })
-  }
-
-  render() {
-    const { show } = this.props.graph
-    if (show.loading || !show.res) {
-      return (
-        <div className='form'>
-          <Loader />
-        </div>
-      )
-    }
-    return (
-      <GraphForm
-        data={show.res}
-        onSubmit={this.handleSubmit.bind(this)}
-      />
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  graph: state.graph,
-})
-
-const mapDispatchToProps = dispatch => ({
-  // searchActions: bindActionCreators({ ...searchActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(GraphEdit)
diff --git a/frontend/views/index/containers/graph.index.js b/frontend/views/index/containers/graph.index.js
deleted file mode 100644
index 35c2d82..0000000
--- a/frontend/views/index/containers/graph.index.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React, { Component } from 'react'
-import { Link } from 'react-router-dom'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-
-import { Loader } from '../../../common'
-import actions from '../../../actions'
-// import * as uploadActions from './upload.actions'
-
-class GraphIndex extends Component {
-  componentDidMount() {
-    actions.graph.index()
-  }
-  render() {
-    const { index } = this.props
-    // console.log(this.props)
-    if (!index.order) {
-      return (
-        <div className='graphIndex'>
-          <Loader />
-        </div>
-      )      
-    }
-    // console.log(state)
-    return (
-      <div className='graphIndex'>
-        <div>
-          <b>welcome, swimmer</b>
-          <Link to='/index/new'>+ new project</Link>
-        </div>
-        {index.order.map(id => {
-          const graph = index.lookup[id]
-          return (
-            <div key={id}>
-              <Link to={'/' + graph.path}>{graph.title}</Link>
-              <Link to={'/index/' + id + '/edit'}>{'edit project'}</Link>
-            </div>
-          )
-        })}
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  index: state.graph.index,
-})
-
-const mapDispatchToProps = dispatch => ({
-  // uploadActions: bindActionCreators({ ...uploadActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(GraphIndex)
diff --git a/frontend/views/index/containers/graph.new.js b/frontend/views/index/containers/graph.new.js
deleted file mode 100644
index be96bf5..0000000
--- a/frontend/views/index/containers/graph.new.js
+++ /dev/null
@@ -1,44 +0,0 @@
-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 GraphForm from '../components/graph.form'
-
-class GraphNew extends Component {
-  handleSubmit(data) {
-    console.log(data)
-    actions.graph.create(data)
-      .then(res => {
-        console.log(res)
-        if (res.res && res.res.id) {
-          history.push('/' + res.res.path)
-        }
-      })
-      .catch(err => {
-        console.error('error')
-      })
-  }
-
-  render() {
-    return (
-      <GraphForm
-        isNew
-        data={{}}
-        onSubmit={this.handleSubmit.bind(this)}
-      />
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  graph: state.graph,
-})
-
-const mapDispatchToProps = dispatch => ({
-  // searchActions: bindActionCreators({ ...searchActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(GraphNew)
diff --git a/frontend/views/index/index.container.js b/frontend/views/index/index.container.js
deleted file mode 100644
index c6cb819..0000000
--- a/frontend/views/index/index.container.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { Component } from 'react'
-import { Route } from 'react-router-dom'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-
-import './index.css'
-
-import actions from '../../actions'
-import { Header } from '../../common'
-// import * as uploadActions from './upload.actions'
-
-import GraphIndex from './containers/graph.index'
-import GraphNew from './containers/graph.new'
-import GraphEdit from './containers/graph.edit'
-
-class Container extends Component {
-  componentDidMount() {
-    actions.site.setSiteTitle("swimmer")
-  }
-  render() {
-    return (
-      <div>
-        <Header />
-        <div className='body'>
-          <div className='index'>
-            <Route exact path='/index/new' component={GraphNew} />
-            <Route exact path='/index/:id/edit' component={GraphEdit} />
-            <Route exact path='/index' component={GraphIndex} />
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default Container
diff --git a/frontend/views/index/index.css b/frontend/views/index/index.css
deleted file mode 100644
index 028f6c2..0000000
--- a/frontend/views/index/index.css
+++ /dev/null
@@ -1,38 +0,0 @@
-* {
-
-}
-.index {
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-      -45deg,
-      rgba(0, 0, 64, 0.5),
-      rgba(128, 0, 64, 0.5)
-    );
-  padding: 1rem;
-}
-.index > div {
-  display: inline-block;
-  padding: 1rem;
-  max-height: calc(100% - 2rem);
-  overflow: scroll;
-  background: rgba(64,12,64,0.9);
-  box-shadow: 3px 3px 6px rgba(0,0,0,0.4),
-    inset 0 0 60px rgba(128,255,255,0.1);
-}
-.graphIndex {
-  min-width: 20rem;
-  display: flex;
-  flex-direction: column;
-}
-.graphIndex > * {
-  margin-bottom: 0.5rem;
-}
-.graphIndex > div {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between
-}
-.graphIndex > div > a:first-child {
-  color: #fff;
-}
\ No newline at end of file
diff --git a/frontend/views/page/components/page.editor.js b/frontend/views/page/components/page.editor.js
deleted file mode 100644
index bee86a0..0000000
--- a/frontend/views/page/components/page.editor.js
+++ /dev/null
@@ -1,215 +0,0 @@
-import React, { Component } from 'react'
-import { Route } from 'react-router-dom'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-
-import { session } from '../../../session'
-import actions from '../../../actions'
-import * as pageActions from '../page.actions'
-import * as tileActions from '../../tile/tile.actions'
-
-import { Loader } from '../../../common'
-import { clamp, dist } from '../../../util'
-
-import TileHandle from './tile.handle'
-
-const defaultState = {
-  dragging: false,
-  bounds: null,
-  mouseX: 0,
-  mouseY: 0,
-  box: {
-    x: 0, y: 0,
-    w: 0, h: 0,
-  },
-  tile: null,
-}
-
-class PageEditor extends Component {
-  state = {
-    ...defaultState,
-  }
-
-  constructor() {
-    super()
-    // bind these events in the constructor, so we can remove event listeners later
-    this.handleMouseDown = this.handleMouseDown.bind(this)
-    this.handleMouseMove = this.handleMouseMove.bind(this)
-    this.handleMouseUp = this.handleMouseUp.bind(this)
-    this.handleWindowResize = this.handleWindowResize.bind(this)
-    this.pageRef = React.createRef()
-  }
-
-  getBoundingClientRect() {
-    if (!this.pageRef.current) return null
-    const rect = this.pageRef.current.getBoundingClientRect()
-    const scrollTop = document.body.scrollTop || document.body.parentNode.scrollTop
-    const scrollLeft = document.body.scrollLeft || document.body.parentNode.scrollLeft
-    const bounds = {
-      top: rect.top + scrollTop,
-      left: rect.left + scrollLeft,
-      width: rect.width,
-      height: rect.height,
-    }
-    // console.log(bounds)
-    return bounds
-  }
-
-  componentDidMount() {
-    document.body.addEventListener('mousemove', this.handleMouseMove)
-    document.body.addEventListener('mouseup', this.handleMouseUp)
-    window.addEventListener('resize', this.handleWindowResize)
-    this.setState({ bounds: this.getBoundingClientRect() })
-  }
-
-  componentDidUpdate(prevProps) {
-    if (!this.state.bounds) {
-      this.setState({ bounds: this.getBoundingClientRect() })
-    }
-  }
-
-  handleWindowResize() {
-    this.setState({ bounds: this.getBoundingClientRect() })
-  }
-
-  handleMouseDown(e, tile) {
-    const bounds = this.getBoundingClientRect()
-    const mouseX = e.pageX
-    const mouseY = e.pageY
-    // let w = 128 / bounds.width
-    // let h = 16 / bounds.height
-    let { x, y } = tile.settings
-    // x = clamp(x, 0, 1)
-    // y = clamp(y, 0, 1)
-    this.setState({
-      tile,
-      draggingBox: true,
-      bounds,
-      mouseX,
-      mouseY,
-      box: {
-        dx: 0, dy: 0,
-        // x, y,
-        // w, h,
-      },
-      initialBox: {
-        // x, y,
-        // w, h,
-      }
-    })
-  }
-
-  handleMouseMove(e) {
-    const {
-      dragging, draggingBox,
-      bounds, mouseX, mouseY, initialBox, box
-    } = this.state
-    if (draggingBox) {
-      e.preventDefault()
-      let { x, y, w, h } = initialBox
-      let dx = (e.pageX - mouseX)
-      let dy = (e.pageY - mouseY)
-      this.setState({
-        box: {
-          dx, dy,
-          // x: clamp(x + (dx / bounds.width), 0, 1.0 - w),
-          // y: clamp(y + (dy / bounds.height), 0, 1.0 - h),
-          // w, h,
-        }
-      })
-    }
-  }
-
-  handleMouseUp(e) {
-    // const { actions } = this.props
-    const { temporaryTile } = this.props
-    const { dragging, draggingBox, bounds, box, tile } = this.state
-    if (!dragging && !draggingBox) return
-    e.preventDefault()
-    // const { x, y, w, h } = box
-    const { dx, dy } = box
-    let url = window.location.pathname
-    this.setState({
-      page: null,
-      box: null,
-      initialBox: null,
-      dragging: false,
-      draggingBox: false,
-    })
-    // console.log(page)
-    if (dist(0, 0, dx, dy) < 2) {
-      return
-    }
-    const updatedTile = {
-      ...tile,
-      settings: {
-        ...tile.settings,
-        x: tile.settings.x + dx,
-        y: tile.settings.y + dy,
-      }
-    }
-    if (temporaryTile && tile.id === temporaryTile.id) {
-      this.props.tileActions.updateTemporaryTile(updatedTile)
-    }
-    if (tile.id !== 'new') {
-      console.log(updatedTile)
-      this.props.pageActions.updatePageTile(updatedTile)
-      actions.tile.update(updatedTile)
-    }
-  }
-
-  render(){
-    if (!this.state.bounds || (!this.props.page.show.res && !this.props.page.show.res.tiles)) {
-      return (
-        <div className='page' ref={this.pageRef} />
-      )
-    }
-    const { temporaryTile } = this.props
-    const currentTile = this.state.tile
-    const currentBox = this.state.box
-    const { res } = this.props.page.show
-    const { settings } = res
-    const pageStyle = { backgroundColor: settings ? settings.background_color : '#000000' }
-    return (
-      <div className='page' ref={this.pageRef} style={pageStyle}>
-        {res.tiles.map(tile => {
-          if (temporaryTile && temporaryTile.id === tile.id) {
-            tile = temporaryTile
-          }
-          return (
-            <TileHandle
-              key={tile.id}
-              tile={tile}
-              bounds={this.state.bounds}
-              box={currentTile && tile.id === currentTile.id && currentBox}
-              onMouseDown={e => this.handleMouseDown(e, tile)}
-              onDoubleClick={e => this.props.pageActions.showEditTileForm(tile.id)}
-            />
-          )
-        })}
-        {!!(temporaryTile && temporaryTile.id === 'new') && (
-          <TileHandle
-            key={temporaryTile.id}
-            tile={temporaryTile}
-            bounds={this.state.bounds}
-            box={currentTile && temporaryTile.id === currentTile.id && currentBox}
-            onMouseDown={e => this.handleMouseDown(e, temporaryTile)}
-          />
-        )}
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  graph: state.graph,
-  page: state.page,
-  temporaryTile: state.tile.temporaryTile,
-})
-
-const mapDispatchToProps = dispatch => ({
-  pageActions: bindActionCreators({ ...pageActions }, dispatch),
-  tileActions: bindActionCreators({ ...tileActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(PageEditor)
diff --git a/frontend/views/page/components/page.header.js b/frontend/views/page/components/page.header.js
deleted file mode 100644
index eb1c3b9..0000000
--- a/frontend/views/page/components/page.header.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import { Link } from 'react-router-dom'
-
-import * as graphActions from '../../graph/graph.actions'
-import * as pageActions from '../page.actions'
-
-function PageHeader(props) {
-  return (
-    <header>
-      <div>
-        <Link to={props.graph.show.res ? "/" + props.graph.show.res.path : "/"} className="logo"><b>{props.site.siteTitle}</b></Link>
-      </div>
-      <div>
-        <button onClick={() => props.pageActions.toggleAddTileForm()}>+ Add tile</button>
-        <button onClick={() => props.pageActions.toggleTileList()}>Sort tiles</button>
-        <button onClick={() => props.graphActions.toggleEditPageForm()}>Edit page</button>
-      </div>
-    </header>
-  )
-}
-
-const mapStateToProps = (state) => ({
-  // auth: state.auth,
-  site: state.site,
-  graph: state.graph,
-  // isAuthenticated: state.auth.isAuthenticated,
-})
-
-const mapDispatchToProps = (dispatch) => ({
-  graphActions: bindActionCreators({ ...graphActions }, dispatch),
-  pageActions: bindActionCreators({ ...pageActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(PageHeader) 
diff --git a/frontend/views/page/components/tile.edit.js b/frontend/views/page/components/tile.edit.js
deleted file mode 100644
index bfcc34f..0000000
--- a/frontend/views/page/components/tile.edit.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-
-// import { history } from '../../../store'
-import actions from '../../../actions'
-import * as pageActions from '../../page/page.actions'
-import * as tileActions from '../../tile/tile.actions'
-
-import { Loader } from '../../../common'
-
-import TileForm from '../components/tile.form'
-
-class TileEdit extends Component {
-  state = {
-    tile: null
-  }
-
-  componentDidMount() {
-    this.load()
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.page.editor.currentEditTileId !== this.props.page.editor.currentEditTileId) {
-      this.load()
-    }
-  }
-
-  load() {
-    const { currentEditTileId } = this.props.page.editor
-    const tile = this.props.page.show.res.tiles.filter(tile => tile.id === currentEditTileId)[0]
-    console.log('edit', currentEditTileId)
-    this.setState({ tile })
-  }
-
-  handleSubmit(data) {
-    actions.tile.update(data)
-      .then(response => {
-        // console.log(response)
-        if (response.status === 'ok') {
-          this.props.pageActions.updatePageTile(response.res)
-        }
-      })
-  }
-
-  handleClose() {
-    this.props.pageActions.hideEditTileForm()
-    this.props.tileActions.clearTemporaryTile()
-  }
-
-  render() {
-    const { tile } = this.state
-    if (!tile) {
-      return (
-        <div className='form'>
-          <Loader />
-        </div>
-      )
-    }
-    return (
-      <TileForm
-        initialData={tile}
-        graph={this.props.graph.show.res}
-        page={this.props.page.show.res}
-        onSubmit={this.handleSubmit.bind(this)}
-        onClose={this.handleClose.bind(this)}
-      />
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  graph: state.graph,
-  page: state.page,
-  tile: state.tile,
-})
-
-const mapDispatchToProps = dispatch => ({
-  pageActions: bindActionCreators({ ...pageActions }, dispatch),
-  tileActions: bindActionCreators({ ...tileActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(TileEdit)
diff --git a/frontend/views/page/components/tile.form.js b/frontend/views/page/components/tile.form.js
deleted file mode 100644
index 6011b0a..0000000
--- a/frontend/views/page/components/tile.form.js
+++ /dev/null
@@ -1,645 +0,0 @@
-import React, { Component } from 'react'
-import { connect } from 'react-redux'
-import { bindActionCreators } from 'redux'
-import { Link } from 'react-router-dom'
-
-import actions from '../../../actions'
-import { session } from '../../../session'
-
-import {
-  TextInput, NumberInput, ColorInput, Slider,
-  Select, LabelDescription, TextArea, Checkbox,
-  SubmitButton, Loader } from '../../../common'
-import { preloadImage } from '../../../util'
-
-import * as tileActions from '../../tile/tile.actions'
-
-const SELECT_TYPES = [
-  "image", "text", "link"
-].map(s => ({ name: s, label: s }))
-
-const ALIGNMENTS = [
-  "top_left", "top_center", "top_right",
-  "center_left", "center_center", "center_right",
-  "bottom_left", "bottom_center", "bottom_right",
-].map(align => ({
-  name: align,
-  label: align === 'center_center'
-    ? 'center'
-    : align.replace('_', ' ')
-  }))
-
-const REQUIRED_KEYS = {
-  image: ['url'],
-  text: ['content'],
-  link: [],
-}
-
-const IMAGE_TILE_STYLES = [
-  'tile', 'cover', 'contain', 'contain no-repeat'
-].map(style => ({ name: style, label: style }))
-
-const TEXT_FONT_FAMILIES = [
-  'sans-serif', 'serif', 'fantasy', 'monospace', 'cursive',
-].map(style => ({ name: style, label: style }))
-
-const TEXT_FONT_STYLES = [
-  'normal', 'bold', 'italic', 'bold-italic',
-].map(style => ({ name: style, label: style }))
-
-const CURSORS = [
-  { name: 'hand_up', label: 'Up', },
-  { name: 'hand_down', label: 'Down', },
-  { name: 'hand_left', label: 'Left', },
-  { name: 'hand_right', label: 'Right', },
-]
-
-const NO_LINK = 0
-const EXTERNAL_LINK = -1
-const PAGE_LIST_TOP_OPTIONS = [
-  { name: NO_LINK, label: 'No link' },
-  { name: EXTERNAL_LINK, label: 'External link' },
-  { name: -2, label: '──────────', disabled: true },
-]
-
-// target_page_id = Column(Integer, ForeignKey('page.id'), nullable=True)
-// https://s3.amazonaws.com/i.asdf.us/im/1c/gradient_gold1-SpringGreen1_1321159749.jpg
-
-const newImage = (data) => ({
-  settings: {
-    ...newPosition(),
-    is_tiled: false,
-    tile_style: 'tile',
-    url: "",
-    external_link_url: "",
-    cursor: 'hand_up',
-  },
-  type: 'image',
-  target_page_id: null,
-  ...data,
-})
-
-const newText = (data) => ({
-  settings: {
-    ...newPosition(),
-    content: "",
-    font_family: 'sans-serif',
-    font_size: 16,
-    font_style: 'normal',
-    font_color: '#dddddd',
-    background_color: 'transparent',
-    width: 0,
-    height: 0,
-    external_link_url: "",
-    cursor: 'hand_up',
-  },
-  type: 'text',
-  target_page_id: null,
-  ...data,
-})
-
-const newLink = (data) => ({
-  settings: {
-    ...newPosition({ width: 100, height: 100, }),
-    external_link_url: "",
-    cursor: 'hand_up',
-  },
-  type: 'link',
-  target_page_id: null,
-  ...data,
-})
-
-const newPosition = (data) => ({
-  x: 0, y: 0,
-  width: 0, height: 0,
-  rotation: 0, scale: 1,
-  opacity: 1,
-  align: "center_center",
-  ...data,
-})
-
-const TYPE_CONSTRUCTORS = {
-  image: newImage,
-  text: newText,
-  link: newLink,
-}
-
-class TileForm extends Component {
-  state = {
-    title: "",
-    submitTitle: "",
-    errorFields: new Set([]),
-    modified: false,
-    pageList: [],
-  }
-
-  componentDidMount() {
-    const { graph, page, isNew, initialData, sortOrder } = this.props
-    const title = isNew ? 'new tile' : 'editing tile'
-    const submitTitle = isNew ? "Create Tile" : "Save Changes"
-    this.setState({
-      title,
-      submitTitle,
-      errorFields: new Set([]),
-    })
-    const { pages } = graph.show.res
-    const linkPages = initialData ? pages.filter(page => page.id !== initialData.id) : pages
-    let pageList = [
-      ...PAGE_LIST_TOP_OPTIONS,
-      ...linkPages.map(page => ({ name: page.id, label: page.path }))
-    ]
-    this.setState({ pageList })
-    if (isNew) {
-      const newTile = newImage({
-        id: "new",
-        graph_id: graph.show.res.id,
-        page_id: page.show.res.id,
-        sort_order: sortOrder,
-      })
-      this.props.tileActions.updateTemporaryTile(newTile)
-    } else {
-      this.props.tileActions.updateTemporaryTile({ ...initialData })
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    if (!this.props.isNew && this.props.initialData !== prevProps.initialData) {
-      this.handleSubmit()
-      this.props.tileActions.updateTemporaryTile({ ...this.props.initialData })
-      this.setState({
-        errorFields: new Set([]),
-      })
-    }
-  }
-
-  componentWillUnmount() {
-    // if the item has changed, save before we close the form!
-    if (!this.props.isNew && this.state.modified) {
-      this.handleSubmit()
-    }
-  }
-
-  handleChange(e) {
-    const { name, value } = e.target
-    this.clearErrorField(name)
-    this.props.tileActions.updateTemporaryTile({
-      ...this.props.temporaryTile,
-      [name]: value,
-    })
-  }
-
-  handleTypeChange(type) {
-    const { graph, page, temporaryTile } = this.props
-    let newTile = TYPE_CONSTRUCTORS[type]({
-      id: temporaryTile.id,
-      graph_id: temporaryTile.graph_id,
-      page_id: temporaryTile.page_id,
-    })
-    newTile.settings.align = temporaryTile.settings.align
-    this.clearErrorField('type')
-    this.props.tileActions.updateTemporaryTile(newTile)
-  }
-
-  handleSettingsChange(e) {
-    const { name, value } = e.target
-    this.clearErrorField(name)
-    this.props.tileActions.updateTemporaryTile({
-      ...this.props.temporaryTile,
-      settings: {
-        ...this.props.temporaryTile.settings,
-        [name]: value,
-      }
-    })
-  }
-
-  handleSelect(name, value) {
-    this.clearErrorField(name)
-    if (name === 'type') {
-      return this.handleTypeChange(value)
-    }
-    if (name === 'target_page_id') {
-      value = parseInt(value)
-    }
-    this.props.tileActions.updateTemporaryTile({
-      ...this.props.temporaryTile,
-      [name]: value,
-    })
-  }
-
-  handleSettingsSelect(name, value) {
-    this.clearErrorField(name)
-    this.props.tileActions.updateTemporaryTile({
-      ...this.props.temporaryTile,
-      settings: {
-        ...this.props.temporaryTile.settings,
-        [name]: value,
-      }
-    })
-  }
-
-  handleAlignment(name, value) {
-    this.clearErrorField(name)
-    this.props.tileActions.updateTemporaryTile({
-      ...this.props.temporaryTile,
-      settings: {
-        ...this.props.temporaryTile.settings,
-        [name]: value,
-        x: 0, y: 0,
-      }
-    })
-  }
-
-  handleImageChange(e) {
-    const { name, value } = e.target
-    this.handleSettingsSelect(name, value)
-    preloadImage(value).then(img => {
-      // console.log(img)
-      this.props.tileActions.updateTemporaryTile({
-        ...this.props.temporaryTile,
-        settings: {
-          ...this.props.temporaryTile.settings,
-          [name]: value,
-          width: img.naturalWidth,
-          height: img.naturalHeight,
-          x: 0, y: 0,
-        }
-      })
-    })
-  }
-
-  clearErrorField(name) {
-    const { errorFields } = this.state
-    if (errorFields.has(name)) {
-      errorFields.delete(name)
-      this.setState({
-        errorFields,
-        modified: true,
-      })
-    } else if (!this.state.modified) {
-      this.setState({
-        errorFields,
-        modified: true,
-      })
-    }
-  }
-
-  handleSubmit(e) {
-    if (e) e.preventDefault()
-    const { isNew, temporaryTile, onSubmit, onClose } = this.props
-    const requiredSettings = REQUIRED_KEYS[temporaryTile.type]
-    const validKeys = "id graph_id page_id target_page_id type settings".split(" ")
-    const validData = validKeys.reduce((a,b) => { a[b] = temporaryTile[b]; return a }, {})
-    const errorFields = requiredSettings.filter(key => !validData.settings[key])
-    if (errorFields.length) {
-      console.log('error', errorFields, validData)
-      if (e) {
-        this.setState({ errorFields: new Set(errorFields) })
-      }
-    } else {
-      if (isNew) {
-        // side effect: set username if we're creating a new tile
-        // session.set('username', data.username)
-        delete validData.id
-      } else {
-        validData.id = temporaryTile.id
-      }
-      this.setState({ modified: false })
-      console.log('submit', validData)
-      onSubmit(validData)
-      // if submitting after switching elements, don't close the form
-      if (e && onClose) {
-        onClose()
-      }
-    }
-  }
-
-  handleDelete() {
-    const { temporaryTile, isNew, onClose } = this.props
-    if (confirm('Really delete this tile?')) {
-      actions.tile.destroy(temporaryTile)
-      .then(() => {
-        onClose()
-      })
-    }
-  }
-
-  render() {
-    const { temporaryTile, isNew } = this.props
-    const { title, submitTitle, errorFields } = this.state
-    if (!temporaryTile || !temporaryTile.settings) return <div className='box' />
-    return (
-      <div className='box'>
-        <h1>{title}</h1>
-        <form onSubmit={this.handleSubmit.bind(this)}>
-          <div className="row selects">
-            <Select
-              name='type'
-              selected={temporaryTile.type}
-              options={SELECT_TYPES}
-              title=''
-              onChange={this.handleSelect.bind(this)}
-            />
-            <Select
-              name='align'
-              selected={temporaryTile.settings.align}
-              options={ALIGNMENTS}
-              title=''
-              onChange={this.handleAlignment.bind(this)}
-            />
-          </div>
-
-          {this.renderPositionInfo()}
-
-          {temporaryTile.type === 'image'
-            ? this.renderImageForm()
-          : temporaryTile.type === 'text'
-            ? this.renderTextForm()
-          : temporaryTile.type === 'link'
-            ? this.renderLinkForm()
-          : ""}
-
-          {this.renderHyperlinkForm()}
-          {this.renderMiscForm()}
-
-          <div className='row buttons'>
-            <SubmitButton
-              title={submitTitle}
-              onClick={this.handleSubmit.bind(this)}
-            />
-            {!isNew && 
-              <SubmitButton
-                title={'Delete'}
-                className='destroy'
-                onClick={this.handleDelete.bind(this)}
-              />
-            }
-          </div>
-          {!!errorFields.size &&
-            <label>
-              <span></span>
-              <span>Please add the required fields =)</span>
-            </label>
-          }
-        </form>
-      </div>
-    )
-  }
-
-  renderPositionInfo() {
-    const { temporaryTile } = this.props
-    const { x, y, width, height, rotation, scale } = temporaryTile.settings
-    return (
-      <div className='position'>
-        {parseInt(x)}{', '}
-        {parseInt(y)}{' '}
-        {parseInt(width)}{'x'}{parseInt(height)}{' '}
-        {rotation === 0 || <span>{parseInt(rotation)}{'\u00B0 '}</span>}
-        {scale === 1 || <span>{'x'}{scale.toFixed(2)}</span>}
-      </div>
-    )
-  }
-
-  renderImageForm() {
-    // const { isNew } = this.props
-    const { temporaryTile } = this.props
-    const { errorFields } = this.state
-    // console.log(temporaryTile.settings)
-    return (
-      <div>
-        <div className='row imageUrl'>
-          {temporaryTile.settings.url && <div className='thumb'><img src={temporaryTile.settings.url} /></div>}
-          <TextInput
-            title=""
-            placeholder='http://'
-            name="url"
-            required
-            data={temporaryTile.settings}
-            error={errorFields.has('url')}
-            onChange={this.handleImageChange.bind(this)}
-            autoComplete="off"
-          />
-        </div>
-        <div className='row pair'>
-          <Checkbox
-            label="Tiled"
-            name="is_tiled"
-            checked={temporaryTile.settings.is_tiled}
-            onChange={this.handleSettingsSelect.bind(this)}
-            autoComplete="off"
-          />
-          {temporaryTile.settings.is_tiled &&
-            <Select
-              name='tile_style'
-              selected={temporaryTile.settings.tile_style || 'tile'}
-              options={IMAGE_TILE_STYLES}
-              title=''
-              onChange={this.handleSettingsSelect.bind(this)}
-            />
-          }
-        </div>
-      </div>
-    )
-  }
-
-  renderTextForm() {
-    const { temporaryTile } = this.props
-    const { errorFields } = this.state
-    return (
-      <div>
-        <TextArea
-          title=""
-          name="content"
-          required
-          data={temporaryTile.settings}
-          error={errorFields.has('content')}
-          onChange={this.handleSettingsChange.bind(this)}
-          autoComplete="off"
-        />
-        <div className='row font'>
-          <Select
-            title="Font"
-            name='font_family'
-            selected={temporaryTile.settings.font_family || 'sans-serif'}
-            options={TEXT_FONT_FAMILIES}
-            title=''
-            onChange={this.handleSettingsSelect.bind(this)}
-          />
-          <NumberInput
-            title=''
-            name='font_size'
-            data={temporaryTile.settings}
-            min={1}
-            max={1200}
-            error={errorFields.has('font_size')}
-            onChange={this.handleSettingsChange.bind(this)}
-            autoComplete="off"
-          />
-          <Select
-            name='font_style'
-            selected={temporaryTile.settings.font_style || 'normal'}
-            options={TEXT_FONT_STYLES}
-            title=''
-            onChange={this.handleSettingsSelect.bind(this)}
-          />
-        </div>
-        <ColorInput
-          title='Text'
-          name='font_color'
-          data={temporaryTile.settings}
-          error={errorFields.has('font_color')}
-          onChange={this.handleSettingsChange.bind(this)}
-          autoComplete="off"
-        />
-        <ColorInput
-          title='BG'
-          name='background_color'
-          data={temporaryTile.settings}
-          error={errorFields.has('background_color')}
-          onChange={this.handleSettingsChange.bind(this)}
-          autoComplete="off"
-        />
-        <div className='row pair'>
-          <NumberInput
-            title="Width"
-            name="width"
-            data={temporaryTile.settings}
-            min={0}
-            max={1200}
-            error={errorFields.has('width')}
-            onChange={this.handleSettingsChange.bind(this)}
-            autoComplete="off"
-          />
-          <NumberInput
-            title="Height"
-            name="height"
-            data={temporaryTile.settings}
-            min={0}
-            max={1200}
-            error={errorFields.has('height')}
-            onChange={this.handleSettingsChange.bind(this)}
-            autoComplete="off"
-          />
-        </div>
-      </div>
-    )
-  }
-
-  renderLinkForm() {
-    const { temporaryTile } = this.props
-    const { errorFields } = this.state
-    return (
-      <div>
-        <div className='row pair'>
-          <NumberInput
-            title="Width"
-            name="width"
-            data={temporaryTile.settings}
-            min={0}
-            max={1200}
-            error={errorFields.has('width')}
-            onChange={this.handleSettingsChange.bind(this)}
-            autoComplete="off"
-          />
-          <NumberInput
-            title="Height"
-            name="height"
-            data={temporaryTile.settings}
-            min={0}
-            max={1200}
-            error={errorFields.has('height')}
-            onChange={this.handleSettingsChange.bind(this)}
-            autoComplete="off"
-          />
-        </div>
-      </div>
-    )
-  }
-
-  renderHyperlinkForm() {
-    const { temporaryTile } = this.props
-    const { pageList } = this.state
-    const isExternalLink = temporaryTile.target_page_id === EXTERNAL_LINK
-    return (
-      <div>
-        <div className={'row selects'}>
-          <Select
-            title=''
-            name='target_page_id'
-            selected={temporaryTile.target_page_id || NO_LINK}
-            options={pageList}
-            onChange={this.handleSelect.bind(this)}
-          />
-          <Select
-            title=''
-            name='cursor'
-            selected={temporaryTile.settings.cursor}
-            options={CURSORS}
-            defaultOption="Cursor"
-            onChange={this.handleSettingsSelect.bind(this)}
-          />
-        </div>
-        <div>
-          {isExternalLink &&
-            <TextInput
-              title=""
-              placeholder='http://'
-              name="external_link_url"
-              data={temporaryTile.settings}
-              onChange={this.handleSettingsChange.bind(this)}
-              autoComplete="off"
-            />
-          }
-        </div>
-      </div>
-    )
-  }
-
-  renderMiscForm() {
-    const { temporaryTile } = this.props
-    return (
-      <div>
-        <Slider
-          title='Opacity'
-          name='opacity'
-          value={temporaryTile.settings.opacity}
-          onChange={this.handleSettingsSelect.bind(this)}
-          min={0.0}
-          max={1.0}
-          step={0.01}
-        />
-        <Slider
-          title='Scale'
-          name='scale'
-          value={temporaryTile.settings.scale}
-          onChange={this.handleSettingsSelect.bind(this)}
-          min={0.01}
-          max={10.0}
-          step={0.01}
-        />
-        <Slider
-          title='Rotation'
-          name='rotation'
-          value={temporaryTile.settings.rotation}
-          onChange={this.handleSettingsSelect.bind(this)}
-          min={-180.0}
-          max={180.0}
-          step={1}
-          type='int'
-        />
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  graph: state.graph,
-  page: state.page,
-  tile: state.tile,
-  temporaryTile: state.tile.temporaryTile,
-})
-
-const mapDispatchToProps = dispatch => ({
-  tileActions: bindActionCreators({ ...tileActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(TileForm)
diff --git a/frontend/views/page/components/tile.handle.js b/frontend/views/page/components/tile.handle.js
deleted file mode 100644
index e91f0b1..0000000
--- a/frontend/views/page/components/tile.handle.js
+++ /dev/null
@@ -1,139 +0,0 @@
-import React, { Component } from 'react'
-import { Link } from 'react-router-dom'
-
-const TileHandle = ({ tile, bounds, box, viewing, onMouseDown, onDoubleClick }) => {
-  // console.log(tile)
-  const { width, height } = tile.settings
-  const style = {
-    transform: generateTransform(tile, box),
-    opacity: tile.settings.opacity,
-  }
-  // console.log(generateTransform(tile))
-  let content;
-  let className = ['tile', tile.type].join(' ')
-  if (tile.target_page_id || (viewing && tile.href)) {
-    className += ' ' + (tile.settings.cursor || 'hand_up')
-  }
-  // console.log(tile.settings)
-  switch (tile.type) {
-    case 'image':
-      if (!tile.settings.url) {
-        return null
-      }
-      if (tile.settings.is_tiled) {
-        style.backgroundImage = 'url(' + tile.settings.url + ')'
-        style.backgroundPosition = tile.settings.align.replace('_', ' ')
-        switch (tile.settings.tile_style) {
-          default:
-          case 'tile':
-            break
-          case 'cover':
-            style.backgroundSize = 'cover'
-            break
-          case 'contain':
-            style.backgroundSize = 'contain'
-            break
-          case 'contain no-repeat':
-            style.backgroundSize = 'contain'
-            style.backgroundRepeat = 'no-repeat'
-            break
-        }
-        className += ' is_tiled'
-      } else {
-        className += ' ' + tile.settings.align
-        content = <img src={tile.settings.url} />
-      }
-      break
-    case 'text':
-      if (!tile.settings.content) {
-        return null
-      }
-      content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
-      className += ' ' + tile.settings.align
-      style.width = tile.settings.width ? tile.settings.width + 'px' : 'auto'
-      style.height = tile.settings.height ? tile.settings.height + 'px' : 'auto'
-      style.fontFamily = tile.settings.font_family
-      style.fontSize = tile.settings.font_size + 'px'
-      style.lineHeight = 1.5
-      style.fontWeight = (tile.settings.font_style || "").indexOf('bold') !== -1 ? 'bold' : 'normal'
-      style.fontStyle = (tile.settings.font_style || "").indexOf('italic') !== -1 ? 'italic' : 'normal'
-      style.backgroundColor = tile.settings.background_color || 'transparent'
-      style.color = tile.settings.font_color || '#dddddd!important'
-      break
-    case 'link':
-      content = ""
-      className += ' ' + tile.settings.align
-      style.width = tile.settings.width ? tile.settings.width + 'px' : 'auto'
-      style.height = tile.settings.height ? tile.settings.height + 'px' : 'auto'
-      break
-  }
-  if (viewing && tile.href) {
-    if (tile.href.indexOf('http') === 0) {
-      return (
-        <a href={tile.href} rel='noopener'>
-          <div
-            className={className}
-            style={style}
-          >
-            {content}
-          </div>
-        </a>
-      )
-    } else {
-      return (
-        <Link to={tile.href}>
-          <div
-            className={className}
-            onMouseDown={onMouseDown}
-            style={style}
-          >
-            {content}
-          </div>
-        </Link>
-      )
-    }
-  } else {
-    return (
-      <div
-        className={className}
-        onMouseDown={onMouseDown}
-        onDoubleClick={onDoubleClick}
-        style={style}
-      >
-        {content}
-      </div>
-    )
-  }
-}
-
-const generateTransform = (tile, box) => {
-  let { x, y, align, rotation, scale, is_tiled } = tile.settings
-  if (is_tiled) {
-    return 'translateZ(0)'
-  }
-  if (box) {
-    x += box.dx
-    y += box.dy
-  }
-  const [yalign, xalign] = align.split('_')
-  let transform = ['translateZ(0)']
-  if (yalign === 'center') {
-    transform.push('translateY(-50%)')
-  }
-  if (xalign === 'center') {
-    transform.push('translateX(-50%)')
-  }
-  // if (x % 2 == 1) x += 0.5
-  // if (y % 2 == 1) y += 0.5
-  transform.push('translateX(' + x + 'px)')
-  transform.push('translateY(' + y + 'px)')
-  if (scale !== 1) {
-    transform.push('scale(' + scale + ')')
-  }
-  if (rotation !== 0) {
-    transform.push('rotateZ(' + rotation + 'deg)')
-  }
-  return transform.join(' ')
-}
-
-export default TileHandle
diff --git a/frontend/views/page/components/tile.list.js b/frontend/views/page/components/tile.list.js
deleted file mode 100644
index 7e4f650..0000000
--- a/frontend/views/page/components/tile.list.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import { ReactSortable } from "react-sortablejs"
-
-// import actions from '../../../actions'
-import * as tileActions from '../../tile/tile.actions'
-import * as pageActions from '../../page/page.actions'
-
-const DOUBLE_CLICK_THRESHOLD = 250
-
-class TileList extends Component {
-  state = {
-    tiles: [],
-    lastTargetId: 0,
-    lastTimeStamp: 0,
-  }
-  
-  // store doubleclick state as a class property because ReactSortable calls setState promiscuously
-  didDoubleClick = false
-
-  componentDidMount(prevProps) {
-    const { tiles } = this.props.page.show.res
-    const { pages } = this.props.graph.show.res
-    const pageTitles = pages.reduce((a,b) => {
-      a[b.id] = b.title
-      return a
-    }, {})
-    this.setState({ tiles: tiles.slice(0).reverse(), pageTitles })
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    if (this.didDoubleClick) return
-    const { tiles } = this.state
-    if (prevState.tiles.length && !pageActions.isSameTileOrder(tiles, prevState.tiles)) {
-      this.props.pageActions.setTileSortOrder(tiles.slice(0).reverse())
-    }
-    // since we store the full tiles here (reversed!), they might change from under us
-    // potentially later refactor to only use a sort order / lookup
-    else if (prevProps.page.show.res.tiles !== this.props.page.show.res.tiles) {
-      const tileLookup = this.props.page.show.res.tiles.reduce((a,b) => {
-        a[b.id] = b
-        return a
-      }, {})
-      const newTiles = this.state.tiles.map(tile => {
-        return tileLookup[tile.id]
-      })
-      this.setState({ tiles: newTiles })
-    }
-  }
-
-  handleChoose(e) {
-    const { lastTargetId, lastTimeStamp } = this.state
-    if (lastTimeStamp
-      && parseInt(e.item.dataset.id) === lastTargetId
-      && (e.timeStamp - lastTimeStamp) < DOUBLE_CLICK_THRESHOLD
-      ) {
-      // console.log('selected', lastTargetId)
-      this.didDoubleClick = true
-      this.props.pageActions.showEditTileForm(lastTargetId)
-    } else {
-      this.setState({
-        lastTargetId: parseInt(e.item.dataset.id),
-        lastTimeStamp: e.timeStamp,
-      })
-    }
-  }
-
-  handleUpdate(newTiles) {
-    if (this.didDoubleClick) return
-    this.setState({ tiles: newTiles })
-  }
-
-  render() {
-    const { tiles, pageTitles } = this.state
-    return (
-      <div className='box tileList'>
-        <ReactSortable
-          list={tiles}
-          setList={newTiles => this.handleUpdate(newTiles)}
-          onChoose={e => this.handleChoose(e)}
-        >
-          {tiles.map(tile => (
-            tile.type === 'image'
-            ? <TileListImage key={tile.id} tile={tile} />
-            : tile.type === 'text'
-            ? <TileListText key={tile.id} tile={tile} />
-            : tile.type === 'link'
-            ? <TileListLink key={tile.id} tile={tile} pageTitles={pageTitles} />
-            : <TileListMisc key={tile.id} tile={tile} />
-          ))}
-        </ReactSortable>
-      </div>
-    )
-  }
-}
-
-const TileListImage = ({ tile }) => (
-  <div className='row' data-id={tile.id}>
-    <div className='thumb' style={{ backgroundImage: 'url(' + tile.settings.url + ')' }} />
-  </div>
-)
-
-const TileListText = ({ tile }) => (
-  <div className='row' data-id={tile.id}>
-    <span className='snippet'>{(tile.settings.content || "").substr(0, 100)}</span>
-  </div>
-)
-
-const TileListLink = ({ tile, pageTitles }) => (
-  <div className='row link' data-id={tile.id}>
-    <span className='snippet'>
-      {'Link: '}
-      {tile.target_page_id === -1
-        ? 'External'
-        : !tile.target_page_id
-        ? 'No link specified!'
-        : tile.target_page_id in pageTitles
-        ? pageTitles[tile.target_page_id]
-        : 'Error, broken link!'}
-    </span>
-  </div>
-)
-
-const TileListMisc = ({ tile }) => (
-  <div className='row' data-id={tile.id}>
-    <span className='snippet'>{"Tile: "}{tile.type}</span>
-  </div>
-)
-
-const mapStateToProps = state => ({
-  graph: state.graph,
-  page: state.page,
-})
-
-const mapDispatchToProps = dispatch => ({
-  tileActions: bindActionCreators({ ...tileActions }, dispatch),
-  pageActions: bindActionCreators({ ...pageActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(TileList)
diff --git a/frontend/views/page/components/tile.new.js b/frontend/views/page/components/tile.new.js
deleted file mode 100644
index c5ebeab..0000000
--- a/frontend/views/page/components/tile.new.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-
-import { history } from '../../../store'
-import actions from '../../../actions'
-import * as tileActions from '../../tile/tile.actions'
-import * as pageActions from '../../page/page.actions'
-
-import TileForm from '../components/tile.form'
-
-class TileNew extends Component {
-  handleSubmit(data) {
-    console.log(data)
-    actions.tile.create(data)
-      .then(res => {
-        console.log(res)
-        // const graph = this.props.graph.show.res
-        // if (res.res && res.res.id) {
-        //   history.push('/' + graph.path + '/' + res.res.path)
-        // }
-        this.props.pageActions.hideAddTileForm()
-        this.props.tileActions.clearTemporaryTile()
-      })
-      .catch(err => {
-        console.error('error')
-      })
-  }
-
-  render() {
-    return (
-      <TileForm
-        isNew
-        graph={this.props.graph.show.res}
-        page={this.props.page.show.res}
-        initialData={null}
-        sortOrder={this.props.page.show.res.tiles.length}
-        onSubmit={this.handleSubmit.bind(this)}
-      />
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  graph: state.graph,
-  page: state.page,
-})
-
-const mapDispatchToProps = dispatch => ({
-  tileActions: bindActionCreators({ ...tileActions }, dispatch),
-  pageActions: bindActionCreators({ ...pageActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(TileNew)
diff --git a/frontend/views/page/cursors.css b/frontend/views/page/cursors.css
deleted file mode 100644
index 56fb088..0000000
--- a/frontend/views/page/cursors.css
+++ /dev/null
@@ -1,21 +0,0 @@
-/* cursors */
-/* keep in separate file so they don't conflict. a copy of this lives in site.css */
-
-.tile.hand_up {
-  cursor: url(/static/img/hand_up.png) 40 10, pointer;
-}
-.tile.hand_right {
-  cursor: url(/static/img/hand_right.png) 90 40, pointer;
-}
-.tile.hand_down {
-  cursor: url(/static/img/hand_down.png) 60 90, pointer;
-}
-.tile.hand_left {
-  cursor: url(/static/img/hand_left.png) 10 60, pointer;
-}
-
-.tile.link {
-  cursor: pointer;
-  border: 1px solid #31f;
-  background-color: rgba(48,16,255,0.1);
-}
\ No newline at end of file
diff --git a/frontend/views/page/page.actions.js b/frontend/views/page/page.actions.js
deleted file mode 100644
index 42bd232..0000000
--- a/frontend/views/page/page.actions.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import * as types from '../../types'
-import { store } from '../../store'
-import actions from '../../actions'
-import { default as debounce } from 'lodash.debounce'
-import { post } from '../../util'
-
-const url = {
-  sortTiles: (id) => '/api/v1/page/' + id + '/sort',
-}
-
-// Add tile form
-
-export const showAddTileForm = () => dispatch => {
-  dispatch({ type: types.page.show_add_tile_form })
-}
-
-export const hideAddTileForm = () => dispatch => {
-  dispatch({ type: types.page.hide_add_tile_form })
-}
-
-export const toggleAddTileForm = () => dispatch => {
-  dispatch({ type: types.page.toggle_add_tile_form })
-}
-
-// Edit tile form
-
-export const showEditTileForm = tile_id => dispatch => {
-  dispatch({ type: types.page.show_edit_tile_form, tile_id })
-}
-
-export const hideEditTileForm = () => dispatch => {
-  dispatch({ type: types.page.hide_edit_tile_form })
-}
-
-export const toggleEditTileForm = () => dispatch => {
-  dispatch({ type: types.page.toggle_edit_tile_form })
-}
-
-// Tile list
-
-export const showTileList = () => dispatch => {
-  dispatch({ type: types.page.show_tile_list })
-}
-
-export const hideTileList = () => dispatch => {
-  dispatch({ type: types.page.hide_tile_list })
-}
-
-export const toggleTileList = () => dispatch => {
-  dispatch({ type: types.page.toggle_tile_list })
-}
-
-// Update local page tile state when we change it
-
-export const updatePageTile = tile => dispatch => {
-  dispatch({ type: types.page.update_page_tile, tile })
-}
-
-// Fetch graph/page when loading a new URL
-
-export const showGraphAndPageIfUnloaded = ({ graph_name, page_name }) => dispatch => (
-  new Promise((resolve, reject) => {
-    showGraphIfUnloaded({ graph_name })(dispatch)
-    .then(graph => (
-      actions.page.show('name/'  + graph_name + '/' + page_name)
-      .then(resolve)
-      .catch(reject)
-    ))
-    .catch(reject)
-  })
-)
-
-export const showGraphIfUnloaded = ({ graph_name }) => dispatch => (
-  new Promise((resolve, reject) => {
-    const { res: graph } = store.getState().graph.show
-    if (graph && graph.path === graph_name) {
-      return resolve(graph)
-    }
-    actions.graph.show('name/'  + graph_name)
-    .then(resolve)
-    .catch(reject)
-  })
-)
-
-// Sorting tiles in the tile list
-
-export const setTileSortOrder = (tiles) => dispatch => {
-  let oldTiles = store.getState().page.show.res.tiles
-  if (!isSameTileOrder(tiles, oldTiles)) {
-    updateTileSortOrder(tiles, dispatch)
-  }
-  dispatch({ type: types.page.set_tile_sort_order, tiles })
-}
-
-export const isSameTileOrder = (newTiles, oldTiles) => {
-  for (let i = 0; i < newTiles.length; i++) {
-    if (newTiles[i].id !== oldTiles[i].id) {
-      return false
-    }
-  }
-  return true
-}
-
-export const updateTileSortOrder = debounce((tiles, dispatch) => {
-  const { page_id } = tiles[0]
-  const order = tiles.map(tile => (tile.id))
-  console.log(page_id, order)
-  post(dispatch, types.page, 'sort', url.sortTiles(page_id), order)
-}, 1000)
-
diff --git a/frontend/views/page/page.container.js b/frontend/views/page/page.container.js
deleted file mode 100644
index 26bed30..0000000
--- a/frontend/views/page/page.container.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import React, { Component } from 'react'
-import { Route } from 'react-router-dom'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-
-import './page.css'
-import './cursors.css'
-
-import actions from '../../actions'
-import { Loader } from '../../common'
-
-import * as graphActions from '../graph/graph.actions'
-import * as pageActions from './page.actions'
-
-import PageEdit from '../graph/components/page.edit'
-import TileNew from './components/tile.new'
-import TileEdit from './components/tile.edit'
-import TileList from './components/tile.list'
-
-import PageHeader from './components/page.header'
-import PageEditor from './components/page.editor'
-
-class PageContainer extends Component {
-  componentDidMount() {
-    if (this.shouldShowPage()) this.load()
-  }
-  componentDidUpdate(prevProps) {
-    if (this.shouldLoadPage(prevProps)) this.load()
-  }
-  shouldShowPage() {
-    const { graph_name, page_name } = this.props.match.params
-    // console.log(graph_name, page_name)
-    return (graph_name && page_name && graph_name !== 'index')
-  }
-  shouldLoadPage(prevProps) {
-    const { page, location } = this.props
-    const { key } = location
-    if (key === prevProps.location.key) return false
-    if (!this.shouldShowPage()) return false
-    return (page.show.name === prevProps.page.show.name)
-  }
-  load() {
-    actions.site.setSiteTitle("loading " + this.props.match.params.page_name + "...")
-    this.props.pageActions.showGraphAndPageIfUnloaded(this.props.match.params)
-    .then(data => {
-      actions.site.setSiteTitle(data.res.title)
-      if (!data.res.tiles.length) {
-        this.props.pageActions.showAddTileForm()
-      } else {
-        this.props.pageActions.hideAddTileForm()
-      }
-    })
-  }
-  render() {
-    if (!this.shouldShowPage()) return null
-    if (!this.props.page.show.res || this.props.page.show.loading) {
-      return (
-        <div>
-          <PageHeader />
-          <div className='body'>
-            <div className='page loading'>
-              <Loader />
-            </div>
-          </div>
-        </div>
-      )
-    }
-    return (
-      <div>
-        <PageHeader />
-        <div className='body'>
-          <PageEditor />
-          <div className='sidebar'>
-            {this.props.graph.editor.editingPage && <PageEdit />}
-            {this.props.page.editor.addingTile && <TileNew />}
-            {this.props.page.editor.editingTile && <TileEdit />}
-            {this.props.page.editor.tileList && <TileList />}
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  graph: state.graph,
-  page: state.page,
-})
-
-const mapDispatchToProps = dispatch => ({
-  graphActions: bindActionCreators({ ...graphActions }, dispatch),
-  pageActions: bindActionCreators({ ...pageActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(PageContainer)
diff --git a/frontend/views/page/page.css b/frontend/views/page/page.css
deleted file mode 100644
index 4559543..0000000
--- a/frontend/views/page/page.css
+++ /dev/null
@@ -1,167 +0,0 @@
-.page.loading {
-  padding: 1rem;
-}
-
-.page {
-  width: 100%;
-  height: 100%;
-}
-
-/* tiles */
-
-.tile {
-  position: absolute;
-}
-.tile.image {
-  display: block;
-}
-.tile.image.is_tiled {
-  width: 100%;
-  height: 100%;
-}
-.tile.text {
-  display: block;
-  white-space: break-spaces;
-  padding: 0.25rem;
-  user-select: none;
-  cursor: arrow;
-}
-.tile.link {
-  display: block;
-}
-
-/* tile orientations */
-
-.tile.top_left { top: 0; left: 0; }
-.tile.center_left { top: 50%; left: 0; }
-.tile.bottom_left { bottom: 0; left: 0; }
-.tile.top_center { top: 0; left: 50%; }
-.tile.center_center { top: 50%; left: 50%; }
-.tile.bottom_center { bottom: 0; left: 50%; }
-.tile.top_right { top: 0; right: 0; }
-.tile.center_right { top: 50%; right: 0; }
-.tile.bottom_right { bottom: 0; right: 0; }
-
-/* sortable tile list */
-
-.tileList .row {
-  justify-content: flex-start;
-  align-items: center;
-  min-height: 2.5rem;
-  margin-bottom: 0.5rem;
-  box-shadow: 4px 4px 6px rgba(0,0,0,0.5);
-}
-.tileList .row:last-child {
-  margin-bottom: 0;
-}
-.tileList .row:nth-child(odd) {
-  background: rgba(0,0,0,0.2);
-}
-.tileList .row:nth-child(even) {
-  background: rgba(255,255,255,0.2);
-}
-.tileList span {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100%;
-  white-space: nowrap;
-  padding: 0.25rem;
-  cursor: default;
-}
-.tileList .thumb {
-  width: 100%;
-  height: 2.5rem;
-  background-position: center center;
-  background-size: cover;
-  background-repeat: no-repeat;
-}
-.tileList .row.sortable-chosen {
-  background-color: #000;
-}
-.tileList .row.sortable-ghost {
-}
-.tileList .row.sortable-drag {
-  opacity: 0.6;
-}
-.tileList .row.link {
-  border: 1px solid #31f;
-  background: rgba(48,16,255,0.3);
-  box-shadow: inset 0 0 16px rgba(0,0,0,0.5);
-  padding-left: 0.375rem;
-}
-
-/* tile form */
-
-.row.imageUrl label {
-  width: 13rem;
-}
-.row.imageUrl .thumb {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 1.5rem;
-  width: 1.9475rem;
-  margin-right: 0.5rem;
-}
-.row.imageUrl img {
-  max-width: 100%;
-  max-height: 100%;
-}
-.box .row.buttons {
-  justify-content: space-between;
-}
-.box .row.pair {
-  justify-content: space-between;
-}
-.box .pair label:last-child {
-  margin-right: 0;
-}
-
-/* tile font form */
-
-.box .font {
-  justify-content: space-between;
-}
-.box .font input[type=number] {
-  width: 3rem;
-}
-.box .font .select {
-  width: 6rem;
-  padding: 0.25rem;
-  margin-right: 0;
-}
-.box .font label:last-child .select {
-  width: 3.75rem;
-}
-.box .font label {
-  flex-direction: row;
-  width: 6.5rem;
-  margin-right: 0.5rem;
-  min-width: auto;
-}
-.box .font label span {
-  display: none;
-}
-.box form .font label {
-}
-
-/* tile color form */
-
-.box form label.color span {
-  min-width: 4rem;
-  width: 4rem;
-}
-.box label.color {
-  display: flex;
-  flex-direction: row;
-}
-.box label.color input[type='color'] {
-  width: 2rem;
-  margin-right: 0.5rem;
-  padding: 0;
-}
-.box label.color input[type='text'] {
-  width: 6rem;
-  max-width: 6rem;
-}
diff --git a/frontend/views/page/page.reducer.js b/frontend/views/page/page.reducer.js
deleted file mode 100644
index 462be37..0000000
--- a/frontend/views/page/page.reducer.js
+++ /dev/null
@@ -1,202 +0,0 @@
-import * as types from '../../types'
-// import { session, getDefault, getDefaultInt } from '../../session'
-
-import { crudState, crudReducer } from '../../api/crud.reducer'
-
-const initialState = crudState('page', {
-  editor: {
-    addingTile: false,
-    editingTile: false,
-    currentEditTileId: 0,
-    tileList: false,
-  },
-  options: {
-  }
-})
-
-const reducer = crudReducer('page')
-
-export default function pageReducer(state = initialState, action) {
-  // console.log(action.type, action)
-  state = reducer(state, action)
-  switch (action.type) {
-    case types.tile.create:
-      return {
-        ...state,
-        show: {
-          ...state.show,
-          res: {
-            ...state.show.res,
-            tiles: state.show.res.tiles.concat(action.data.res),
-          }
-        }
-      }
-
-    case types.page.update:
-      if (state.show.res && state.show.res.id === action.data.res.id) {
-        return {
-          ...state,
-          show: {
-            ...state.show,
-            res: {
-              ...action.data.res,
-              tiles: state.show.res.tiles,
-            }
-          }
-        }
-      }
-      return {
-        ...state,
-        show: {
-          ...state.show,
-          res: {
-            ...action.data.res,
-          }
-        }
-      }
-
-    case types.page.update_page_tile:
-      console.log(action.tile)
-      return {
-        ...state,
-        show: {
-          ...state.show,
-          res: {
-            ...state.show.res,
-            tiles: state.show.res.tiles.map(tile => {
-              if (tile.id === action.tile.id) {
-                return { ...action.tile }
-              } else {
-                return tile
-              }
-            }),
-          }
-        }
-      }
-
-    case types.tile.destroy:
-      return {
-        ...state,
-        show: {
-          ...state.show,
-          res: {
-            ...state.show.res,
-            tiles: state.show.res.tiles.filter(tile => tile.id !== action.data.id)
-          }
-        }
-      }
-
-    // add tile UI
-    case types.page.show_add_tile_form:
-      return {
-        ...state,
-        editor: {
-          ...state.editor,
-          addingTile: true,
-          editingTile: false,
-          tileList: false,
-        }
-      }
-
-    case types.page.hide_add_tile_form:
-      return {
-        ...state,
-        editor: {
-          ...state.editor,
-          addingTile: false,
-        }
-      }
-
-    case types.page.toggle_add_tile_form:
-      return {
-        ...state,
-        editor: {
-          ...state.editor,
-          addingTile: !state.editor.addingTile,
-          editingTile: false,
-          tileList: false,
-        }
-      }
-
-    // edit tile UI
-    case types.page.show_edit_tile_form:
-      return {
-        ...state,
-        editor: {
-          ...state.editor,
-          addingTile: false,
-          editingTile: true,
-          currentEditTileId: action.tile_id,
-          tileList: false,
-        }
-      }
-
-    case types.page.hide_edit_tile_form:
-      return {
-        ...state,
-        editor: {
-          ...state.editor,
-          editingTile: false,
-        }
-      }
-
-    // tile list UI
-    case types.page.show_tile_list:
-      return {
-        ...state,
-        editor: {
-          ...state.editor,
-          addingTile: false,
-          editingTile: false,
-          tileList: true,
-        }
-      }
-
-    case types.page.hide_tile_list:
-      return {
-        ...state,
-        editor: {
-          ...state.editor,
-          tileList: false,
-        }
-      }
-
-    case types.page.toggle_tile_list:
-      return {
-        ...state,
-        editor: {
-          ...state.editor,
-          addingTile: false,
-          editingTile: false,
-          tileList: !state.editor.tileList,
-        }
-      }
-
-    case types.graph.toggle_edit_page_form:
-      return {
-        ...state,
-        editor: {
-          ...state.editor,
-          addingTile: false,
-          editingTile: false,
-          tileList: false,
-        }
-      }
-
-    case types.page.set_tile_sort_order:
-      return {
-        ...state,
-        show: {
-          ...state.show,
-          res: {
-            ...state.res,
-            tiles: action.tiles,
-          }
-        }
-      }
-
-
-    default:
-      return state
-  }
-}
diff --git a/frontend/views/site/site.actions.js b/frontend/views/site/site.actions.js
deleted file mode 100644
index b5f0cbe..0000000
--- a/frontend/views/site/site.actions.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as types from '../../types'
-// import actions from '../../actions'
-// import { session } from '../../session'
-
-export const setSiteTitle = title => dispatch => {
-  document.querySelector('title').innerText = title
-  dispatch({ type: types.site.set_site_title, payload: title })
-}
diff --git a/frontend/views/site/site.reducer.js b/frontend/views/site/site.reducer.js
deleted file mode 100644
index c9a25dd..0000000
--- a/frontend/views/site/site.reducer.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as types from '../../types'
-// import { session, getDefault, getDefaultInt } from '../../session'
-
-const initialState = {
-  'siteTitle': 'swimmer',
-}
-
-export default function graphReducer(state = initialState, action) {
-  // console.log(action.type, action)
-  switch (action.type) {
-    case types.site.set_site_title:
-      return {
-        ...state,
-        siteTitle: action.payload,
-      }
-
-    default:
-      return state
-  }
-}
diff --git a/frontend/views/tile/tile.actions.js b/frontend/views/tile/tile.actions.js
deleted file mode 100644
index b8ff657..0000000
--- a/frontend/views/tile/tile.actions.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as types from '../../types'
-// import { store } from '../../store'
-
-export const updateTemporaryTile = data => dispatch => {
-  dispatch({ type: types.tile.update_temporary_tile, data })
-}
-
-export const clearTemporaryTile = () => dispatch => {
-  dispatch({ type: types.tile.clear_temporary_tile })
-}
diff --git a/frontend/views/tile/tile.reducer.js b/frontend/views/tile/tile.reducer.js
deleted file mode 100644
index a4e5868..0000000
--- a/frontend/views/tile/tile.reducer.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as types from '../../types'
-// import { session, getDefault, getDefaultInt } from '../../session'
-
-import { crudState, crudReducer } from '../../api/crud.reducer'
-
-const initialState = crudState('tile', {
-  temporaryTile: null,
-  options: {},
-})
-
-const reducer = crudReducer('tile')
-
-export default function tileReducer(state = initialState, action) {
-  // console.log(action.type, action)
-  state = reducer(state, action)
-  switch (action.type) {
-    case types.tile.update_temporary_tile:
-      return {
-        ...state,
-        temporaryTile: action.data
-      }
-
-    case types.tile.clear_temporary_tile:
-      return {
-        ...state,
-        temporaryTile: null
-      }
-
-    default:
-      return state
-  }
-}
diff --git a/frontend/views/upload/components/upload.form.js b/frontend/views/upload/components/upload.form.js
deleted file mode 100644
index 2010088..0000000
--- a/frontend/views/upload/components/upload.form.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, { Component } from 'react'
-import { Link } from 'react-router-dom'
-
-import { MenuButton, FileInput } from '../../../common'
-
-export default class UploadForm extends Component {
-  render() {
-    return (
-      <div className='uploadForm'>
-        <MenuButton name="upload" label={false}>
-          <FileInput onChange={this.props.uploadActions.upload} />
-        </MenuButton>
-      </div>
-    )
-  }
-}
diff --git a/frontend/views/upload/components/upload.index.js b/frontend/views/upload/components/upload.index.js
deleted file mode 100644
index 6123001..0000000
--- a/frontend/views/upload/components/upload.index.js
+++ /dev/null
@@ -1,104 +0,0 @@
-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 UploadIndexOptions from './upload.indexOptions'
-import UploadMenu from './upload.menu'
-
-// const { result, collectionLookup } = this.props
-
-export default class UploadIndex extends Component {
-  componentDidMount() {
-    this.fetch(false)
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.upload.options.sort !== prevProps.upload.options.sort) {
-      this.fetch(false)
-    }
-  }
-
-  fetch(load_more) {
-    const { options, index } = this.props.upload
-    const { order: index_order } = index
-    const [ sort, order ] = options.sort.split('-')
-    actions.upload.index({
-      sort, order, limit: 50, offset: load_more ? index_order.length : 0,
-    }, load_more)
-  }
-
-  render() {
-    const { searchOptions, uploadActions } = this.props
-    const { options } = this.props.upload
-    const { loading, lookup, order } = this.props.upload.index
-    if (loading) {
-      return (
-        <section>
-          <UploadIndexOptions />
-          <div className="row">
-            {order && !!order.length &&
-              <div className={'results ' + searchOptions.thumbnailSize}>
-                {order.map(id => <UploadItem key={id} data={lookup[id]} />)}
-              </div>
-            }
-          </div>
-          <Loader />
-        </section>
-      )
-    }
-    if (!lookup || !order.length) {
-      return (
-        <section>
-          <UploadIndexOptions />
-          <div className="row">
-            <UploadMenu uploadActions={uploadActions} />
-            <p className='gray'>
-              {"No uploads"}
-            </p>
-          </div>
-        </section>
-      )
-    }
-    return (
-      <section>
-        <UploadIndexOptions />
-        <div className="row">
-          <UploadMenu uploadActions={uploadActions} />
-          <div className={'results ' + searchOptions.thumbnailSize}>
-            {order.map(id => <UploadItem key={id} data={lookup[id]} />)}
-          </div>
-        </div>
-        {order.length >= 50 && <button className='loadMore' onClick={() => this.fetch(true)}>Load More</button>}
-      </section>
-    )
-  }
-}
-
-const UploadItem = ({ data }) => {
-  // console.log(data)
-  const imageUri = uploadUri(data)
-  return (
-    <div className='cell'>
-      <div className='img'>
-        <Link to={"/upload/" + data.id + "/show/"}>
-          <img src={imageUri} alt={"Uploaded image"} />
-        </Link>
-      </div>
-      <div className='meta center'>
-        <div className='row'>
-          <SmallMenuButton name="search" href={"/search/upload/" + data.id + "/"} />
-        </div>
-        <div>
-          {data.username}
-        </div>
-        <div>
-          {formatDateTime(data.created_at)}
-        </div>
-      </div>
-    </div>
-  )
-}
-
diff --git a/frontend/views/upload/components/upload.indexOptions.js b/frontend/views/upload/components/upload.indexOptions.js
deleted file mode 100644
index 22d3fdc..0000000
--- a/frontend/views/upload/components/upload.indexOptions.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { Component } from 'react'
-import { Link } from 'react-router-dom'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-
-import actions from '../../../actions'
-
-import { Select, Checkbox } from '../../../common'
-
-const thumbnailOptions = [
-  { name: 'th', label: 'Thumbnails', },
-  { name: 'sm', label: 'Small', },
-  { name: 'md', label: 'Medium', },
-  { name: 'lg', label: 'Large', },
-  { name: 'orig', label: 'Original', },
-]
-
-const sortOptions = [
-  { name: 'id-asc', label: 'Most recent' },
-  { name: 'id-desc', label: 'Oldest first' },
-  { name: 'username-asc', label: 'Username (A-Z)' },
-  { name: 'username-desc', label: 'Username (Z-A)' },
-  // { name: '-asc', label: '' },
-  // { name: '-desc', label: '' },
-  // { name: '-asc', label: '' },
-  // { name: '-desc', label: '' },
-  // { name: '-asc', label: '' },
-  // { name: '-desc', label: '' },
-]
-
-class IndexOptions extends Component {
-  render() {
-    const { options, searchOptions } = this.props
-    return (
-      <div className='row menubar'>
-        <div />
-        <Select
-          name={'sort'}
-          options={sortOptions}
-          selected={options.sort}
-          onChange={actions.upload.updateOption}
-        />
-        <Select
-          name={'thumbnailSize'}
-          options={thumbnailOptions}
-          selected={searchOptions.thumbnailSize}
-          onChange={actions.search.updateOption}
-        />
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  options: state.upload.options,
-  searchOptions: state.search.options,
-})
-
-const mapDispatchToProps = dispatch => ({
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(IndexOptions)
diff --git a/frontend/views/upload/components/upload.menu.js b/frontend/views/upload/components/upload.menu.js
deleted file mode 100644
index 37c7f0b..0000000
--- a/frontend/views/upload/components/upload.menu.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React, { Component } from 'react'
-import { Link } from 'react-router-dom'
-
-import { MenuButton, FileInput } from '../../../common'
-
-import actions from '../../../actions'
-
-export default class UploadMenu extends Component {
-  render() {
-    return (
-      <div className='menuButtons'>
-        <MenuButton name="upload">
-          <FileInput onChange={this.props.uploadActions.upload} />
-        </MenuButton>
-      </div>
-    )
-  }
-}
diff --git a/frontend/views/upload/components/upload.show.js b/frontend/views/upload/components/upload.show.js
deleted file mode 100644
index 6b36269..0000000
--- a/frontend/views/upload/components/upload.show.js
+++ /dev/null
@@ -1,70 +0,0 @@
-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'
-
-class UploadShow extends Component {
-  componentDidMount() {
-    actions.upload.show(this.props.match.params.id)
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.match.params.id !== this.props.match.params.id) {
-      actions.upload.show(this.props.match.params.id)
-    }
-  }
-
-  handleDestroy() {
-    const { res: data } = this.props.upload.show
-    if (confirm("Really delete this upload?")) {
-      actions.upload.destroy(data).then(() => {
-        history.push('/upload/')
-      })
-    }
-  }
-
-  render() {
-    const { show, destroy } = this.props.upload
-    if (show.loading || destroy.loading) {
-      return <Loader />
-    }
-    if (!show.loading && !show.res || show.not_found) {
-      return <div className='gray'>Upload {this.props.match.params.id} not found</div>
-    }
-    const { res: data } = show
-    return (
-      <section className="row uploadShow">
-        <div className="menuButtons">
-          <MenuButton name="delete" onClick={this.handleDestroy.bind(this)} />
-          <MenuButton name="search" href={'/search/upload/' + data.id + '/'} />
-        </div>
-        <div>
-          <img src={uploadUri(data)} />
-          <div className='byline'>
-            {'Uploaded by '}
-            {data.username}
-            {' on '}
-            {formatDate(data.created_at)}
-            {' at '}
-            {formatTime(data.created_at)}
-            {'. '}
-          </div>
-        </div>
-      </section>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  upload: state.upload,
-})
-
-const mapDispatchToProps = dispatch => ({
-  // searchActions: bindActionCreators({ ...searchActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(UploadShow)
diff --git a/frontend/views/upload/upload.actions.js b/frontend/views/upload/upload.actions.js
deleted file mode 100644
index ba2b14b..0000000
--- a/frontend/views/upload/upload.actions.js
+++ /dev/null
@@ -1,17 +0,0 @@
-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'
-
-export const upload = file => dispatch => {
-  const formData = {
-    'image': file,
-    'username': session('username'),
-  }
-  // console.log(formData)
-  return actions.upload.upload(formData).then(data => {
-    // console.log(data.res)
-    return data.res
-  })
-}
diff --git a/frontend/views/upload/upload.container.js b/frontend/views/upload/upload.container.js
deleted file mode 100644
index ea9df5a..0000000
--- a/frontend/views/upload/upload.container.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { Component } from 'react'
-import { Route, Link } from 'react-router-dom'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-
-import './upload.css'
-
-import actions from '../../actions'
-import * as uploadActions from './upload.actions'
-
-import UploadMenu from './components/upload.menu'
-import UploadIndex from './components/upload.index'
-import UploadShow from './components/upload.show'
-
-class Container extends Component {
-  render() {
-    return (
-      <div className='row upload'>
-        <div>
-          <Route exact path='/upload/:id/show/' component={UploadShow} />
-          <UploadIndex {...this.props} />
-        </div>
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  upload: state.upload,
-  searchOptions: state.search.options,
-})
-
-const mapDispatchToProps = dispatch => ({
-  uploadActions: bindActionCreators({ ...uploadActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(Container)
diff --git a/frontend/views/upload/upload.css b/frontend/views/upload/upload.css
deleted file mode 100644
index 8d77754..0000000
--- a/frontend/views/upload/upload.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.uploadShow img {
-  max-width: 30rem;
-  max-height: 20rem;
-}
-.upload {
-  height: 100%;
-}
-.upload > div:last-child {
-  flex: 1;
-}
\ No newline at end of file
diff --git a/frontend/views/upload/upload.reducer.js b/frontend/views/upload/upload.reducer.js
deleted file mode 100644
index 98dc0a1..0000000
--- a/frontend/views/upload/upload.reducer.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as types from '../../types'
-import { session, getDefault, getDefaultInt } from '../../session'
-
-import { crudState, crudReducer } from '../../api/crud.reducer'
-
-const initialState = crudState('upload', {
-  options: {
-    sort: getDefault('upload.sort', 'id-desc'),
-  }
-})
-
-const reducer = crudReducer('upload')
-
-export default function uploadReducer(state = initialState, action) {
-  // console.log(action.type, action)
-  state = reducer(state, action)
-  switch (action.type) {
-    default:
-      return state
-  }
-}
-- 
cgit v1.2.3-70-g09d2