/react-boilerplate

React boilerplate with typescript , Redux saga , mui , private routing and basic components

Primary LanguageTypeScript

Getting Started with This Boilerplate

This Boilerplate contains a react app with typescript , MUI , ReduxSaga. All the required Basic Components are provided with this Boilerplate.

Project Structure

The above links will take you to the co-responding sections.

Asstes

This folder contains all the assets of the project like Images,icons etc.

Components

This Folder contains all the components of the project.

  • Header Component

    • The header showing on the App is comes from this Folder

  • Side Panel Component

    • The Navmenu showing on the App is comes from this Folder

  • UI

    • This Folder contains the UI components like Panel,Modal etc.

    • Confirm Modal

      This is a simple modal which will just ask the user about something to confirm.
      for example :- get confirmation on delete

    • Loader

      This loader will rotate the image passed here.
      you can change it as you needed.

    • Modal

      This is a common modal component which is useful for getting user input and all other needs.
      The Confirm Modal is dependent of this modal

    • Panel

      This component is core in this boilerplate,
      because all pages are created within this component.v

    • Select Box

      This Component will display's a dropdown.

    • Text Box

      This is custom textbox component.

    • Toast

      This is Toast component which is already define in app.tsx file
      And this component will manage by ToastReducer,ToastAction,ToastSaga.

    • ToolTip

      This is Custom tooltip.

  • Containers

    This folder contains all the containers of the project

    • Layout Container

      This is main layout container of the app.
      which will gives you a view with header,sidebar and responsiveness.

      only made changes in this component if it's required.

  • Helpers

    All the helper functions should declare here.

  • HOC

    This Folder containes a Higher Order Component which will manage user authentication and roles

  • Redux

    This folder contains redux modules

    • Actions

      All redux Actions are declared here

    • Reducers

      All redux Reducers are declared here

    • Sagas

      All redux Sagas are declared here

  • Routes

    The Routing of whole App will manage from here.

  • Utils

    All the utility functions should declare here.

  • Views

    All the Views of the App should declare here.