Boost Your Productivity as a Web Developer

An often-overlooked but crucial part of web development — Project Folder Structure (Frontend)

React Folder Structure

You are a developer, which means your time is valuable, and you must be strategic about how you spend it. In other words, you need to make the most of your time, and one way to do so is to be productive. Now, there are tons of ways to be productive, but a simple and universally applicable way is to create an adequate, flexible, and scalable project folder structure.

Having a project folder structure that is adequate and scalable enough to accommodate changes, as well as one that is flexible or dynamic enough to welcome those changes without breaking anything, will inevitably provide you with a greater value for your time. How? The answer is reusability.
While this article's project folder structure is for a React application, it still outlines some important tips on how your project directory should be structured for reuse, which can ultimately lead to greater productivity. It should be noted, however, that this is only a proposed template that you can utilize for your projects.

What to include in your project directory

In a typical React App project directory, there are three primary subdirectories: node_modules, public and src.

• node_modules: This folder contains all npm modules.
• public: This folder should contain anything that is not used when your app is compiled.
• src: This folder should contain anything that is used when your app is compiled.

react-app 
        |---node_modules
        |---public
        |---src

We are not interested in the node_modules subdirectory. In most cases, you will not need to open this folder. The other folder is the public folder. The index.html file in the public folder is of particular interest. Other files in this folder, such as the favicon, come into the picture when they are referenced in the index.html file.

        |---public
                 |---assets
                 |---index.html

Given that React is component-centric, you will spend the majority of your time in the src folder, specifically in the components subdirectory. With the help of the graphic below, the assets and components subdirectories are self-explanatory. At this point, it is worth noting, however, that an alternative to the structure presented here is to add the individual assets and utilities to their respective components. By doing this, you are ensuring that all of the components are self-contained. However, my concept is focused on having a single point of entry for accessing the respective pieces.
The page components themselves are placed in the templates folder. Base.js is an example of a template. This template could feature elements that are shared by all pages, such as the navigation bar, footer, and so on.
The config folder could include files such as environment variables, etc. While the utils folder can include everything from helper functions to custom hooks.

    |---src
          |---assets
                   |---fonts
                   |---icons
                   |---images
                   |---styles
          |---components
                       |---Component
                                   |---SubComponent
          |---templates
          |---config
          |---utils

Putting it altogether

In the end, your project folder structure should look like the following:

react-app
        |---node_modules
        |---public
                 |---index.html
                 |---assets
        |---src
              |---assets
                       |---fonts
                       |---icons
                       |---images
                       |---styles
              |---components
                           |---Component
                                       |---SubComponent
              |---templates
              |---config
              |---utils

Conclusion

Poor project folder organization can have long-term ramifications for the project’s scalability and maintainability. As such, it is important to invest some time in creating a fluid folder structure before you dive into coding.