refactor to use app-rooted js imports

85 files changed, 7402 insertions, 0 deletions

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
+  }
+}