Skip to content

Commit

Permalink
updating docs
Browse files Browse the repository at this point in the history
  • Loading branch information
bishopZ committed Oct 23, 2015
1 parent 5b1cf8d commit 97d0282
Showing 1 changed file with 37 additions and 12 deletions.
49 changes: 37 additions & 12 deletions Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,54 @@

## Motivation

A starter project for publishing a single-page web app that creates both a react/flux development environment and live production server.
Kabuki is a starter project for publishing a single-page web app with web animators in mind. It creates both a react/flux development environment and live production server.

The aim of this repo is to incorporate the best practices to building a non-trivial apps with Reactjs v0.14 and Node.
The react application comes pre-built with one-directional flux architecture and example components that make use of the React-Motion library.

The aim of this repo is to incorporate the best practices to building a non-trivial apps with Reactjs v0.14 that include Heroku support.

Other boilerplates that include Heroku support also require the MongoDB addon, which is freenow, but may not be in the future. This library does not require any Heroku addons.

| React + flux (alt) + Immutable + Node/Express + Heroku |

## Demo site:
## Heroku Demo Site

[https://kabuki.herokuapp.com/](https://kabuki.herokuapp.com/)
[https://kabuki.venicetexas.com/](https://kabuki.venicetexas.com/)

## The Technology Stack

### Server

Heroku, Node, Express
• Heroku
• Node
• Express

### Development Environment

Webpack, Babel, Sass, ESLint, Uglifiy
• Webpack
• Babel
• Sass
• ESLint
• Uglifiy

#### Why Webpack?

While Gulp is an easier to use syntax, Webpack provides a more professional approach and is quickly gaining market share.

### Client

Flux Architecture with Immutable, React and Alt
• React v0.14
• Flux Architecture with Immutable and Alt
• React-Motion for preformant animation

#### Why alt?

alt is a wrapper on flux. I found alt's implementation to be clean and simple compared to flux with much the same speed ratings.

#### Why React-Motion?

For 95% of use-cases of animating components, we don't have to resort to using hard-coded easing curves and duration. Set up a stiffness and damping for your UI element, and let the magic of physics take care of the rest. This way, you don't have to worry about petty situations such as interrupted animation behavior. It also greatly simplifies the animation API and provides a more powerful alternative for React's TransitionGroup.

## Installation

0. Install npm
Expand All @@ -51,28 +71,33 @@ Or run `npm run production` to run the server in production mode, without lintin

0. Install the heroku toolbelt
1. `heroku create`
2. `heroku config:set NODE_ENV=production`
3. `heroku apps:rename newname`
4. `git push heroku master`
5. `heroku open`
2. `heroku apps:rename newname`
3. `git push heroku master`
4. `heroku open`

## Directories

`/client` contains the react files that construct the site. Run webpack while editing these files to see your changes live in the browser.
`/client/main.jsx` is the main point of entry for the React application.

`/public` contains the public, static resources served by the server, and the rendered application javascript/css.

`/server` contains files related to the node server.
`/server/app.js` creates the node server
`/server/routes.js` creates the node server's routing
`/server/view.ejs` is the HTML view for the React's single-page application

## How to Contribute:

1. Any suggestions/improvements/bugs can be in the form of Pull Requests, or creating an issue.
1. Any suggestions/improvements/comments/bugs can be in the form of Pull Requests, or creating an issue.
2. Coding guidelines:
- [Airbnb's Style Guide](https://github.com/airbnb/javascript)
- [bendc's frontend guidelines](https://github.com/bendc/frontend-guidelines)

## Credits

[react-motion](https://github.com/chenglou/react-motion)

[react-webpack-node](https://github.com/choonkending/react-webpack-node)
Alt, Immutable, React, Sass, Webpack, Node, MongoDB, Heroku

Expand Down

0 comments on commit 97d0282

Please sign in to comment.