Project structure

Background

Good project structure helps you and your teammates to find quickly part of the application. Moreover, well-thought project structure increases your application’s scalability. It leads to less painful refactoring.

Rules

• Divide your application into logical parts

  • For example move views components to views directory

• Place files according to their scope

  • It’s good to have common helpers directory, but when helper is used only in one place, keep it near.

• Always keep third party libraries in node_modules, unless it’s necessary 

  • When you need to copy library to your project, add proper note to README file

• Add README - it really makes on-boarding easier

• Divide dependencies to dependencies and devDependencies in package.json

• Divide styles to global and component scoped

• Place folder with component’s tests in it’s directory

• Organise images directory according to one of the conventions:

  • by their file type

  • by their function

Implementation hints

The example of good project structure you can find in our react-ts-boilerplate repository.