react-redux-typescript-starter-kit

react-redux-typescript-starter-kit is a GitHub boilerplate that bootstraps a React application with Redux state management, TypeScript static checking, Material UI components, and nested public/private routes using Create React App.

What is react-redux-typescript-starter-kit?

This starter kit is a pre-configured React project that combines Redux for state management, Redux-Saga for side effects, TypeScript for static typing, Material UI for styling, and React Router for navigation. It is bootstrapped with Create React App and includes a sample demo page hosted at https://jeevasusej.github.io/react-redux-typescript-starter-kit/. The project is authored by jeevasusej and published on GitHub, and it defines a feature-based folder structure where each feature module contains its own actions, APIs, components, containers, reducers, sagas, types, and styles.

Key Features

• Dynamic Redux modules — Uses redux-dynamic-modules to modularize Redux by dynamically loading reducers and middlewares, so each feature module stays decoupled.
• Redux-Saga integration — The redux-saga middleware handles side effects; each feature module can include a saga folder.
• TypeScript static checking — Includes typesafe-actions and utility-types, plus links to react-typescript-cheatsheet and react-redux-typescript-guide for typing patterns.
• Material UI theming — Material UI is used for components, and a customizable theme is defined in shared/config/theme.ts.
• Nested routing — React Router DOM provides nested routes for Home (authenticated area) and Landing (pre-login area), sharing layout components from a common layout folder.
• Axios HTTP client and mock adapter — Axios handles API requests, with axios-mock-adapter included to mock requests until a real API is implemented.
• ESLint and Prettier — Development dependencies include eslint-config-prettier, eslint-plugin-prettier, and eslint-plugin-react-hooks to enforce coding standards.
• Feature-based folder structure — Each feature module has subfolders for actions, api, components, containers, module, reducers, saga, types, and styles, making code organization predictable.

Who is it for?

• React developers starting a new project — They can clone the repository and immediately get a working setup with Redux, TypeScript, and Material UI already configured.
• Teams using feature-based architecture — The dynamic redux modules and per-feature folders suit projects that need scalable, modular state management.
• Developers who want typed Redux — The included typesafe-actions and utility-types libraries support type-safe action creators and reducers.

What can you do with it?

• Scaffold a Redux app quickly — Clone the repository and replace the sample code with your own feature modules; the store and theme are already configured.
• Structure large applications — Use the feature folder layout to separate concerns for each domain, with Redux dynamic modules loading only what is needed.
• Build public and private areas — Use the nested Home and Landing routes to set up different layouts for pages before and after login.

How does it work?

The repository is structured around a shared configuration in shared/config, containing configureStore.ts for store setup, rootModule.ts as the root redux-dynamic-module, theme.ts for Material UI customization, and types.ts for root TypeScript types. Each feature module under the feature folder can be added with its own reducers, sagas, and containers, and the routes reference layout components shared between Home and Landing. The included axios-mock-adapter is meant to be removed once real API integration begins.