Star

Yet another React starter kit

Playing around with es6 and React/React-Native. Based on pdxlivebus and other starter kits.

Idea

The idea is to have an initial set of high order components for easily compose your own flavoured MVP in no time.

The components can be added as a one line html tag, and are encapsulating view and state manipulation using Redux.

For example, in order to have geo location support, just add <GeoLocation/> tag. Then, location will be watched and the global state state.geo.location will be updated accordingly. In any component where the location is needed, just connect it to Redux and get the value injected:

@connect(state => ({
  location: state.geo.location
}))
class SomeComponent extends Component {
  render() {
    ...
    <GeoLocation/>
    <div>Location: {this.props.location}</div>
    ...
  }
}

High Order Components

Some of the components included in the components folder:

LoggedIn - google login
Map - leaflet map view
Header, Bottom - Material-UI app bar and bottom navigation
CurrentUser - persist current user changes including profile and geo location
Route - a very simple routing

For model view and edit, some Material-UI components are provided for card/grid/table views, such as:

AvatarCardView
TableView
GridView
EditCardView
PaperEditView

For model operations, ModelActions can be used for executing async rest crud operations against the server via sequelizeRouter

ViewActions is an optional simple helper, encapsulating common model view behaviours, such as local models management, mode changes, show dialog and message.

Example of a model component:

@connect(state => ({
  currentUser: state.logged.currentUser
}), (dispatch, props) => bindActionCreators({...ModelActions('user')}, dispatch))
class MyModel extends Component {

  state = {}
  
  componentWillMount() {
    this.viewActions = ViewActions('user', this);
    this.viewActions.onLoad(); // on load query and set state
  }
  
  render() {
    const {users, editModel, mode} = this.state; // injected by viewActions
    const fields = ['username', 'email', 'location']
    ...
    { mode == 'view' && <AvatarCardView models={users} fields={fields} actions={this.viewActions}/> }
    { (mode == 'add' || mode == 'edit') && <CardEditView model={editModel} fields={field} actions={this.viewActions}/> }
    ...
  }
  ...

Server side

web-server/server.js is an Express application, with Webpack hot reload and Sequelize support.

SequelizeRouter will be used for adding rest router for each Sequelize model definition, exposing:

GET /v1/model?query - find
GET /v1/model/:id
POST /v1/model {entity} - upsert
DELETE /v1/model/:id

On the client side, ModelActions is used for sending requests to SequelizeRouter.

Example

So when the Main component looks like:

...
import config from './config';
const routes = config.app.routes;

export default class Main extends Component {

  render() {
    return (
      <div>
        <Header title={app.name} routes={routes}/>

        <LoggedIn googleAppId={...} guest={true} route={routes.Map}>

          <GeoLocation/>
          <CurrentUser/>

          <Route on={routes.Map}>
            <VehicleSocket/>
            <Map/>
          </Route>

          <Route on={routes.Users}>
            <Users/>
          </Route>

          <Route on={routes.Vehicles}>
            <VehicleSocket/>
            <Vehicles/>
          </Route>

          <Route on={routes.Products}>
            <Products/>
          </Route>

          <Route on={routes.Shops}>
            <Shops/> 
          </Route>

        </LoggedIn>
      </div>
    )
  }
}

The result is:

How to run

clone https://github.com/ronmamo/star.git
Look at web-server/config.js and app/config.js
Install PostgreSQL, CREATE DATABASE stardb
Configure app/config.js with google app clientId (using console.developers.google.com)
npm install
npm run dev

Techs

Front

React, React native
Redux
Webapck w/ hot reload
Material-UI
Google login (used in LoggedIn component)
Leaflet OpenStreetMap
Helmet
orchestrate.io - the-very-cool orchestrate db as a service (optional)
socket.io client - for streaming (used in VehicleSocket

Server

Express
Webpack
Sequelize
Postgresql

Laters

Have an initial set of components for easily building your own flavoured MVP
PostGis support including geo queries
Paypal integration
Redis and/or Graphql support
Image uploading
Make it work for android and ios...
Maybe use Springboot instead/supplement of nodejs web/api server

ronmamo/star