Project Structure. A Better Version?

How to Improve Project Structure

In this article, we want to acquaint you with our solution that improves the project structure.

What else can be improved, you ask? And what for?

It seems that it is simply an organization of connections and relationships between its elements. However, the correct architecture is the first step to successful project implementation!

Our solution is in creating a flexible starter kit (React Starter Kit) for projects on React + Redux and using it in new applications created by our company.

Being engaged in project development for one of our clients, we have come up with an understanding that our project should consist of components, containers, utils, configs, assets, lib, and middleware. However, as well as almost any other!

In other words, a container is like a page where components are located — kind of elements of this page.

The project structure is divided into types and modules.

We use a modular system that is very convenient and useful for designing the application architecture. By applying modularity, we have an opportunity to work with self-sufficient and rather independent modules (components). We can pull them from any point of the application and enjoy all benefits of such approach. What is more pleasant is that we shouldn’t duplicate code in case of its reuse. That is, having written the module once, we can use it the infinite number of times.

So what is the module like?

In our case, the module is a separate folder with the styles file and the actual component file. If the component contains another component, then, using the structure of the fractal type, we build the same module in this component. All structure consists of specular reflections.

To understand the context, here is a general scheme of the fractal type structure:

And here is an example of how it can be implemented:

Along with a component, the container also has the following structure:

And here is how it looks like in the example:

It is also important to remember about types!

Components in our projects happen to be different — custom or common.

Custom components are used only in a specific container and nowhere else.

Common components are taken out to a separate folder available to everyone. And therefore anyone can use them.

Utils and other project elements are stored in separate folders. And that’s extremely convenient! Thanks to it any component or a container can turn to these files and use their methods.

Conclusion

In this article, a certain structure of the project was described. Its implementation is caused by a set of advantages: clearness, commonality, and structure. It can be applied in almost any project. If needed, it allows a developer to replace a colleague rather easily in any project. As in familiar structure, it is much simpler to orient yourself.

So to speak, paid a visit and you feel right at home!

What advantages could you distinguish? Try and share your opinion with us!

If you liked this, show your support by clapping us to share with other people on Medium.

Follow us on Facebook, Instagram, LinkedIn, Behance, Medium and visit our corporate blog for more news and articles on smart solutions.

Any questions? Feel free to contact us!