Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maitraysuthar/react-redux-saga-boilerplate
A boilerplate for React JS with Redux and Saga. Backend for this structure: https://github.com/maitraysuthar/rest-api-nodejs-mongodb
https://github.com/maitraysuthar/react-redux-saga-boilerplate
boilerplate crud react react-redux react-redux-boilerplate react-redux-saga-sample reactjs redux saga
Last synced: about 2 months ago
JSON representation
A boilerplate for React JS with Redux and Saga. Backend for this structure: https://github.com/maitraysuthar/rest-api-nodejs-mongodb
- Host: GitHub
- URL: https://github.com/maitraysuthar/react-redux-saga-boilerplate
- Owner: maitraysuthar
- License: mit
- Created: 2019-09-13T12:52:50.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T13:51:13.000Z (almost 2 years ago)
- Last Synced: 2024-10-04T13:32:26.345Z (3 months ago)
- Topics: boilerplate, crud, react, react-redux, react-redux-boilerplate, react-redux-saga-sample, reactjs, redux, saga
- Language: JavaScript
- Homepage:
- Size: 5.07 MB
- Stars: 21
- Watchers: 3
- Forks: 12
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React JS with Redux and Saga Project Structure
[](https://www.linkedin.com/in/maitray-suthar/) [](https://github.com/maitraysuthar/react-redux-saga-boilerplate/blob/master/LICENSE) 
A ready-to-use boilerplate for React JS with Redux and Saga.
## Project Overview
This is a basic project structure with repeatative use cases. Added some essential feature for every projects. It is very useful to build mid to complex level project. This project structure is based on **NodeJs api boilerplate app:** https://github.com/maitraysuthar/rest-api-nodejs-mongodb
I had tried to maintain the code structure easy as any beginner can also adopt the flow and start building a great app. Project is open for suggestions, Bug reports and pull requests.
## Is this project deserves a small treat?
If you consider my project as helpful stuff, You can appreciate me or my hard work and time spent to create this helpful structure with buying a coffee for me.
## Features
|Feature|Details |
|--|--|
| Structure| Project is build with extenensible and flexible **Moduler** pattern|
| Authentication| Basic Authentication (Register/Login)|
| Confirm Account| Account confirmation with OTP verification|
| Route Protection| Route protection with middleware and localstorage|
| Lazy Loading| Added **Lazy Loading** of components to fasten the execution process of application|
| App State Management| Application level state management with **Redux**|
| Async Call| Managed async calls with **Saga** middleware|
| Forms| Managed apllication forms & validations with **Formik** and **Yup**|
## Software Requirements
- Node.js **8+**
## How to install
### Using Git (recommended)
1. Clone the project from github. Change "myproject" to your project name.
```bash
git clone https://github.com/maitraysuthar/react-redux-saga-boilerplate.git ./myproject
```
### Using manual download ZIP
1. Download repository
2. Uncompress to your desired directory
### Install npm dependencies after installing (Git or manual download)
```bash
cd myproject
npm install
```
### Setting up environments
1. You will find a file named `.env.example` on root directory of project.
2. Create a new file by copying and pasting the file and then renaming it to just `.env`
```bash
cp .env.example .env
```
3. The file `.env` is already ignored, so you never commit your credentials.
4. Change the values of the file to your environment. Helpful comments added to `.env.example` file to understand the constants.
## How to run
```bash
npm start
```
## New Module
All the modules of the project will be in `/src/modules/` folder, If you need to add more modules to the project just create a new folder in the same folder.
##### Every folder contains following files:
- Component file (`index.jsx`)
- Actions file (`actions.js`)
- Reducer file (`reducer.js`)
- Saga file (`saga.js`)
- Style file (`[module].css`)
- Sub module folder, if any.
##### Root module:
Module's root module folder is `/src/modules/app/` it contains main **Routes file (`routes.js`)**, **Reducer file (`mainReducer.js`)** and **Saga file (`mainSaga.js`)**. You will need to add your every component,reducer & saga to make your module work.
## Found any bug? Need any feature?
Every project needs improvements, Feel free to report any bugs or improvements. Pull requests are always welcome.
## License
This project is open-sourced software licensed under the MIT License. See the LICENSE file for more information.