uxboard-core

📋 UX achivement visualization tool

Requirements

• Node (>= 8.0.0)

Installation

Using yarnpkg

$ yarn global add create-react-app
$ create-react-app your-app-name
$ cd your-app-name
$ yarn add @material-ui/core @material-ui/icons firebase react-dnd react-dnd-html5-backend
$ yarn add @gyugyu/uxboard-core
$ cat << EOS
{
  "databasePrefix": "uxboard",
  "firebase": {
    "apiKey": "yourFirebaseApiKey",
    "authDomain": "your-auth-domain.firebaseapp.com",
    "databaseURL": "https://your-database-url.firebaseio.com"
  }
}
EOS > src/uxboard.json
$ node_modules/.bin/uxboardify ./src/uxboard.json

Using npm

$ npm install -g create-react-app
$ create-react-app your-app-name
$ cd your-app-name
$ npm install -s @material-ui/core @material-ui/icons firebase react-dnd react-dnd-html5-backend
$ npm install -s @gyugyu/uxboard-core
$ cat << EOS
{
  "databasePrefix": "uxboard",
  "firebase": {
    "apiKey": "yourFirebaseApiKey",
    "authDomain": "your-auth-domain.firebaseapp.com",
    "databaseURL": "https://your-database-url.firebaseio.com"
  }
}
EOS > src/uxboard.json
$ node_modules/.bin/uxboardify ./src/uxboard.json

Usage

index.js

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';
import React from 'react';
import ReactDOM from 'react-dom';
import FirebaseContext from 'uxboard-core/firebase/FirebaseContext';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import config from './uxboard.json'

firebase.initializeApp(config.firebase)
const authProvider = new firebase.auth.GoogleAuthProvider()
authProvider.setCustomParameters({ hd: 'pepabo.com' })

ReactDOM.render(
  <FirebaseContext.Provider
    value={{
      authProvider,
      databasePrefix: config.databasePrefix,
      firebase
    }}
  >
    <App />
  </FirebaseContext.Provider>, document.getElementById('root'));
registerServiceWorker();

App.js

import React, { Component, Fragment } from 'react';
import AddDimensionButton from 'uxboard-core/AddDimensionButton';
import AppBar from 'uxboard-core/AppBar'; // optional
import UxBoard from 'uxboard-core/UxBoard';

class App extends Component {
  render() {
    return (
      <Fragment>
        <AppBar title='UX Board' />
        <UxBoard />
        <AddDimensionButton />
      </Fragment>
    );
  }
}

export default App;

Then npm(yarn) start.

Publish

GitHub Pages

Add your GitHub Pages URL to "homepage" at package.json. Then,

$ yarn add -D gh-pages
$ yarn build
$ node_modules/.bin/gh-pages -d build

# or

$ npm install -D gh-pages
$ npm run build
$ node_modules/.bin/gh-pages -d build