partyq

partyq

Build Status

Master

Dev

Commands

• npm start runs the development server with hot-loading.
• npm test runs both server side and client side tests
• npm run lint runs eslint on files
• npm run build builds partyq for production
• npm run test:server runs server side tests
• npm run test:client runs client side tests
• npm run test:server-watch runs server tests when files change
• npm run test:client-watch runs client tests when files change
• npm run test:watch runs tests when files change

Layout

• /test General tests that do not fit in front or backend.
  • /test/learning various non-application tests. Used to experiment with a new API or get comformable with the testing framework.

Frontend

• /app root of front end code
• /app/test front end tests

Backend

• /server contains the main backend source code for partyq. Reducer, Redux store, and core functionality.
• /server/test contains chai tests for the partyq backend.

Packages

React

Redux

Redux manages the state in partyq. We want to represent our application's state as an immutable tree data structure. We change the state by applying function to the state tree. Also uses react-redux to play nicely with react.

• backend reducer
• backend store
• frontend reducer

Express

Framework used on backend

Webpack

Module bundler. See

• webpack.config.js for development config
• webpack.production.config.js for production config Based on the configurations from webpack-express-boilerplate.

Other Dependencies

• Immutable for immutable data structure to promote pure functions and functional style.
  • See /tests/learning/immutable_spec.js for an example of how to use and test the immutable data structures.
  • Full API Docs
• Socket.io abstracts websockets for realtime applications

Dev Dependencies

• jsdom implements the DOM in node, so we don't need to use karma for tests.
• webpack-dev-middleware with webpack-dev-server allows for serving of files to a public path without building each time.
• webpack-hot-middleware allows for hot reloading while running own server.
• Babel to support ES6 features such as modules
• Mocha and Chai for unit testing.
  • Chai Immutable for using immutable with chai tests.
• Eslint ensures coding standards. Current settings can be found in .eslintrc.
  • Extends the airbnb eslint configuration for ES6.
  • babel-eslint to lint ES6 code.
  • eslint-plugin-react to lint React and jsx parts.
• pre-commit to run lint and test before each commit
• rimraf to clear the dist folder before starting partyq or building partyq.
• postcss-loader
• autoprefixer "Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you."
• stats-webpack-plugin get the stats of the webpack build.
• extract-text-webpack-plugin extract text from bundle into a file.

References

• Full-Stack Redux Tutorial
• The Ultimate Webpack Setup
• Redux Easy Boilerplate