🦆 Reducks Starter

Reducks Starter is a highly opinionated React/Redux boilerplate based on the re-ducks approach. Live example here.

Table of Contents

1. Why
2. Why Not
3. What
4. How
5. Changelog
6. Contributing
7. License

Why

The primary goal of Reducks Starter is to be a boilerplate I myself like to use while also giving lots of examples to be easily adoptable for others.

After evaluating other boilerplates and starter projects, I didn't find any that I would be happy to use as the foundation for my own projects. I really like the ducks approach by erikras. The re-ducks extension by alexnm makes it even better. I also like to have my Redux store to be based on Immutable.js records. Not many boilerplates have these features and as most of them are multiple versions out of the date, it's difficult to add them in. So, clearly there is room for yet another boilerplate, right?

Why not

While this boilerplate is easy way to start a new project quickly without messing around with packages and configs, it might be too much for some projects. Every project might not need everything included in Reducks Starter. You might prefer styled-components over CSS Modules. Someone might think Immutable.js is unnecessary and only adds to the weight. Sometimes removing stuff can take more time than just starting from the beginning, so you should consider your options before using any boilerplate.

Like stated before, this is boilerplate with the features and structure I like the best. Creating your own boilerplate is lot of fun and really good learning experience so I highly encourage you to start from a blank page, if you have the time.

What

• React v16 with React Router v5
• Redux v5 with Immutable.js v4 based store tree, side effects with redux-thunk
• Re-ducks inspired modules
• Custom REST API middleware
• CSS Modules with Sass
• Tests with Jest and Enzyme
• Next generation JavaScript with Babel v7
• Bundling with Webpack v4
• Formatting and linting with Prettier, ESLint and Stylelint
• Storybook, Redux DevTools and Webpack DevServer with hot module replacement (HMR) for pleasant developer experience
• CI/CD configs for GitHub Actions, CircleCI and Travis CI
• Examples for everything included!

Project structure

src
├── components
│   ├── App
│   │   ├── Header
│   │   │   ├── Navigation
│   │   │   │   ├── Navigation.jsx
│   │   │   │   ├── Navigation.scss
│   │   │   │   ├── Navigation.stories.jsx
│   │   │   │   ├── Navigation.test.jsx
│   │   │   │   └── index.js
│   │   │   ├── Header.jsx
│   │   │   ├── Header.stories.jsx
│   │   │   ├── Header.test.jsx
│   │   │   └── index.js
│   │   ├── App.jsx
│   │   ├── App.scss
│   │   ├── App.stories.jsx
│   │   ├── App.test.jsx
│   │   └── index.js
│   ├── Common
│   │   └── Button
│   │       ├── Button.jsx
│   │       ├── Button.scss
│   │       ├── Button.stories.jsx
│   │       ├── Button.test.jsx
│   │       └── index.js
│   └── Pages
│       ├── CounterPage
│       │   ├── CounterPage.jsx
│       │   ├── CounterPage.scss
│       │   ├── CounterPage.stories.jsx
│       │   ├── CounterPage.test.jsx
│       │   └── index.js
│       ├── HomePage
│       │   ├── HomePage.jsx
│       │   ├── HomePage.scss
│       │   ├── HomePage.stories.jsx
│       │   ├── HomePage.test.jsx
│       │   └── index.js
│       └── RepositoryPage
│           ├── RepositoryList
│           │   ├── RepositoryList.jsx
│           │   ├── RepositoryList.scss
│           │   ├── RepositoryList.stories.jsx
│           │   ├── RepositoryList.test.jsx
│           │   └── index.js
│           ├── RepositoryPage.jsx
│           ├── RepositoryPage.stories.jsx
│           ├── RepositoryPage.test.jsx
│           └── index.js
├── state
│   ├── apis
│   │   └── github
│   │       ├── index.js
│   │       ├── mocks.js
│   │       ├── requests.js
│   │       └── transformers.js
│   ├── middleware
│   │   └── rest.js
│   ├── modules
│   │   ├── counter
│   │   │   ├── actions.js
│   │   │   ├── index.js
│   │   │   ├── records.js
│   │   │   ├── reducers.js
│   │   │   ├── selectors.js
│   │   │   ├── test.js
│   │   │   ├── thunks.js
│   │   │   └── types.js
│   │   └── repositories
│   │       ├── actions.js
│   │       ├── index.js
│   │       ├── records.js
│   │       ├── reducers.js
│   │       ├── selectors.js
│   │       ├── test.js
│   │       └── types.js
│   ├── utils
│   │   └── actions.js
│   ├── history.js
│   └── store.js
├── styles
│   ├── breakpoints.scss
│   ├── colors.scss
│   ├── globals.scss
│   ├── index.scss
│   └── mixins.scss
├── index.html
├── index.jsx
└── setupTests.js

How

Requirements

• Git
• Node

Usage

Clone this repository and edit package.json to make it your own.

$ git clone https://github.com/jtiala/reducks-starter.git <my-project-name>
$ cd <my-project-name>

Install dependencies

$ npm install

Build for production

$ npm run build

Run development server

$ npm run start

Run tests

$ npm run test

Or run tests automatically every time a file changes

$ npm run test:watch

Generate test coverage report

$ npm run test:coverage

Run linters. For more linting scripts, take a look at package.json.

$ npm run lint

Build and start Storybook

$ npm run storybook

Changelog

1.0.0 (xxxx-xx-xx)

• Initial release 🎉

Contributing

While this project's main focus is to be my idea of a perfect boilerplate, I'm also happy to hear your ideas! If you would like to contribute to Reducks Starter, please discuss the changes you want to make in the project's issues first!

License

This project is open source software licensed under the MIT license. For more information see LICENSE.