https://github.com/rbiedrawa/react-redux-rtk-saga-mui-typescript-starter
A boilerplate Create React App with Typescript, Redux Toolkit, Redux Saga, React Hook Form, Cypress, Storybook, React-i18next and Material UI๐จโ๐ป
https://github.com/rbiedrawa/react-redux-rtk-saga-mui-typescript-starter
commitlint cypress eslint husky jest material-ui mock-service-worker prettier react react-hook-form react-i18next react-router react-testing-library reactjs redux redux-saga redux-toolkit storybook typescript yup
Last synced: 4 months ago
JSON representation
A boilerplate Create React App with Typescript, Redux Toolkit, Redux Saga, React Hook Form, Cypress, Storybook, React-i18next and Material UI๐จโ๐ป
- Host: GitHub
- URL: https://github.com/rbiedrawa/react-redux-rtk-saga-mui-typescript-starter
- Owner: rbiedrawa
- License: mit
- Created: 2022-03-07T15:21:15.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-03-25T08:30:30.000Z (over 3 years ago)
- Last Synced: 2025-04-15T02:44:23.115Z (6 months ago)
- Topics: commitlint, cypress, eslint, husky, jest, material-ui, mock-service-worker, prettier, react, react-hook-form, react-i18next, react-router, react-testing-library, reactjs, redux, redux-saga, redux-toolkit, storybook, typescript, yup
- Language: TypeScript
- Homepage:
- Size: 3.98 MB
- Stars: 29
- Watchers: 1
- Forks: 17
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
react-redux-rtk-saga-mui-typescript-starter
A boilerplate [Create React App](https://github.com/facebook/create-react-app)
with [Typescript](https://www.typescriptlang.org/), [Redux Toolkit](https://redux-toolkit.js.org/),
[Redux Saga](https://redux-saga.js.org/), [React Hook Form](https://react-hook-form.com/)
, [React-i18next](https://react.i18next.com/) and [Material UI](https://mui.com/).
********
## Table of Content
- [About](#about)
* [Features](#features)
* [Project Structure](#project-structure)
- [Getting Started](#-getting-started)
* [Prerequisites](#prerequisites)
* [Installation](#installation)
* [Development](#development)
* [Build](#build)
* [Testing](#testing)
+ [Unit / Integration tests](#unit--integration-tests)
+ [E2E tests](#e2e-tests)
* [Storybook](#storybook)
- [Code Quality](#-code-quality)
* [Overview](#overview)
* [Absolute imports](#absolute-imports)
- [Release](#-release)
- [Useful dev tools](#-useful-dev-tools)
- [References](#-references)
- [Additional Links](#-additional-links)
- [License](#license)
## About
### Features
1. [React.js](https://reactjs.org/) CRUD example with Redux Saga.
2. [Typescript](https://www.typescriptlang.org/) for type safety
3. Core libraries
* [Redux](https://redux.js.org/)
* [Redux Toolkit](https://redux-toolkit.js.org/)
* [Redux Saga](https://redux-saga.js.org/)
* [Redux First History](https://github.com/salvoravida/redux-first-history)
* [Redux Logger](https://github.com/LogRocket/redux-logger)
* [React Router](https://reactrouter.com/)
* [React Hook Form](https://react-hook-form.com/)
* [Yup](https://github.com/jquense/yup)
* [Axios](https://github.com/axios/axios)
* [React-i18next](https://react.i18next.com/)
* [MUI - Material UI](https://mui.com/)
* [Styled Components](https://styled-components.com/)
4. Test libraries
* [Jest](https://jestjs.io/)
* [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
* [Redux Saga Test Plan](https://github.com/jfairbank/redux-saga-test-plan)
* [Cypress](https://www.cypress.io/)
5. Other tools/libraries
* [StoryBook](https://storybook.js.org/)
* [Mock Service Worker](https://mswjs.io/)
* [ESLint](https://eslint.org/), [Prettier](https://eslint.org/)
, [Lint-staged](https://github.com/okonet/lint-staged), [Pretty Quick](https://github.com/azz/pretty-quick)
* [Husky](https://typicode.github.io/husky/#/)
* [Commitlint](https://commitlint.js.org/#/)
* [Semantic Release](https://github.com/semantic-release/semantic-release)
6. Opinionated folder structure
7. Internationalization for react app using [React-i18next](https://react.i18next.com/)
8. Material UI Dark Mode support
### Project Structure
```shell
./src
โโโ App.tsx # Application entrypoint
โโโ assets # assets folder contains all the static files (images, fonts, etc).
โโโ components # shared components
โโโ config # global configuration, env variables etc.
โย ย โโโ Env.ts
โย ย โโโ i18n
โโโ features
โย ย โโโ feature # 'feature'
โย ย โย ย โโโ api # API folder contains http service calls
โย ย โย ย โโโ assets # 'feature' assets folder
โย ย โย ย โโโ components # 'feature' components
โย ย โย ย โโโ hooks # 'feature' hooks
โย ย โย ย โโโ index.ts # entry point for 'feature' public API
โย ย โย ย โโโ store # 'feature' state stores contains slices, sagas, etc.
โย ย โย ย โโโ types # 'feature' typescript types
โย ย โโโ another_feature # 'another_feature'
โโโ hooks # shared hooks
โโโ libs # libraries imported or exported that can be used in different projects
โย ย โโโ core
โย ย โโโ ui
โโโ pages # contains all application pages
โโโ routes # routes configuration
โโโ store # root store and store settings
โโโ test/ # contains test utilities and Mock Service Worker setup
โโโ msw
```
## ๐จโ๐ป Getting Started
### Prerequisites
```shell
brew install nvm
```
```shell
nvm install v17.4.0
```
```shell
npm install --global yarn
```
### Installation
Install NPM packages:
```shell
yarn install
```
### Development
To start the application in the development mode run:
```shell
yarn start
```
> :memo: **Note:** Application starts in **sandbox-mode**, with all backend calls mocked by [MSW](https://mswjs.io/) library.
> To disable it change [REACT_APP_MSW_ENABLED](./.env) variable to false.
> :bulb: **Tip:** Open [http://localhost:3000](http://localhost:3000) to view application in the browser.
### Build
To build the application for production, run:
```shell
yarn build
```
### Testing
#### Unit / Integration tests
Launch the test runner in the interactive watch mode:
```shell
yarn test
```
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more
information.
Run `yarn coverage` to generate code coverage.
#### E2E tests
To run e2e use below command:
```shell
yarn build && yarn test:e2e
```
> :memo: **Note:** This script will start the server, wait until application is running, execute e2e tests and after that it will shut down the server.
> :bulb: **Tip:** To run [Cypress](https://www.cypress.io/) in interactive mode, start the application and run `yarn cy:open`
### Storybook
Start Storybook in development mode:
```shell
yarn storybook
```
To build Storybook as static web application, run the following command inside project's root directory:
```shell
yarn build-storybook
```
> :bulb: **Tip:** run `npx http-server ./storybook-static` to preview static web application locally.
## ๐ฎ Code Quality
### Overview
Running the script `yarn format` will format the code style of all TypeScript files.
The script `yarn lint` will run linter in the project. If any code standards or styles are not met in code, it will
display the errors or warnings.
Run `yarn lint:fix` command to format code and fix automatically any error found - if the linter knows how to fix it๐.
> :bulb: **Tip:** To enforce code conventions and prevent bad commits this project is setup to use Husky.
> Husky is used to run validation and format code before every commit.
> Additionally, it will check if git message is following [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) format.
### Absolute imports
Absolute imports should always be configured and used because it makes it easier to move files around and avoid messy
import paths such as `../../../Component`. Wherever you move the file, all the imports will remain intact.
To enable Absoulte imports in Intelij ide go to `Settings -> Editor -> Code Style -> TypeScript -> Imports` and
enable **Use paths relative to tsconfig.json**.
## ๐ Release
Create release version and generate a changelog file:
```shell
GITHUB_TOKEN=YOUR-TOKEN yarn release
```
> :bulb: **Tip:** `--no-ci` - allows you to trigger release from no ci environment e.g. local
> :bulb: **Tip:** `yarn release:dry-run` - allows you to see what commands would be run, without committing to git or updating files.
## ๐ Useful dev tools
- [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
- [Redux DevTools](https://github.com/reduxjs/redux-devtools)
- [Testing Playground](https://chrome.google.com/webstore/detail/testing-playground/hejbmebodbijjdhflfknehhcgaklhano)
- [Window Resizer](https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh)
- [React Hook Form - form builder](https://react-hook-form.com/form-builder)
- [i18next-scanner](https://github.com/i18next/i18next-scanner)
## ๐ References
- [TypeScript Deep Dive](https://basarat.gitbook.io/typescript/)
- [React+TypeScript Cheatsheets](https://github.com/typescript-cheatsheets/react)
- [Redux - style guide](https://redux.js.org/style-guide/style-guide)
- [Redux Toolkit - Getting Started](https://redux-toolkit.js.org/introduction/gettiฤปng-started)
- [React Hook Form - typescript Support](https://react-hook-form.com/ts)
- [Bulletproof React](https://github.com/alan2207/bulletproof-react)
- [Jest cheat sheet](https://github.com/sapegin/jest-cheat-sheet)
## ๐จโ๐ Additional Links
- [React Hook Form vs. Formik: A technical and performance comparison](https://blog.logrocket.com/react-hook-form-vs-formik-comparison/)
- [MUI - theme switcher](https://mui.com/customization/dark-mode/)
- [Level up your CSS linting using Stylelint](https://blog.logrocket.com/using-stylelint-improve-lint-css-scss-sass/)
- [Create React App: A quick setup guide](https://blog.logrocket.com/create-react-app-a-quick-setup-guide-b812f0aad03c/)
- [Using TypeScript with Redux Toolkit](https://blog.logrocket.com/using-typescript-with-redux-toolkit/)
- [What is Redux Ducks?](https://medium.com/@matthew.holman/what-is-redux-ducks-46bcb1ad04b7)
- [Redux DevTools: Tips and tricks for faster debugging](https://blog.logrocket.com/redux-devtools-tips-tricks-for-faster-debugging/)
- [Remove React.FC from Typescript template](https://github.com/facebook/create-react-app/pull/8177)
## License
Distributed under the MIT License. See `LICENSE` for more information.