switch Angular -> React(half done)

2025-12-13 01:36:22 +00:00 · 2015-07-06 02:03:40 +09:00
parent 1a832c1fc4
commit 361e9c629e
27 changed files with 1012 additions and 43 deletions
--- a/.bowerrc
+++ b/.bowerrc
@@ -0,0 +1,3 @@
+{
+  "directory": "browser/vendor/"
+}
--- a/bower.json
+++ b/bower.json
@@ -0,0 +1,8 @@
+{
+  "name": "codexen-app",
+  "dependencies": {
+    "react": "~0.13.3",
+    "fontawesome": "~4.3.0",
+    "react-router": "~0.13.3"
+  }
+}
--- a/browser/index.html
+++ b/browser/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+  </head>
+  <body>
+    <a href="/main">Go Main</a>
+    <a href="/main">Go Popup</a>
+  </body>
+</html>
--- a/browser/main/Containers/BlueprintContainer.jsx
+++ b/browser/main/Containers/BlueprintContainer.jsx
@@ -0,0 +1,11 @@
+var React = require('react/addons')
+
+module.exports = React.createClass({
+  render: function () {
+    return (
+      <div>
+        Blueprint Container
+      </div>
+    )
+  }
+})
--- a/browser/main/Containers/DashboardContainer.jsx
+++ b/browser/main/Containers/DashboardContainer.jsx
@@ -0,0 +1,52 @@
+var React = require('react/addons')
+
+module.exports = React.createClass({
+  render: function () {
+    return (
+      <div className='DashboardContainer'>
+        <h1 className='jumbotron'>Codexen App <small>v0.2.0</small></h1>
+
+        <h2>About CodeXen</h2>
+
+        <p>
+          CodeXen is short code storage tool make coding more stressless. If you use CodeXen, then you will be disentangled from troublesome organizing a large number of snippets and googling same code many times.
+        </p>
+
+        <ol>
+          <li>
+            <h3>Post your code</h3>
+            <p>
+              Post your commonly used code with description,category,and tags.
+            </p>
+          </li>
+          <li>
+            <h3>Save on cloud</h3>
+            <p>
+              From short snippet to long complex code,CodeXen saves any code simply.
+            </p>
+          </li>
+          <li>
+            <h3>
+              Use code like a magic
+            </h3>
+            <p>
+              CodeXen call code you posted whereever you are.Type [shift+control+tab] simultaneously.
+            </p>
+          </li>
+          <li>
+            <h3>
+              Code Elegantly
+            </h3>
+            <p>
+              That's all!
+              You must be loved with CodeXen. Enjoy coding;)
+            </p>
+          </li>
+        </ol>
+        <p>
+          © 2015 MAISIN&CO.,Inc.
+        </p>
+      </div>
+    )
+  }
+})
--- a/browser/main/Containers/LoginContainer.jsx
+++ b/browser/main/Containers/LoginContainer.jsx
@@ -0,0 +1,44 @@
+var React = require('react/addons')
+var ReactRouter = require('react-router')
+var Link = ReactRouter.Link
+var Auth = require('../Services/Auth')
+
+module.exports = React.createClass({
+  mixins: [React.addons.LinkedStateMixin, ReactRouter.Navigation],
+  getInitialState: function () {
+    return {
+      email: '',
+      password: ''
+    }
+  },
+  handleSubmit: function (e) {
+    console.log(this.state)
+    Auth.attempt()
+    // TODO: request user data
+      .then(function (user) {
+        this.transitionTo('dashboard', {planetName: user.name})
+      }.bind(this))
+    e.preventDefault()
+  },
+  render: function () {
+    return (
+      <div className='LoginContainer'>
+        <h1 className='text-center'>CodeXen</h1>
+        <h2 className='text-center'>Log In | <small><Link to='register'>Register</Link></small></h2>
+        <form onSubmit={this.handleSubmit}>
+          <div className='form-group'>
+            <label>E-mail</label>
+            <input valueLink={this.linkState('email')} type='text' placeholder='E-mail'/>
+          </div>
+          <div className='form-group'>
+            <label>Password</label>
+            <input valueLink={this.linkState('password')} onChange={this.handleChange} type='password' placeholder='Password'/>
+          </div>
+          <div className='form-group'>
+            <button className='btn-primary btn-block' type='submit'><i className='fa fa-sign-in'></i> Login</button>
+          </div>
+        </form>
+      </div>
+    )
+  }
+})
--- a/browser/main/Containers/MainContainer.jsx
+++ b/browser/main/Containers/MainContainer.jsx
@@ -0,0 +1,18 @@
+var React = require('react/addons')
+var ReactRouter = require('react-router')
+var RouteHandler = ReactRouter.RouteHandler
+
+module.exports = React.createClass({
+    mixins: [ReactRouter.Navigation, ReactRouter.State],
+    render: function () {
+      // Redirect Login state
+      if (this.getPath() === '/') {
+        this.transitionTo('/login')
+      }
+      return (
+        <div className='Main'>
+          <RouteHandler/>
+        </div>
+      )
+    }
+})
--- a/browser/main/Containers/PlanetContainer.jsx
+++ b/browser/main/Containers/PlanetContainer.jsx
@@ -0,0 +1,138 @@
+var React = require('react/addons')
+var RouteHandler = require('react-router').RouteHandler
+var ReactRouter = require('react-router')
+var Link = ReactRouter.Link
+
+var userPlanets = [
+  {
+    id: 1,
+    name: 'testcat',
+    profileName: 'TestCat'
+  },
+  {
+    id: 2,
+    name: 'group1',
+    profileName: 'Some Group#1'
+  },
+  {
+    id: 3,
+    name: 'group2',
+    profileName: 'Some Group#1'
+  }
+]
+
+var PlanetNavigator = React.createClass({
+  propTypes: {
+    currentPlanet: React.PropTypes.object
+  },
+  render: function () {
+    var planets = userPlanets.map(function (planet) {
+      return (
+        <li key={planet.id} className={this.props.currentPlanet.name === planet.name ? 'active' : ''}><a>{planet.profileName[0]}</a></li>
+      )
+    }.bind(this))
+
+    return (
+      <div className='PlanetNavigator'>
+        <ul>
+          {planets}
+        </ul>
+      </div>
+    )
+  }
+})
+
+var PlanetMain = React.createClass({
+  propTypes: {
+    currentPlanet: React.PropTypes.object
+  },
+  render: function () {
+    return (
+      <div className='PlanetMain'>
+        <SideNavigator currentPlanet={this.props.currentPlanet}/>
+        <Screen currentPlanet={this.props.currentPlanet}/>
+      </div>
+    )
+  }
+})
+
+var SideNavigator = React.createClass({
+  propTypes: {
+    currentPlanet: React.PropTypes.shape({
+      name: React.PropTypes.string
+    })
+  },
+  render: function () {
+    var currentPlanetName = this.props.currentPlanet.name
+
+    return (
+      <div className='SideNavigator'>
+        <div className='nav-header'>
+          <p className='planet-name'>{currentPlanetName}</p>
+          <button className='menu-btn'>
+            <i className='fa fa-chevron-down'></i>
+          </button>
+        </div>
+        <button className='btn-primary btn-block'>
+          <i className='fa fa-rocket fa-fw'/> Launch
+        </button>
+        <nav>
+          <Link to='dashboard' params={{planetName: currentPlanetName}}>
+            <i className='fa fa-home fa-fw'/> Home
+          </Link>
+          <Link to='snippets' params={{planetName: currentPlanetName}}>
+            <i className='fa fa-code fa-fw'/> Snippets
+          </Link>
+          <Link to='blueprint' params={{planetName: currentPlanetName}}>
+            <i className='fa fa-wrench fa-fw'/> Blueprints
+          </Link>
+        </nav>
+      </div>
+    )
+  }
+})
+
+var Screen = React.createClass({
+  render: function () {
+    return (
+      <div className='Screen'>
+        <RouteHandler/>
+      </div>
+    )
+  }
+})
+
+module.exports = React.createClass({
+  mixins: [ReactRouter.Navigation],
+  propTypes: {
+    params: React.PropTypes.object,
+    planetName: React.PropTypes.string
+  },
+  render: function () {
+    var currentPlanetName = this.props.params.planetName
+    var currentPlanet = null
+    userPlanets.some(function (planet) {
+      if (planet.name === currentPlanetName) {
+        currentPlanet = planet
+        return true
+      }
+      return false
+    })
+    if (currentPlanet == null) {
+      var redirectTo = userPlanets[0].name
+      this.transitionTo('planet', {planetName: redirectTo})
+      return (
+        <div className='PlanetContainer'>
+          Redirecting...
+        </div>
+      )
+    }
+
+    return (
+      <div className='PlanetContainer'>
+        <PlanetNavigator currentPlanet={currentPlanet}/>
+        <PlanetMain currentPlanet={currentPlanet}/>
+      </div>
+    )
+  }
+})
--- a/browser/main/Containers/RegisterContainer.jsx
+++ b/browser/main/Containers/RegisterContainer.jsx
@@ -0,0 +1,55 @@
+var React = require('react/addons')
+var ReactRouter = require('react-router')
+var Link = ReactRouter.Link
+var Auth = require('../Services/Auth')
+
+module.exports = React.createClass({
+  mixins: [React.addons.LinkedStateMixin, ReactRouter.Navigation],
+  getInitialState: function () {
+    return {
+      email: '',
+      password: '',
+      name: '',
+      profileName: ''
+    }
+  },
+  handleSubmit: function (e) {
+    Auth.register()
+    // TODO: request user data
+      .then(function (user) {
+        this.transitionTo('dashboard', {planetName: user.name})
+      }.bind(this))
+
+    e.preventDefault()
+  },
+  render: function () {
+    return (
+      <div className='RegisterContainer'>
+        <h1 className='text-center'>CodeXen</h1>
+        <h2 className='text-center'><small><Link to='login'>Log In</Link></small> | Register</h2>
+        <form onSubmit={this.handleSubmit}>
+          <div className='form-group'>
+            <label>E-mail</label>
+            <input valueLink={this.linkState('email')} type='text' placeholder='E-mail'/>
+          </div>
+          <div className='form-group'>
+            <label>Password</label>
+            <input valueLink={this.linkState('password')} type='password' placeholder='Password'/>
+          </div>
+          <hr></hr>
+          <div className='form-group'>
+            <label>User name</label>
+            <input valueLink={this.linkState('name')} type='text' placeholder='name'/>
+          </div>
+          <div className='form-group'>
+            <label>Profile name</label>
+            <input valueLink={this.linkState('profileName')} type='text' placeholder='Profile name'/>
+          </div>
+          <div className='form-group'>
+            <button className='btn-primary btn-block' type='submit'><i className='fa fa-sign-in'></i> Register</button>
+          </div>
+        </form>
+      </div>
+    )
+  }
+})
--- a/browser/main/Containers/SnippetContainer.jsx
+++ b/browser/main/Containers/SnippetContainer.jsx
@@ -0,0 +1,110 @@
+var React = require('react/addons')
+var Snippet = require('../Services/Snippet')
+
+var SnippetList = React.createClass({
+  propTypes: {
+    snippets: React.PropTypes.array,
+    selectSnippet: React.PropTypes.func
+  },
+  itemClickHandlerFactory: function (snippet) {
+    return function () {
+      console.log(this.props.selectSnippet)
+      this.props.selectSnippet(snippet)
+    }.bind(this)
+  },
+  render: function () {
+    var snippets = this.props.snippets.map(function (snippet) {
+      var tags = snippet.Tags.map(function (tag) {
+        return (
+          <a key={tag.id} href>#{tag.name}</a>
+        )
+      })
+      return (
+        <li key={snippet.id} onClick={this.itemClickHandlerFactory(snippet)}>
+          <div className='callSign'><i className='fa fa-code'></i> {snippet.callSign}</div>
+          <div className='description'>{snippet.description}</div>
+          <div className='updatedAt'>{snippet.updatedAt}</div>
+          <div className='tags'><i className='fa fa-tags'/>{tags}</div>
+        </li>
+      )
+    }.bind(this))
+
+    return (
+      <div className='SnippetList'>
+        <div className='search form-group'><input type='text' placeholder='Search...'/></div>
+        <ul>
+          {snippets}
+        </ul>
+      </div>
+    )
+  }
+})
+
+var SnippetViewer = React.createClass({
+  propTypes: {
+    snippet: React.PropTypes.object
+  },
+  render: function () {
+    var snippet = this.props.snippet
+    var content
+    if (snippet != null) {
+      var tags = snippet.Tags.map(function (tag) {
+        return (
+          <a key={tag.id} href>#{tag.name}</a>
+        )
+      })
+      content = (
+        <div className='SnippetViewer'>
+          <div className='viewer-header'><i className='fa fa-code'></i> {snippet.callSign} <small className='updatedAt'>{snippet.updatedAt}</small></div>
+          <div className='viewer-body'>
+            <div className='viewer-detail'>
+              <div className='description'>{snippet.description}</div>
+              <div className='tags'><i className='fa fa-tags'/>{tags}</div>
+            </div>
+            <div>{snippet.content}</div>
+          </div>
+        </div>
+      )
+    } else {
+      content = (
+        <div className='SnippetViewer'>
+          Not selected
+        </div>
+      )
+    }
+    return content
+  }
+})
+
+var SnippetContainer = React.createClass({
+  propTypes: {
+    params: React.PropTypes.shape({
+      planetName: React.PropTypes.string
+    })
+  },
+  getInitialState: function () {
+    return {
+      snippets: [],
+      curentSnippet: {}
+    }
+  },
+  componentDidMount: function () {
+    Snippet.getByPlanet(this.props.params.planetName)
+      .then(function (snippets) {
+        this.setState({snippets: snippets, currentSnippet: snippets.length > 0 ? snippets[0] : null})
+      }.bind(this))
+  },
+  selectSnippet: function (snippet) {
+    this.setState({currentSnippet: snippet})
+  },
+  render: function () {
+    return (
+      <div className='SnippetContainer'>
+        <SnippetList selectSnippet={this.selectSnippet} snippets={this.state.snippets}/>
+        <SnippetViewer snippet={this.state.currentSnippet}/>
+      </div>
+    )
+  }
+})
+
+module.exports = SnippetContainer
--- a/browser/main/Services/Auth.js
+++ b/browser/main/Services/Auth.js
@@ -0,0 +1,40 @@
+/* global localStorage */
+var Auth = {}
+
+var currentUser = null
+Auth.attempt = function (params) {
+  return new Promise(function (resolve, reject) {
+    var token = 'some token'
+    var user = {
+      name: 'testcat',
+      email: 'testcat@example.com',
+      profileName: 'Test Cat'
+    }
+    localStorage.setItem('token', token)
+
+    resolve(user)
+  })
+}
+
+Auth.register = function (params) {
+  return new Promise(function (resolve, reject) {
+    var token = 'some token'
+    var user = {
+      name: 'testcat',
+      email: 'testcat@example.com',
+      profileName: 'Test Cat'
+    }
+    localStorage.setItem('token', token)
+
+    resolve(user)
+  })
+}
+
+Auth.getUser = function () {
+  return new Promise(function (resolve, reject) {
+
+    resolve(currentUser)
+  })
+}
+
+module.exports = Auth
--- a/browser/main/Services/Snippet.js
+++ b/browser/main/Services/Snippet.js
@@ -0,0 +1,38 @@
+var Snippet = {}
+
+var snippets = {
+  testcat: [
+    {
+      id: 1,
+      callSign: 'alert',
+      description: 'yolo',
+      content: '<div></div>',
+      mode: 'html',
+      createdAt: '2015-06-26T15:10:59.000Z',
+      updatedAt: '2015-06-26T15:10:59.000Z',
+      UserId: 1,
+      Tags: [{'id': 18, 'name': 'bootstrap', 'color': null}, {'id': 19, 'name': 'alert', 'color': null}]
+    },
+    {
+      id: 2,
+      callSign: 'log',
+      description: 'javascript log',
+      content: 'console.log(\'yolo\')',
+      mode: 'js',
+      createdAt: '2015-06-26T15:10:59.000Z',
+      updatedAt: '2015-06-26T15:10:59.000Z',
+      UserId: 1,
+      Tags: [{'id': 20, 'name': 'log', 'color': null}, {'id': 1, 'name': 'js', 'color': null}]
+    }
+  ],
+  group1: [],
+  group2: []
+}
+
+Snippet.getByPlanet = function (planetName) {
+  return new Promise(function (resolve, reject) {
+    resolve(snippets[planetName])
+  })
+}
+
+module.exports = Snippet
--- a/browser/main/index.electron.html
+++ b/browser/main/index.electron.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CodeXen</title>
+
+  <link rel="stylesheet" href="../vendor/fontawesome/css/font-awesome.min.css" media="screen" title="no title" charset="utf-8">
+
+</head>
+<body>
+  <div id="content"></div>
+  <script>
+    require('node-jsx').install({ harmony: true, extension: '.jsx' });
+    require('./index.jsx')
+  </script>
+</body>
+</html>
--- a/browser/main/index.html
+++ b/browser/main/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CodeXen</title>
+
+  <link rel="stylesheet" href="../vendor/fontawesome/css/font-awesome.min.css" media="screen" title="no title" charset="utf-8">
+  <script src="../vendor/react/react-with-addons.js"></script>
+  <script src="../vendor/react-router/build/umd/ReactRouter.js"></script>
+
+</head>
+<body>
+  <div id="content"></div>
+  <script src="http://localhost:8090/webpack-dev-server.js"></script>
+  <script type="text/javascript" src="http://localhost:8090/assets/main.js"></script>
+</body>
+</html>
--- a/browser/main/index.jsx
+++ b/browser/main/index.jsx
@@ -0,0 +1,34 @@
+require('../styles/main/index.styl')
+
+var React = require('react/addons')
+
+var ReactRouter = require('react-router')
+var Route = ReactRouter.Route
+var DefaultRoute = ReactRouter.DefaultRoute
+
+var MainContainer = require('./Containers/MainContainer.jsx')
+
+var LoginContainer = require('./Containers/LoginContainer.jsx')
+var RegisterContainer = require('./Containers/RegisterContainer.jsx')
+
+var PlanetContainer = require('./Containers/PlanetContainer.jsx')
+
+var Dashboard = require('./Containers/DashboardContainer.jsx')
+var SnippetContainer = require('./Containers/SnippetContainer.jsx')
+var BlueprintContainer = require('./Containers/BlueprintContainer.jsx')
+
+var routes = (
+  <Route path='/' handler={MainContainer}>
+    <Route name='planet' path='planet/:planetName' handler={PlanetContainer}>
+      <DefaultRoute name='dashboard' handler={Dashboard}/>
+      <Route name='snippets' handler={SnippetContainer}/>
+      <Route name='blueprint' handler={BlueprintContainer}/>
+    </Route>
+    <Route name='login' path='login' handler={LoginContainer}/>
+    <Route name='register' path='register' handler={RegisterContainer}/>
+  </Route>
+)
+
+ReactRouter.run(routes, ReactRouter.HashLocation, function (Root) {
+  React.render(<Root/>, document.getElementById('content'))
+})
--- a/browser/styles/main/components/SideNavigator.styl
+++ b/browser/styles/main/components/SideNavigator.styl
@@ -0,0 +1,50 @@
+.SideNavigator
+  absolute top bottom left
+  width 200px
+  border-right solid 2px brandColor
+  padding 10px
+  box-sizing border-box
+  .nav-header
+    clearfix()
+    margin-bottom 15px
+    .planet-name
+      float left
+      line-height 30px
+      font-size 1.1em
+    .menu-btn
+      float right
+      display block
+      font-size 0.8em
+      color lightButtonColor
+      border solid 2px lightButtonColor
+      box-sizing border-box
+      circle()
+      background-image none
+      background-color transparent
+      width 30px
+      height 30px
+      text-align center
+      cursor pointer
+      transform scale(0.8)
+      &:active, &.active, &:hover, &.hover
+        background-color lightButtonColor
+        color white
+  nav
+    a
+      display block
+      position relative
+      right 0px
+      box-sizing border-box
+      width 190px
+      padding 15px 15px
+      margin 10px 0
+      text-decoration none
+      border-radius left 10px
+      background-color transparent
+      color textColor
+      transition 0.1s
+      &:hover, &.hover
+        background-color hoverBackgroundColor
+      &:active, &.active
+        background-color brandColor
+        color white
--- a/browser/styles/main/containers/DashboardContainer.styl
+++ b/browser/styles/main/containers/DashboardContainer.styl
@@ -0,0 +1,15 @@
+.DashboardContainer
+  fullsize()
+  box-sizing border-box
+  overflow-y auto
+  padding 10px
+  .jumbotron
+    background-color brandColor
+    color white
+    padding 65px 20px
+    font-size 3.5em
+    margin-bottom 25px
+  h2, h3
+    margin-bottom 15px
+  p
+    margin-bottom 25px
--- a/browser/styles/main/containers/SnippetContainer.styl
+++ b/browser/styles/main/containers/SnippetContainer.styl
@@ -0,0 +1,53 @@
+.SnippetContainer
+  fullsize()
+  .tags
+    a
+      margin 0 2px
+  .SnippetList
+    absolute top bottom left
+    width 250px
+    border-right solid 1px highlightenBorderColor
+    .search
+      border-bottom solid 1px borderColor
+      padding 5px
+      margin 0
+
+    &>ul
+      absolute bottom left right
+      top 44px
+      overflow-y auto
+      li
+        border-bottom solid 1px borderColor
+        padding 10px
+        cursor pointer
+        .callSign
+          margin-bottom 5px
+          font-weight 600
+        .description
+          margin-bottom 5px
+        .updatedAt
+          margin-bottom 5px
+          color lighten(textColor, 25%)
+          font-size 0.8em
+        &:hover, &.hover
+          background-color hoverBackgroundColor
+
+  .SnippetViewer
+    absolute top bottom right
+    left 250px
+    .viewer-header
+      height 44px
+      line-height 44px
+      padding 0 15px
+      border-bottom solid 1px borderColor
+      box-sizing border-box
+      small
+        font-size 0.5em
+    .viewer-body
+      absolute bottom left right
+      top 44px
+      .viewer-detail
+        border-bottom solid 1px borderColor
+        padding 10px
+        .description
+          margin-bottom 15px
--- a/browser/styles/main/index.styl
+++ b/browser/styles/main/index.styl
@@ -0,0 +1,104 @@
+@import '../../../node_modules/nib/lib/nib'
+@import '../vars'
+@import '../mixins/*'
+global-reset()
+@import '../shared/*'
+@import './components/*'
+@import './containers/*'
+
+body
+  font-family "Lato"
+  color textColor
+
+h1
+  font-size 2em
+h2
+  font-size 1.5em
+h3
+  font-size 1.3em
+h4
+  font-size 1.15em
+a
+  color brandColor
+  &:visited{
+    color brandColor
+  }
+
+hr
+  border-top none
+  border-bottom solid 1px borderColor
+  margin 25px 0
+
+.text-center
+  text-align center
+
+.form-group
+  margin-bottom 15px
+  &>label
+    display block
+    margin-bottom 5px
+  &>input[type='text'], &>input[type='password']
+    display block
+    border solid 2px borderColor
+    padding 0 15px
+    font-size 1em
+    height 33px
+    border-radius 16.5px
+    box-sizing border-box
+    width 100%
+
+
+#content
+  fullsize()
+
+.LoginContainer, .RegisterContainer
+  width 400px
+  margin 15px auto
+  padding 25px 15px
+  box-sizing border-box
+  h1, h2
+    margin 5px auto 25px
+
+.PlanetNavigator
+  background-color #032B35
+  color white
+  absolute left top bottom
+  width 50px
+  text-align center
+  box-sizing border-box
+  ul>li
+    padding 10px 3px
+    border-bottom solid 1px invBorderColor
+    &.active
+      background-color brandColor
+      a
+        background-color white
+    a
+      display block
+      width 44px
+      height 44px
+      text-align center
+      background-color #4D4D4D
+      color black
+      line-height 44px
+      font-size 1.1em
+      cursor pointer
+      circle()
+      transition 0.1s
+      &:hover, &:active
+        background-color white
+    img
+      circle()
+      width 44px
+      height 44px
+
+.PlanetContainer
+  fullsize()
+.PlanetMain
+  absolute top bottom right
+  left 50px
+
+
+.Screen
+  absolute top bottom right
+  left 200px
--- a/browser/styles/mixins/circle.styl
+++ b/browser/styles/mixins/circle.styl
@@ -0,0 +1,3 @@
+circle()
+  border-radius 50%
+  overflow hidden
--- a/browser/styles/mixins/fullsize.styl
+++ b/browser/styles/mixins/fullsize.styl
@@ -0,0 +1,6 @@
+fullsize()
+  position absolute
+  top 0
+  left 0
+  right 0
+  bottom 0
--- a/browser/styles/shared/btn.styl
+++ b/browser/styles/shared/btn.styl
@@ -0,0 +1,44 @@
+.btn-primary, .btn-default
+  border-style solid
+  border-width 2px
+  background-image none
+  height 44px
+  padding 0 15px
+  border-radius 22px
+  box-sizing border-box
+  font-size 1.1em
+  font-weight 600
+  transition 0.1s
+  cursor pointer
+
+.btn-block
+  display block
+  width 100%
+  margin 0 auto
+
+.btn-square
+  display inline-block
+  width 44px
+  padding 0
+
+.btn-sm
+  height 32px
+  border-radius 16px
+  &.btn-square
+    width 32px
+
+.btn-primary
+  border-color brandBorderColor
+  background-color transparent
+  color brandColor
+  &:hover, &.hover, &:active, &.active
+    color white
+    background-color brandColor
+
+.btn-default
+  border-color invBorderColor
+  background-color transparent
+  color invBorderColor
+  &:hover, &.hover, &:active, &.active
+    color white
+    background-color invBorderColor
--- a/browser/styles/vars.styl
+++ b/browser/styles/vars.styl
@@ -0,0 +1,15 @@
+borderColor = #E8E8E8
+highlightenBorderColor = darken(borderColor, 20%)
+invBorderColor = #404849
+brandBorderColor = #3FB399
+
+buttonBorderColor = #4C4C4C
+
+lightButtonColor = #898989
+
+brandColor = #2BAC8F
+
+textColor = #434343
+
+backgroundColor= white
+hoverBackgroundColor= transparentify(#444, 7%)
--- a/main.js
+++ b/main.js
@@ -0,0 +1,38 @@
+var app = require('app')  // Module to control application life.
+var BrowserWindow = require('browser-window')  // Module to create native browser window.
+
+// Report crashes to our server.
+require('crash-reporter').start()
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the javascript object is GCed.
+var mainWindow = null
+
+// app.on('window-all-closed', function () {
+//   if (process.platform !== 'darwin') app.quit()
+// })
+
+
+app.on('ready', function () {
+  makeNewMainWindow()
+
+  function makeNewMainWindow () {
+    console.log('new Window!')
+    mainWindow = new BrowserWindow({
+      width: 920,
+      height: 640,
+      'web-preferences': {
+          'overlay-scrollbars': true
+        }
+      })
+
+    mainWindow.loadUrl('file://' + __dirname + '/browser/main/index.electron.html')
+
+    mainWindow.on('closed', function () {
+      console.log('main closed')
+      mainWindow = null
+      app.dock.hide()
+    })
+    app.dock.show()
+  }
+})
--- a/npm-debug.log
+++ b/npm-debug.log
@@ -0,0 +1,36 @@
+0 info it worked if it ends with ok
+1 verbose cli [ 'node', '/usr/local/bin/npm', 'start' ]
+2 info using npm@2.11.2
+3 info using node@v0.12.4
+4 verbose node symlink /usr/local/bin/node
+5 verbose run-script [ 'prestart', 'start', 'poststart' ]
+6 info prestart codexen-app-builder@0.2.0
+7 info start codexen-app-builder@0.2.0
+8 verbose unsafe-perm in lifecycle true
+9 info codexen-app-builder@0.2.0 Failed to exec start script
+10 verbose stack Error: codexen-app-builder@0.2.0 start: `npm run serve | npm run dev`
+10 verbose stack Exit status 1
+10 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:213:16)
+10 verbose stack     at EventEmitter.emit (events.js:110:17)
+10 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
+10 verbose stack     at ChildProcess.emit (events.js:110:17)
+10 verbose stack     at maybeClose (child_process.js:1015:16)
+10 verbose stack     at Process.ChildProcess._handle.onexit (child_process.js:1087:5)
+11 verbose pkgid codexen-app-builder@0.2.0
+12 verbose cwd /Users/dickchoi/codexen/codexen-app
+13 error Darwin 14.3.0
+14 error argv "node" "/usr/local/bin/npm" "start"
+15 error node v0.12.4
+16 error npm  v2.11.2
+17 error code ELIFECYCLE
+18 error codexen-app-builder@0.2.0 start: `npm run serve | npm run dev`
+18 error Exit status 1
+19 error Failed at the codexen-app-builder@0.2.0 start script 'npm run serve | npm run dev'.
+19 error This is most likely a problem with the codexen-app-builder package,
+19 error not with npm itself.
+19 error Tell the author that this fails on your system:
+19 error     npm run serve | npm run dev
+19 error You can get their info via:
+19 error     npm owner ls codexen-app-builder
+19 error There is likely additional logging output above.
+20 verbose exit [ 1, true ]
--- a/package.json
+++ b/package.json
@@ -3,9 +3,9 @@
  "version": "0.2.0",
  "description": "CodeXen App Builder",
  "scripts": {
-    "install": "gulp build",
-    "start": "http-server build",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "npm run serve | npm run dev",
+    "serve": "./node_modules/.bin/http-server ./browser -p 8080",
+    "dev": "webpack-dev-server --progress --colors --port 8090"
  },
  "repository": {
    "type": "git",
@@ -30,48 +30,26 @@
  },
  "homepage": "https://github.com/Rokt33r/codexen-app#readme",
  "dependencies": {
+    "@rokt33r/ace-builds": "^1.1.9",
+    "del": "^1.2.0",
    "dotenv": "^1.1.0",
-    "robotjs": "^0.1.2",
-    "node-notifier": "^4.2.1"
+    "marked": "^0.3.3",
+    "moment": "^2.10.3",
+    "node-jsx": "^0.13.3",
+    "node-notifier": "^4.2.1",
+    "react": "^0.13.3",
+    "react-router": "^0.13.3",
+    "react-tooltip": "^0.3.3"
  },
  "devDependencies": {
-    "@rokt33r/ace-builds": "^1.1.9",
-    "@rokt33r/angular-ui-ace": "^0.2.3",
-    "angular": "^1.3.15",
-    "angular-bootstrap": "^0.12.0",
-    "angular-hotkeys": "^1.4.5",
-    "angular-md5": "^0.1.7",
-    "angular-sanitize": "^1.3.15",
-    "angular-ui-router": "^0.2.15",
-    "bootstrap-styl": "^4.0.4",
-    "del": "^1.2.0",
-    "font-awesome": "^4.3.0",
-    "globby": "^2.0.0",
-    "gulp": "^3.8.11",
-    "gulp-angular-templatecache": "^1.6.0",
-    "gulp-autoprefixer": "^2.3.0",
-    "gulp-cached": "^1.1.0",
-    "gulp-changed": "^1.2.1",
-    "gulp-concat": "^2.5.2",
-    "gulp-inject": "^1.3.1",
-    "gulp-livereload": "^3.8.0",
-    "gulp-minify-css": "^1.1.1",
-    "gulp-minify-html": "^1.0.3",
-    "gulp-ng-annotate": "^0.5.3",
-    "gulp-notify": "^2.2.0",
-    "gulp-plumber": "^1.0.1",
-    "gulp-remember": "^0.3.0",
-    "gulp-rename": "^1.2.2",
-    "gulp-rev": "^4.0.0",
-    "gulp-stylus": "^2.0.3",
-    "gulp-template": "^3.0.0",
-    "gulp-uglify": "^1.2.0",
-    "marked": "^0.3.3",
-    "merge-stream": "^0.1.7",
-    "moment": "^2.10.3",
-    "run-sequence": "^1.1.0",
-    "satellizer": "^0.10.1",
-    "streamqueue": "^1.1.0",
-    "ui-select": "^0.11.2"
+    "css-loader": "^0.15.1",
+    "http-server": "^0.8.0",
+    "jsx-loader": "^0.13.2",
+    "nib": "^1.1.0",
+    "node-libs-browser": "^0.5.2",
+    "style-loader": "^0.12.3",
+    "stylus-loader": "^1.2.1",
+    "webpack": "^1.10.0",
+    "webpack-dev-server": "^1.10.1"
  }
 }
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -0,0 +1,33 @@
+module.exports = {
+  entry: {
+    main: './browser/main/index.jsx'
+  },
+  output: {
+    filename: '[name].js', //this is the default name, so you can skip it
+    publicPath: 'http://localhost:8090/assets'
+  },
+  devtool: "#inline-source-map", // Sourcemap
+  module: {
+    loaders: [
+      {
+        //tell webpack to use jsx-loader for all *.jsx files
+        test: /\.jsx$/,
+        loader: 'jsx-loader?insertPragma=React.DOM&harmony'
+      },
+      {
+        test: /\.styl$/,
+        loader: 'style-loader!css-loader!stylus-loader'
+      }
+    ]
+  },
+  externals: {
+    //don't bundle the 'react' npm package with our bundle.js
+    //but get it from a global 'React' variable
+    'react': 'React',
+    'react/addons': 'React',
+    'react-router': 'ReactRouter'
+  },
+  resolve: {
+    extensions: ['', '.js', '.jsx']
+  }
+}