The importance of a good project structure and how I structure mine.

Brief . . .

Whenever we start with a project, there are a few things we need to make sure of —

1. Reusable code,
2. Destructuring code,
3. Easier codability,
4. Easier searchability of content (code under focus),
5. A better view of code ( less amount of code in a single view),
6. Improving the level of abstraction of code.

And all this can be achieved via a good project folder structuring

I will be using a web app to explain mine, hope this helps for other domains as well.

Main Project Folder —
(bold >> folders and normal >> files)

— libraries
— public
— src
| — js
|||| — actions (redux)
|||| — components (redux)
|||| ||||— views (contains components like dashboards, etc which may or may not be reusable anywhere)
|||| |||| ||||— Sub-views (contains sub-components like buttons, appbars, drawers etc which is a part of the main view)
|||| — helpers (reusable functions that could be used anywhere like string checking, etc)
|||| — pages (basic URL routes, sign-in, sign-up, main-page, etc)
|||| — reducers (redux)
|||| — routes (API calls)
|||| — stores (redux)
|||| — App.jsx
| — styles
|||| — components
|||| — index.scss
— starter app

[IMPORTANT] if you notice in the picture
there's an index.js or index.jsx file in every folder (except the main src folder). Over here I import all the files on the same level and export it from one place, so later if I create a new file may it be any folder, I just need to import it in the index file in the same folder and thus making it available everywhere.

So what I get by maintaining this

1. I know where to create my specific files/components/views and where to import them so that it’s available everywhere,
2. I can reuse the file as I now know what it does,
3. Code is destructured,
4. Easy code ability (from smaller file size),
5. Code snippet search is easy,
6. A lesser amount of text means a better view,
7. This adds a level of abstraction,
8. This makes the project to be worked on from different endpoints thus increasing the production speed,
9. Makes the code easier to understand, helping the developer to only need to check the input and output data type/structure, etc (another advantage of abstraction),
10. I think I can add literally all the features of abstraction,
11. you could all increase the level of abstraction to another level like —

PROJECT STRUCTURE
— BACKEND
— FRONTEND
| — DESKTOP (web app / website)
| — MOBILE (mobile app — (decide accordingly))
|||| — IOS
|||| — android
|||| — native-app

Photo by Kaleidico on Unsplash

Some additional points which you need to make sure if you are a group of people ( probably using a common repository )

1. Keep the naming in smaller cases (for windows it’s fine but in Linux, it tends to by-default treat everything in small cases)
2. Do try to follow the [IMPORTANT] point
3. And use an IDE something like a VS Code or whatever which gives us a good view of the project file structure

And that's all for now…