bloqhead / reducks-starter

πŸ¦† Reducks Starter

Home Page:https://jtiala.github.io/reducks-starter/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

πŸ¦† Reducks Starter

Actions Status Dependencies Status Dev Dependencies Status PRs Welcome License

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

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

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.

About

πŸ¦† Reducks Starter

https://jtiala.github.io/reducks-starter/

License:MIT License


Languages

Language:JavaScript 88.6%Language:CSS 4.8%Language:HTML 4.0%Language:Shell 2.6%