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
|||| — components
|||| ||||— 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
|||| — routes
(API calls)
|||| — stores
|||| —
| — styles
|||| — components
|||| —
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 —

| — 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…




a MERN, Next and Electron developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Shared Values in Reanimated 2

How To Speed Up Selenium Test Cases Execution?

Avalanche project using Figment io is my experience

Scopes & Closures Re-Explained: Part 2

Build the Server Side Application for a Notes app — CHAPTER — 2

How to Use The Shadow Dom To Isolate Styles on a DOM That Isn't Yours

Logging in Angular Application | Angular Logger Service

Web scraping and JavaScript- A walk through using Puppeteer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ahren Pradhan

Ahren Pradhan

a MERN, Next and Electron developer

More from Medium

Seven(7) Github repositories to level up your JavaScript skills.

Difference between Library and framework

laibray and frameworks

Real Users, Real Clients at Encora Apprenticeship — Week 1

You don’t need to pull before rebase to an origin branch.