PC Checker Client

Requirements

• node ^4.2.0
• npm ^3.0.0

Features

• React (^15.0.0)
• Redux (^3.0.0)
  • react-redux (^4.0.0)
  • redux-thunk middleware
• react-router (^2.0.0)
  • Asynchronous routes configured with dependencies and reducers
• react-router-redux (^4.0.0)
• Webpack
  • Vanilla HMR using module.hot and webpack-dev-middleware
  • Code-splitting using react-router route configuration
  • Bundle splitting and CSS extraction
  • Sass w/ CSS modules, autoprefixer, and minification
• Koa (^2.0.0-alpha)
• Karma
  • Mocha w/ chai, sinon-chai, and chai-as-promised, and chai-enzyme
  • PhantomJS
  • Code coverage reports/instrumentation with isparta
• Flow (^0.22.0)
• Babel (^6.3.0)
  • babel-plugin-transform-runtime so transforms aren't inlined
  • babel-plugin-transform-react-constant-elements save some memory allocation
  • babel-plugin-transform-react-remove-prop-types remove PropTypes
• ESLint
  • Uses Standard Style by default, but you're welcome to change this.

Getting Started

Just clone the repo and install the necessary node modules:

$ git clone https://github.com/nnti3n/pc-checker-client.git
$ cd pc-checker-client
$ npm install                   # Install Node modules listed in ./package.json (may take a while the first time)
$ npm start                     # Compile and launch

Structure

The folder structure provided is only meant to serve as a guide, it is by no means prescriptive.

.
├── bin                      # Build/Start scripts
├── blueprints               # Blueprint files for redux-cli
├── build                    # All build-related configuration
│   └── webpack              # Environment-specific configuration files for webpack
├── config                   # Project configuration settings
├── interfaces               # Type declarations for Flow
├── server                   # Koa application (uses webpack middleware)
│   └── main.js              # Server application entry point
├── src                      # Application source code
│   ├── main.js              # Application bootstrap and rendering
│   ├── components           # Reusable Presentational Components
│   ├── containers           # Reusable Container Components
│   ├── layouts              # Components that dictate major page structure
│   ├── static               # Static assets (not imported anywhere in source code)
│   ├── styles               # Application-wide styles (generally settings)
│   ├── store                # Redux-specific pieces
│   │   ├── createStore.js   # Create and instrument redux store
│   │   └── reducers.js      # Reducer registry and injection
│   └── routes               # Main route definitions and async split points
│       ├── index.js         # Bootstrap main application routes with store
│       ├── Root.js          # Wrapper component for context-aware providers
│       ├── Home             # Fractal route
│       │   ├── index.js     # Route definitions and async split points
│       │   ├── assets       # Assets required to render components
│       │   ├── components   # Presentational React Components
│       │   ├── container    # Connect components to actions and store
│       │   ├── modules      # Collections of reducers/constants/actions
│       │   └── routes **    # Fractal sub-routes (** optional)
│       └── NotFound         # Capture unknown routes in component
└── tests                    # Unit tests