4-life / react-saga-ts-material-boilerplate

Boilerplate with React, Redux-Saga, Typescript, Material

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React-Saga-TS-Material for History Dashboard

This project was bootstrapped with Create React App.

Project src structure

.
├── models                  # Models that used on back-end
│   ├── index               # Root script for models export
│   ├── apiResponse         # Response from server model
│   └── ...                 # etc.
├── images                  # Project images
├── actions                 # State change actions
├── components              # Custom components for project
│   ├── index               # Root script for components export
│   ├── Footer              # Footer component
│   │   ├── FooterComponent.tsx       # Component
│   │   └── FooterStyle.tsx           # Styles
│   ├── Header              # Header component
│   │   ├── HeaderComponent.tsx       # Component
│   │   └── HeaderStyle.tsx           # Styles
│   └── ...                 # etc.
├── clients                 # Aws Gateway endpoints
├── pages                   # Main components which used as pages in router
│   ├── index               # Root script for pages export
│   ├── Home                # Home Page
│   │   ├── HomePage.tsx              # Component
│   │   └── HomeStyles.tsx            # Styles
│   ├── NoMatch             # 404 Page
│   │   └── ...             # etc.
│   └── ...                 # etc.
├── reducers                # Saga reducers
│   ├── example.ts
│   └── ...
├── sagas                   # Sagas with own tests
│   ├── *-saga.ts           # Example saga
│   ├── *-saga.spec.ts      # Tests for example saga
│   └── ...                 # etc.
└── index.tsx               # Entry point for project. Setups store and Project theme
└── App.tsx                 # Main component with html structure and routes rendering
└── App.test.tsx            # Tests for main component rendering
└── App.scss                # Global SCSS styles which is not using as theme
└── aws-exports.js          # Amplify settings (Cognito user pool, current region, etc.)
└── Routes.ts               # Routes object structure
└── styles.tsx              # Styles for main App component
└── theme.tsx               # Theme styles which is overrides Material theme

Redux-Saga state management

Redux-Saga state management

See doc: https://redux-saga.js.org/

Material Components

See doc: https://material-ui.com/api/app-bar/

Available Scripts

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

npm test

Launches the test runner in the interactive watch mode.

npm run lint

Launches the linter for typescript code.

npm run build

Builds the app for production to the build folder.

About

Boilerplate with React, Redux-Saga, Typescript, Material


Languages

Language:TypeScript 95.3%Language:HTML 4.1%Language:CSS 0.6%