Skip to content

IanOvenden/mwa

Repository files navigation

MODERN REACT WEB APP BOILERPLATE

A React app boilerplate leveraging the latest technology stack for performant, responsive web apps. Currently incorporating TODO application code for example.

FRAMEWORK

CORE

React

https://facebook.github.io/react

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

STATE MANAGEMENT

Redux

http://redux.js.org

Redux is a predictable state container for JavaScript apps.

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.

OFFLINE

Redux Offline

https://github.com/jevakallio/redux-offline

Persistent Redux store for Reasonaboutable:tm: Offline-First applications, with first-class support for optimistic UI. Use with React, React Native, or as standalone state container for any web app.

BUILD CHAIN

WEBPACK

https://webpack.js.org

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows to load parts for the application on demand. Through "loaders," modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

LINTING

JAVASCRIPT

http://eslint.org

ESLint is an open source project originally created by Nicholas C. Zakas in June 2013. Its goal is to provide a pluggable linting utility for JavaScript.

CSS

https://stylelint.io

A mighty, modern CSS linter that helps you enforce consistent conventions and avoid errors in your stylesheets.

AUTOMATED DOCUMENTATION

JAVASCRIPT

JSDoc

http://usejsdoc.org

JSDoc 3 is an API documentation generator for JavaScript, similar to Javadoc or phpDocumentor. You add documentation comments directly to your source code, right alongside the code itself. The JSDoc tool will scan your source code and generate an HTML documentation website for you.

Template theming https://github.com/docstrap/docstrap

CSS

TODO

TESTING

UNIT TESTING

Mocha

https://mochajs.org

Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases

Chai

http://chaijs.com

Chai is a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework.

Sinon

http://sinonjs.org/

Standalone test spies, stubs and mocks for JavaScript. Works with any unit testing framework.

Redux Mock Store

http://arnaudbenard.com/redux-mock-store

A mock store for your testing your redux async action creators and middleware

Nock

https://github.com/node-nock/nock

HTTP mocking and expectations library

Enzyme

https://github.com/airbnb/enzyme

Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.

JSDom Global

https://github.com/tmpvar/jsdom

A JavaScript implementation of the WHATWG DOM and HTML standards, for use with Node.js.

Mock Socket

https://github.com/thoov/mock-socket

Javascript mocking library for websockets and socket.io

FUNCTIONAL TESTING

Webdriver IO

http://webdriver.io

WebDriver bindings for Node.js

WDIO Selenium Standalone Service

https://github.com/webdriverio/wdio-selenium-standalone-service

This service helps you to run Selenium seamlessly when running tests with the WDIO testrunner. It uses the well known selenium-standalone NPM package that automatically setups the standalone server and all required driver for you.

Selenium Standalone

https://github.com/vvo/selenium-standalone

Command line or programmatic install and launch of selenium standalone server, chrome driver, internet explorer driver, firefox driver and phantomjs

Selenium

http://www.seleniumhq.org

Selenium automates browsers. That's it! What you do with that power is entirely up to you. Primarily, it is for automating web applications for testing purposes, but is certainly not limited to just that. Boring web-based administration tasks can (and should!) be automated as well.

TODO

1 Refactor stages components to "boards".

2 Ensure test specs are using constants where applicable.

3 Implement websocket server online check. Only attempt comms if it is.

4 Complete unit testing for Dragon Drop

5 Break out Dragon Drop into it's own repo?

About

React App Template

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published