Init file structure

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": ["react", "es2015"],
+  "plugins": [
+    "react-hot-loader/babel"
+  ]
+}

.eslintrc

@@ -0,0 +1,14 @@
+{
+  "parser": "babel-eslint",
+  "extends": "airbnb",
+  "globals": {
+    "__DEV__": true
+  },
+  "env": {
+    "browser": true,
+    "mocha": true
+  },
+  "rules": {
+    "react/jsx-filename-extension": 0,
+  }
+}

.gitignore

@@ -1 +1,17 @@
-node_modules
+# Logs
+npm-debug.log*
+
+# Dependency directory
+node_modules
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Production Build
+build/
+
+.DS_Store
+.idea/

.stylelintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-standard",
+}

README.md

@@ -1,2 +1,19 @@
 # Kizuna
 Friendship Game.  For Vote, Rank,  QA ...
+
+
+### Run Project For Dev Mode
+
+```
+npm install
+npm start
+```
+
+### Run lint
+
+```
+for all
+npm run lint
+or
+npm run eslint
+```

package.json

@@ -1,10 +1,16 @@
 {
   "name": "kizuna-platform",
-  "version": "1.0.0",
+  "version": "0.0.1",
   "description": "Friendship Game.  For Vote, Rank,  QA ...",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "npm run clean && webpack --config ./webpack.prod.config.js",
+    "clean": "rm -rf build",
+    "eslint": "./node_modules/.bin/eslint src test",
+    "lint": "npm run eslint && npm run stylelint",
+    "start": "./node_modules/.bin/webpack-dev-server --inline --devtool eval --progress --colors --hot --history-api-fallback --content-base dist",
+    "stylelint": "./node_modules/.bin/stylelint \"src/**/*.scss\" --syntax scss",
+    "test": "mocha test"
   },
   "repository": {
     "type": "git",
@@ -22,5 +28,50 @@
   "bugs": {
     "url": "https://github.com/esbb48/Kizuna/issues"
   },
-  "homepage": "https://github.com/esbb48/Kizuna#readme"
+  "homepage": "https://github.com/esbb48/Kizuna#readme",
+  "dependencies": {
+    "babel-polyfill": "^6.9.1",
+    "grommet": "^0.6.10",
+    "react": "^15.3.0",
+    "react-dom": "^15.3.0",
+    "react-hot-loader": "^3.0.0-beta.1",
+    "react-redux": "^4.4.5",
+    "react-router": "^2.6.1",
+    "react-router-redux": "^4.0.5",
+    "redux": "^3.5.2",
+    "redux-action": "^1.0.0",
+    "redux-saga": "^0.11.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^6.3.7",
+    "babel-core": "^6.11.4",
+    "babel-eslint": "^6.1.2",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-transform-object-rest-spread": "^6.8.0",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.11.1",
+    "eslint": "^3.2.2",
+    "eslint-config-airbnb": "^10.0.0",
+    "eslint-plugin-import": "^1.12.0",
+    "eslint-plugin-jsx-a11y": "^2.0.1",
+    "eslint-plugin-react": "^6.0.0",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "html-webpack-plugin": "^2.22.0",
+    "mocha": "^3.0.2",
+    "node-sass": "^3.8.0",
+    "postcss-loader": "^0.10.1",
+    "precss": "^1.4.0",
+    "sass-loader": "^4.0.0",
+    "should": "^11.1.0",
+    "stylelint": "^7.1.0",
+    "stylelint-config-standard": "^12.0.0",
+    "url-loader": "^0.5.7",
+    "webpack": "^1.13.1",
+    "webpack-dev-server": "^1.14.1",
+    "webpack-md5-hash": "0.0.5"
+  },
+  "engines": {
+    "node": "v6.2.0",
+    "npm": "3.8.9"
+  }
 }

src/Auth/AuthContainer.js

@@ -0,0 +1,29 @@
+import React, { PropTypes } from 'react';
+// import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import Header from 'grommet/components/Header';
+
+function AuthContainer({ children }) {
+  return (
+    <div>
+      <Header>My Header</Header>
+      {/* this will render the child routes */}
+      <div>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+AuthContainer.propTypes = {
+  children: PropTypes.object,
+};
+
+function mapStateToProps(/* state */) {
+  return {};
+}
+
+function mapDispatchToProps(/* dispatch */) {
+  return {};
+}
+export default connect(mapStateToProps, mapDispatchToProps)(AuthContainer);

src/Root/ErrorPage.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function ErrorPage() {
+  return (
+    <div>
+      ErrorPage
+    </div>
+  );
+}

src/Root/LandingPage.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function LandingPage() {
+  return (
+    <div>
+      LandingPage
+    </div>
+  );
+}

src/Root/Root.js

@@ -0,0 +1,19 @@
+import React, { PropTypes } from 'react';
+import { Provider } from 'react-redux';
+import { Router } from 'react-router';
+
+import routes from './routes';
+
+
+export default function Root({ store, history }) {
+  return (
+    <Provider store={store}>
+      <Router history={history} routes={routes} />
+    </Provider>
+  );
+}
+
+Root.propTypes = {
+  history: PropTypes.object.isRequired,
+  store: PropTypes.object.isRequired,
+};

src/Root/index.scss

@@ -0,0 +1,4 @@
+body {
+  height: 100%;
+  width: 100%;
+}

src/Root/rootReducer.js

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux';
+import { routerReducer as routing } from 'react-router-redux';
+
+const rootReducer = combineReducers({
+  routing,
+});
+
+export default rootReducer;

src/Root/rootSaga.js

@@ -0,0 +1,6 @@
+// import { fork } from 'redux-saga/effects';
+
+export default function* rootSaga() {
+  yield [
+  ];
+}

src/Root/routes.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Route } from 'react-router';
+import AuthContainer from '../Auth/AuthContainer';
+import ErrorPage from './ErrorPage';
+import LandingPage from './LandingPage';
+
+export default (
+  <Route path="/" component={AuthContainer}>
+    <Route path="home" component={LandingPage} />
+    <Route path="*" component={ErrorPage} />
+  </Route>
+);

src/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Kizuna</title>
+    <!-- Setting the right viewport -->
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <link rel='stylesheet prefetch' href='http://grommet.io/assets/latest/css/grommet.min.css'>
+  </head>
+  <body>
+    <div id="root">
+    </div>
+  </body>
+</html>

src/index.js

@@ -0,0 +1,40 @@
+/* eslint global-require: 0 */
+import 'babel-polyfill';
+import React from 'react';
+import { render } from 'react-dom';
+import { browserHistory as history } from 'react-router';
+import { syncHistoryWithStore } from 'react-router-redux';
+import { AppContainer } from 'react-hot-loader';
+
+import rootSaga from './Root/rootSaga';
+
+import configureStore from './store/configureStore';
+import Root from './Root/Root';
+
+const store = configureStore({ history });
+
+const syncedHistory = syncHistoryWithStore(history, store);
+
+const rootElement = document.getElementById('root');
+
+store.runSaga(rootSaga);
+
+render((
+  <AppContainer>
+    <Root store={store} history={syncedHistory} />
+  </AppContainer>
+  ), rootElement
+);
+
+if (module.hot) {
+  module.hot.accept('./Root/Root', () => {
+    const NextApp = require('./Root/Root').default;
+
+    render((
+      <AppContainer>
+        <NextApp store={store} history={syncedHistory} />
+      </AppContainer>
+      ), rootElement
+    );
+  });
+}

src/store/configureStore.js

@@ -0,0 +1,22 @@
+import { compose, createStore, applyMiddleware } from 'redux';
+import { routerMiddleware } from 'react-router-redux';
+import createSagaMiddleware, { END } from 'redux-saga';
+import rootReducer from '../Root/rootReducer';
+// import rootSaga from '../Root/rootSaga';
+
+export default function configureStore({ initialState = {}, history }) {
+  const route = routerMiddleware(history);
+  const sagaMiddleware = createSagaMiddleware();
+  const store = createStore(
+    rootReducer,
+    initialState,
+    compose(
+      applyMiddleware(route, sagaMiddleware)
+    )
+  );
+
+  store.runSaga = sagaMiddleware.run;
+  store.close = () => store.dispatch(END);
+
+  return store;
+}

test/mocha.opts

@@ -0,0 +1,3 @@
+--compilers js:babel-core/register
+--require should
+--require babel-polyfill

webpack.config.js

@@ -0,0 +1,56 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const PORT = process.env.PORT || 3000;
+
+module.exports = {
+  devtool: 'cheap-module-eval-source-map',
+  entry: [
+    'react-hot-loader/patch',
+    `webpack-dev-server/client?http://localhost:${PORT}`,
+    'webpack/hot/only-dev-server',
+    './src/index.js',
+  ],
+  module: {
+    loaders: [
+      {
+        test: /\.js(x?)$/,
+        exclude: /node_modules/,
+        loaders: ['babel'],
+      }, {
+        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot)$/,
+        loader: 'url',
+        query: {
+          name: '[path][name].[ext]?[hash]',
+          limit: 500,
+        },
+      }, {
+        test: /\.scss$/,
+        loaders: [
+          'style?sourceMap',
+          'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
+          'postcss',
+          'sass?sourceMap',
+        ],
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['', '.js', '.jsx'],
+  },
+  output: {
+    filename: 'bundle.js',
+    path: `${__dirname}/dist`,
+    publicPath: '/',
+  },
+  devServer: {
+    port: PORT,
+  },
+  postcss: [
+    require('autoprefixer'),
+    require('precss'),
+  ],
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './src/index.html',
+    }),
+  ],
+};