What is this post about?

In this post, we're going to see what are the best practices to have a clean, maintainable and also scalable react project. Rather than make a list and some diagrams, I'm going to share the methodology over a project, tips and tricks about how to think about your project structure.

Why folder structure matters?

You can't have a clean overview of your project when everything is messy. In the programming world, being organized helps you to keep your speed at a high and acceptable level, make the overall project map clean and understandable so you can make faster decisions, and have your ideal quality simultaneously. Briefly, you will be able to:

• Have a good overview of your project.
• Avoid duplication as you can see your previous works better and cleaner.
• Onboard another developer to your project much faster.
• Predict and provide yourself for scaling.
• Refactor and maintain your project at ease.

Keep these things in mind before your decisions

😵 Don't overthink about folder structure.

In the past, when I was about to start my first project, I can remember a lot of overthinking about the structure, about the folder and file names. After all, the truth is, do not think about your project for more than a couple of minutes. Even if you know there will be many things in your app, there is no need to waste your time creating a folder as a placeholder for future stuff. Nothing will happen if you put the files in the wrong place or name them incorrectly, you can always change them later.

💡 Inspire from similar open source projects

If your mind is locked up and you can't have a clear overview of your project, try to search for similar projects. Most of the time, you can find some GitHub repositories containing a template or a similar project. Look at different folders and file names and think for a moment if you'll have something like that(or not). Keep it in mind that you are looking at those projects to inspire and make your mind map of your project cleaner, So don't copy!

🤸‍♀️🤸‍♂️ Be flexible to the changes

You can create a tight structure and development methodology. First, it may seem perfect, but there is no guarantee that you won't change that anytime later. This is another good reason to remember “not waste your time overthinking about a tight project structure”.
Good structures are flexible ones, and flexible project structures shape as you proceed. Two different projects can have two different structures that suit them.

⚪ Think GENERIC

Don't label everything specifically at the beginning. Of course, this could sound too obvious but for now, think about a button for a form confirmation, you can call that the “user sign up button” or “user sign in button” and create two buttons at the end of the day, but in general, it is a “submit button”.

🏁 Start Your Project

That's all you need to keep in mind before starting your projects. As I mentioned, your project structure grows as you proceed. Creating a lot of placeholder folders and files at the beginning just makes it hard for you to change your approaches (if needed) and also isn't that useful.
It's important to start and use your energy toward your goals. These kinds of issues will fade out after a while.