Idea to structure your React Application for better code management.

Example.txt

src 

screens - all the main screens 

  Home

   index.js

   style.scss/css

  Auth

    Login

      index.js

      style.scss/css

    SignUp

      index.js

      style.scss/css

    Reset Password

      index.js

      style.scss/css

  User

    Profile

      index.js

      style.scss/css

  Projects

    index.js

    style.scss/css

  Video

    index.js

    style.scss/css

  Pages

    index.js

    style.scss/css



  components

    common - for all the common components in the app

      Input 

        index.js

        style.scss/css

      Button

        index.js

        style.scss/css

    Auth

      LoginCard

        index.js

        style.scss/css

    User

      Avatar 

        index.js

        style.scss/css

    Projects

      ProjectCard

        index.js

        style.scss/css

    Pages

      index.js

      style.scss/css

    Channels

      index.js

      style.scss/css

  containers - the root components where we connect the component with redux store

    Auth
    Pages
    Vidio



  layouts

  Auth - for authenticated users

    index.js

    style.scss/css

  Guest - for un authenticated user

    index.js

    style.scss/css

  store

    actions

    reducers

    types - con

  utils

  App.js

  other files





*Things to keep in mind*

Folder and files names should always start with small case

the component name should start with Capital letter

Always create component as a folder with index.js as root file of folder 

Use High Order components for Authentication management

Use layouts for differentiate the logged in and non logged in users

Use layouts to create similar kinds of screens. 

Use common component folder for creating common components used inside the app.