Skip to content

Instantly share code, notes, and snippets.

@mksglu
Last active September 21, 2023 07:11
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save mksglu/5b433515825f886850793ff08373c229 to your computer and use it in GitHub Desktop.
Save mksglu/5b433515825f886850793ff08373c229 to your computer and use it in GitHub Desktop.
React JS Authenatication Folder Structure

React JS Authenatication + REST API

Used Packages

  • React JS
  • Redux Thunk
  • Redux Form
  • Redux Logger
  • Axios

The Project

Folder Structure

├── Dockerfile
├── docker-compose.yml
├── nginx
│   └── conf
│   └── conf.d
│   └── default.conf
└── src
├── applications
│   ├── actions
│   │   └── LoginAction.js
│   ├── constants
│   │   └── AuthConstants.js
│   ├── reducers
│   │   ├── AuthReducer.js
│   │   └── index.js
│   ├── router
│   │   └── PrivateRouter.js
│   └── store
│   └── index.js
├── assets
│   ├── img
│   │   └── logo.svg
│   └── style
│   ├── auth.css
│   └── bootstrap.css
├── containers
│   ├── AppContainer.js
│   └── AuthContainer.js
├── elements
│   ├── Form
│   │   ├── Button.js
│   │   └── Label.js
│   └── ReduxFormFields
│   └── TextField.js
├── helpers
│   ├── api.js
│   ├── history.js
│   └── url.js
├── index.html
├── index.js
└── passenger
├── Auth
│   ├── Login
│   │   ├── LoginForm.js
│   │   ├── LoginFormValidation.js
│   │   └── index.js
│   ├── Logout
│   │   └── index.js
│   ├── Register
│   │   ├── RegisterForm.js
│   │   ├── RegisterFormValidation.js
│   │   └── index.js
│   ├── brand.js
│   ├── footer.js
│   └── index.js
└── Layouts
├── About
│   └── index.js
├── Home
│   └── index.js
└── index.js
Copy link

ghost commented May 18, 2018

Mr. Cenk,

Due to our business logic, I couldn't shared all separated applications but they actually are like what you are listed. :)

All our separated structures contains a part of our app (such as ER, Dermatology or Surgery departments of the hospitals).
All governing events and actions that are generating any connections in between these, are lying in another app that is not listed in the structure above, for the sake of simplicity.

Copy link

ghost commented May 18, 2018

Actually, I also love Vue and support it as much as I can. We are using react in our enterprise solutions and web applications because of our teams knowledge on it. We even are not migrating to version 16 and using a react fork that is hosted in our company gitlab for preventing possible future dependency problems.

In the case of our business, we rely on javascript (node + express + electron), type systems and testing probably more than our react part of the codebase :)

@cenkce
Copy link

cenkce commented May 18, 2018

No, Dermatology is taxonomy, it's based on the project. If you develop a account management application, it's just a category. But if develop a R&D application it can be a context. If you divide a hospital as Clinics, ER, Account etc. and then it's just a part of taxonomy of the clinics but some clinics have big differences than others, they can be context. It's related with project needs.

Copy link

ghost commented May 18, 2018

Ahahahah, my knowledge on hospitals are becoming short on this topic currently.

What I was trying to tell is, the folder structure that I have posted are currently the best structure that our team is used in the last 1 year. Using codebases with 150k + 130k (approximate numbers based on our previous releases on local, frontend and backend applications), a structure like that is helping on the development and security layers in quite a good way :)

Copy link

ghost commented May 18, 2018

Also, I cannot give thumbs up to your comments but all of them should get one :)

@cenkce
Copy link

cenkce commented May 18, 2018

I don't know what your project needs, I just try to create a case study to discuss that what project structure is. I don't want to misunderstand. Actually as you said, the point is what project needs. For example our modules of the project seperately run and they don't exactly know each other. Each module can easily run by just using its own code base like micro-services.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment