React Redux Boilerplate

Ready to go monorepo frontend boilerplate for web and mobile app development. Realized with redux, redux-saga and react. Written in TypeScript.

Motivation

Sometimes it is hard to deliver good quality software due to economic time pressure. With this project I tried to provide a best practise frontend boilerplate. Hopefully saving nerves of developers and other stakeholders.

Knowledge base

To fully understand this project you should be familiar with the technologies below.

• lerna (monorepo management)
• react
• redux (with react)
• redux-saga
• jest (unit testing)
• react-test-renderer (react component testing)
• redux-saga-test-plan (integration testing)
• eslint (code linting)
• webpack (web app bundling)

Features

1. Http foundation and api template module:
   • Request handling with axios library in the background
   • Explicit type definitions e.g. Request, Response and saga generator functions per endpoint.
2. Basic jwt authentication:
   • jwt exp in UTC time, see mock.http.request.dispatcher.ts as the mock for several endpoints in dev mode
   • automatic token refresh, see src/packages/src/common/authentication/domain/flow.ts
   • ideally the authentication server responds with the [jwtSecret] cookie (httpOnly and sameSite) and [jwtHeader].[jwtPayload] in the response body, to be protected against XSS and CSRF attacks.
   • auth user generally saved at session storage, when required also at local storage - according to remember me flag
   • auth user type visible at /src/packages/src/common/types/auth-user/domain/types.ts
3. Toasts integration:
   • Smooth intro animation by automatically grouping new messages together
   • Grouping of messages in toasts (success, info, warning, error toasts)
   • Configurable options like (animation times, closable message, automatic close etc.)
4. Form components in redux:
   • Handling errors recursively trough every (partial) state tree (see form module)
   • Available form elements and customizable reducers (e.g. have a look at the login page's reducer)
5. Loader integration
   • Internal counter to show and hide a loader considering concurrent showLoader and hideLoader calls.
6. Test integration with jest, react-test-renderer and redux-saga-test-plan
7. Code linting with eslint
8. More: see the docs

Web app

1. Bootstrap 4 SCSS and material icons integration
2. Styling with styled-components
3. Dynamic browser support. Have a look at browsersl.ist (paste the content of .browserslistrc)

Mobile app

The purpose of the mobile app is a demonstration of using domain layer code in another view environment. This was achieved by a small react native implementation of the packages/common/toaster module.

Documentation

• environment - installation, how to start development, other scripts
• architecture - structure and rules of the codebase
• coding guidelines - best practices and common conventions
• api documentation - how to use existing modules

Appreciation

Many thanks to the awesome react community.