{"id":21877642,"url":"https://github.com/rbiedrawa/react-redux-rtk-saga-mui-typescript-starter","last_synced_at":"2025-06-15T21:35:05.754Z","repository":{"id":162193108,"uuid":"467148395","full_name":"rbiedrawa/react-redux-rtk-saga-mui-typescript-starter","owner":"rbiedrawa","description":"A boilerplate Create React App with Typescript, Redux Toolkit, Redux Saga, React Hook Form, Cypress, Storybook, React-i18next and Material UI👨‍💻","archived":false,"fork":false,"pushed_at":"2022-03-25T08:30:30.000Z","size":4170,"stargazers_count":29,"open_issues_count":1,"forks_count":17,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-15T02:44:23.115Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rbiedrawa.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-03-07T15:21:15.000Z","updated_at":"2025-01-15T18:27:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"ef0dc79d-6cd3-4878-b3b9-88e449372460","html_url":"https://github.com/rbiedrawa/react-redux-rtk-saga-mui-typescript-starter","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/rbiedrawa/react-redux-rtk-saga-mui-typescript-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbiedrawa%2Freact-redux-rtk-saga-mui-typescript-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbiedrawa%2Freact-redux-rtk-saga-mui-typescript-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbiedrawa%2Freact-redux-rtk-saga-mui-typescript-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbiedrawa%2Freact-redux-rtk-saga-mui-typescript-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rbiedrawa","download_url":"https://codeload.github.com/rbiedrawa/react-redux-rtk-saga-mui-typescript-starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbiedrawa%2Freact-redux-rtk-saga-mui-typescript-starter/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260053517,"owners_count":22951902,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-11-28T08:09:51.701Z","updated_at":"2025-06-15T21:35:05.746Z","avatar_url":"https://github.com/rbiedrawa.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003ereact-redux-rtk-saga-mui-typescript-starter\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n![ts](https://img.shields.io/badge/TypeScript%20-%23F7DF1E.svg?logo=typescript\u0026logoColor=white\u0026color=3178C6)\n![react](https://img.shields.io/badge/React-20232A?logo=react\u0026logoColor=61DAFB)\n![redux](https://img.shields.io/badge/Redux%20Toolkit-593D88?logo=redux\u0026logoColor=white)\n![redux-saga](https://img.shields.io/badge/Redux%20Saga-86D46B?logo=redux%20saga\u0026logoColor=white\u0026color=74C417)\n![mui](https://img.shields.io/badge/Material%20UI-007FFF?logo=mui\u0026logoColor=white)\n![storybook](https://img.shields.io/badge/Storybook-FF4785?logo=storybook\u0026logoColor=white)\n![jest](https://img.shields.io/badge/Jest%20-%23F7DF1E.svg?logo=jest\u0026logoColor=white\u0026color=74C417)\n![cypress](https://img.shields.io/badge/Cypress-17202C?logo=cypress\u0026logoColor=white)\n![license](https://img.shields.io/github/license/rbiedrawa/kafka-monitoring)\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\nA boilerplate [Create React App](https://github.com/facebook/create-react-app)\nwith [Typescript](https://www.typescriptlang.org/), [Redux Toolkit](https://redux-toolkit.js.org/),\n[Redux Saga](https://redux-saga.js.org/), [React Hook Form](https://react-hook-form.com/)\n, [React-i18next](https://react.i18next.com/) and [Material UI](https://mui.com/).\n\n\u003c/div\u003e\n\n********\n\n## Table of Content\n\n\u003c!-- toc --\u003e\n\n- [About](#about)\n    * [Features](#features)\n    * [Project Structure](#project-structure)\n- [Getting Started](#-getting-started)\n    * [Prerequisites](#prerequisites)\n    * [Installation](#installation)\n    * [Development](#development)\n    * [Build](#build)\n    * [Testing](#testing)\n        + [Unit / Integration tests](#unit--integration-tests)\n        + [E2E tests](#e2e-tests)\n    * [Storybook](#storybook)\n- [Code Quality](#-code-quality)\n    * [Overview](#overview)\n    * [Absolute imports](#absolute-imports)\n- [Release](#-release)\n- [Useful dev tools](#-useful-dev-tools)\n- [References](#-references)\n- [Additional Links](#-additional-links)\n- [License](#license)\n\n\u003c!-- tocstop --\u003e\n\n## About\n\n\u003cdiv align=\"center\"\u003e\n\n![about.gif](./_docs/img/about.gif)\n\n\u003c/div\u003e    \n\n### Features\n\n1. [React.js](https://reactjs.org/) CRUD example with Redux Saga.\n2. [Typescript](https://www.typescriptlang.org/) for type safety\n3. Core libraries\n    * [Redux](https://redux.js.org/)\n    * [Redux Toolkit](https://redux-toolkit.js.org/)\n    * [Redux Saga](https://redux-saga.js.org/)\n    * [Redux First History](https://github.com/salvoravida/redux-first-history)\n    * [Redux Logger](https://github.com/LogRocket/redux-logger)\n    * [React Router](https://reactrouter.com/)\n    * [React Hook Form](https://react-hook-form.com/)\n    * [Yup](https://github.com/jquense/yup)\n    * [Axios](https://github.com/axios/axios)\n    * [React-i18next](https://react.i18next.com/)\n    * [MUI - Material UI](https://mui.com/)\n    * [Styled Components](https://styled-components.com/)\n4. Test libraries\n    * [Jest](https://jestjs.io/)\n    * [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)\n    * [Redux Saga Test Plan](https://github.com/jfairbank/redux-saga-test-plan)\n    * [Cypress](https://www.cypress.io/)\n5. Other tools/libraries\n    * [StoryBook](https://storybook.js.org/)\n    * [Mock Service Worker](https://mswjs.io/)\n    * [ESLint](https://eslint.org/), [Prettier](https://eslint.org/)\n      , [Lint-staged](https://github.com/okonet/lint-staged), [Pretty Quick](https://github.com/azz/pretty-quick)\n    * [Husky](https://typicode.github.io/husky/#/)\n    * [Commitlint](https://commitlint.js.org/#/)\n    * [Semantic Release](https://github.com/semantic-release/semantic-release)\n6. Opinionated folder structure\n7. Internationalization for react app using [React-i18next](https://react.i18next.com/)\n8. Material UI Dark Mode support\n\n### Project Structure\n\n```shell\n./src\n├── App.tsx # Application entrypoint\n├── assets # assets folder contains all the static files (images, fonts, etc).\n├── components # shared components\n├── config # global configuration, env variables etc.\n│   ├── Env.ts\n│   └── i18n\n├── features\n│   ├── feature # 'feature'\n│   │   ├── api # API folder contains http service calls\n│   │   ├── assets # 'feature' assets folder\n│   │   ├── components # 'feature' components\n│   │   ├── hooks # 'feature' hooks\n│   │   ├── index.ts # entry point for 'feature' public API\n│   │   ├── store # 'feature' state stores contains slices, sagas, etc.\n│   │   └── types # 'feature' typescript types\n│   └── another_feature # 'another_feature'\n├── hooks # shared hooks\n├── libs # libraries imported or exported that can be used in different projects\n│   ├── core\n│   └── ui\n├── pages  # contains all application pages\n├── routes # routes configuration\n├──  store # root store and store settings\n└── test/ # contains test utilities and Mock Service Worker setup\n    └── msw\n```\n\n## 👨‍💻 Getting Started\n\n### Prerequisites\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ca href=\"https://github.com/nvm-sh/nvm\"\u003envm\u003c/a\u003e\u003c/summary\u003e\n\n  ```shell\n  brew install nvm\n  ```\n\n\u003c/details\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ca href=\"https://nodejs.org/en/\"\u003eNode.js v17\u003c/a\u003e\u003c/summary\u003e\n\n  ```shell\n  nvm install v17.4.0\n  ```\n\n\u003c/details\u003e\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ca href=\"https://yarnpkg.com/\"\u003eYarn\u003c/a\u003e\u003c/summary\u003e\n\n  ```shell\n  npm install --global yarn\n  ```\n\n\u003c/details\u003e\n\n### Installation\n\nInstall NPM packages:\n\n```shell\nyarn install\n```\n\n### Development\n\nTo start the application in the development mode run:\n\n```shell\nyarn start\n```\n\n\u003e :memo: **Note:** Application starts in **sandbox-mode**, with all backend calls mocked by [MSW](https://mswjs.io/) library.\n\u003e To disable it change [REACT_APP_MSW_ENABLED](./.env) variable to false.\n\n\u003e :bulb: **Tip:** Open [http://localhost:3000](http://localhost:3000) to view application in the browser.\n\n### Build\n\nTo build the application for production, run:\n\n```shell\nyarn build\n```\n\n### Testing\n\n#### Unit / Integration tests\n\nLaunch the test runner in the interactive watch mode:\n\n```shell\nyarn test\n```\n\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more\ninformation.\n\nRun `yarn coverage` to generate code coverage.\n\n#### E2E tests\n\n![posts.spec.ts](./_docs/img/cypress.gif)\n\nTo run e2e use below command:\n\n```shell\nyarn build \u0026\u0026 yarn test:e2e\n```\n\n\u003e :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.\n\n\u003e :bulb: **Tip:** To run [Cypress](https://www.cypress.io/) in interactive mode, start the application and run `yarn cy:open`\n\n### Storybook\n\nStart Storybook in development mode:\n\n```shell\nyarn storybook\n```\n\nTo build Storybook as static web application, run the following command inside project's root directory:\n\n```shell\nyarn build-storybook\n```\n\n\u003e :bulb: **Tip:** run `npx http-server ./storybook-static` to preview static web application locally.\n\n## 👮 Code Quality\n\n### Overview\n\nRunning the script `yarn format` will format the code style of all TypeScript files.\n\nThe script `yarn lint` will run linter in the project. If any code standards or styles are not met in code, it will\ndisplay the errors or warnings.\n\nRun `yarn lint:fix` command to format code and fix automatically any error found - if the linter knows how to fix it😉.\n\n\u003e :bulb: **Tip:** To enforce code conventions and prevent bad commits this project is setup to use Husky.\n\u003e Husky is used to run validation and format code before every commit.\n\u003e Additionally, it will check if git message is following [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) format.\n\n### Absolute imports\n\nAbsolute imports should always be configured and used because it makes it easier to move files around and avoid messy\nimport paths such as `../../../Component`. Wherever you move the file, all the imports will remain intact.\n\nTo enable Absoulte imports in Intelij ide go to `Settings -\u003e Editor -\u003e Code Style -\u003e TypeScript -\u003e Imports` and\nenable **Use paths relative to tsconfig.json**.\n\n## 😈 Release\n\nCreate release version and generate a changelog file:\n\n```shell\nGITHUB_TOKEN=YOUR-TOKEN yarn release\n```\n\n\u003e :bulb: **Tip:**  `--no-ci` - allows you to trigger release from no ci environment e.g. local\n\n\u003e :bulb: **Tip:**  `yarn release:dry-run` - allows you to see what commands would be run, without committing to git or updating files.\n\n## 🛠 Useful dev tools\n\n- [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)\n- [Redux DevTools](https://github.com/reduxjs/redux-devtools)\n- [Testing Playground](https://chrome.google.com/webstore/detail/testing-playground/hejbmebodbijjdhflfknehhcgaklhano)\n- [Window Resizer](https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh)\n- [React Hook Form - form builder](https://react-hook-form.com/form-builder)\n- [i18next-scanner](https://github.com/i18next/i18next-scanner)\n\n## 🎓 References\n\n- [TypeScript Deep Dive](https://basarat.gitbook.io/typescript/)\n- [React+TypeScript Cheatsheets](https://github.com/typescript-cheatsheets/react)\n- [Redux - style guide](https://redux.js.org/style-guide/style-guide)\n- [Redux Toolkit - Getting Started](https://redux-toolkit.js.org/introduction/gettiĻng-started)\n- [React Hook Form - typescript Support](https://react-hook-form.com/ts)\n- [Bulletproof React](https://github.com/alan2207/bulletproof-react)\n- [Jest cheat sheet](https://github.com/sapegin/jest-cheat-sheet)\n\n## 👨‍🎓 Additional Links\n\n- [React Hook Form vs. Formik: A technical and performance comparison](https://blog.logrocket.com/react-hook-form-vs-formik-comparison/)\n- [MUI - theme switcher](https://mui.com/customization/dark-mode/)\n- [Level up your CSS linting using Stylelint](https://blog.logrocket.com/using-stylelint-improve-lint-css-scss-sass/)\n- [Create React App: A quick setup guide](https://blog.logrocket.com/create-react-app-a-quick-setup-guide-b812f0aad03c/)\n- [Using TypeScript with Redux Toolkit](https://blog.logrocket.com/using-typescript-with-redux-toolkit/)\n- [What is Redux Ducks?](https://medium.com/@matthew.holman/what-is-redux-ducks-46bcb1ad04b7)\n- [Redux DevTools: Tips and tricks for faster debugging](https://blog.logrocket.com/redux-devtools-tips-tricks-for-faster-debugging/)\n- [Remove React.FC from Typescript template](https://github.com/facebook/create-react-app/pull/8177)\n\n## License\n\nDistributed under the MIT License. See `LICENSE` for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frbiedrawa%2Freact-redux-rtk-saga-mui-typescript-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frbiedrawa%2Freact-redux-rtk-saga-mui-typescript-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frbiedrawa%2Freact-redux-rtk-saga-mui-typescript-starter/lists"}