React Redux folder structure for Fronted and Dashboard

Question

I am using MERN stack to develop an application. The front end (React + Redux) is totally isolated from backend(express + mongo). I am using CORS, JWT and all good things to connect both of them. The front-end itself has an user view and dashboard or admin view. Now I got stuck at point where I need to define the react routes based on my folder structure. Could someone please suggest me a proper folder structure and router configuration for my use case?

Answer 1

You can store all views in same directory, like /client i think, if you plan to use some common components, or if applications for both sides (user and dashboard) are not very big.

About routes, it depends. If you use something like react-router, ofc. you should store routes in client folder. Or you can create directory like common to use some shared functions (and routes) in server side and client-side.

Answer 2

React doesn’t have opinions on how you put files into folders. But as per my experience on react and redux, the following file structure is a good fit for a dashboard.

my-app
 public
 src
   assets
    images(folder)
    scss(folder)
   utils
   routers
   store
   components
    common
      ...
    users
     Reducer.js
     Action.js
     Api.js
     Constants.js
     Helpers.jsx
     components(folder)
      Index.jsx
      Item.jsx
      Form.jsx
      Show.jsx
      ....
     containers(folder)
      Credate.jsx
      Index.jsx
      Show.jsx
     styles( custom style folder)

Normally try to keep .js/.ts extension for Reducer, Action, Api, Constants, etc. and .jsx/.tsx extension for another file.