πŸ“‹ UX achivement visualization tool
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
AddDimensionButton
AppBar
Auth
UxBoard
firebase
uxboardify
.gitignore
Makefile
README.md
package.json
tsconfig.json

README.md

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