Keeping your project structure organized
The feature-based structure is always a good starting point. As the project expands and patterns of duplication start to emerge, an additional layer can be introduced to eliminate redundancy.
For instance, let’s use the online shopping application again. It contains various pages:
- Home page
- Log in/sign up
- Store address search
- Product list
- Shopping cart
- Order details
- Payment
- Profile
- Coupon
In the initial stages, organizing pages based on their features is a common approach. We can create a folder for each feature and put all the related components, styles, and tests inside that folder.
Implementing the initial structure
The initial folder structure in the src
directory is quite straightforward and follows a feature-based approach, with each page having its own folder:
├── Address │ ├── AddressList │ ...