src/ ├── features/ │ ├── products/ │ │ ├── components/ │ │ ├── hooks/ │ │ ├── services/ │ │ ├── types.ts │ │ └── index.ts │ ├── cart/ │ │ ├── components/ │ │ ├── hooks/ │ │ ├── store/ │ │ └── index.ts │ └── checkout/ │ ├── components/ │ ├── hooks/ │ ├── services/ │ ├── types.ts │ └── index.ts ├── common/ │ ├── components/ │ ├── hooks/ │ └── utils/ ├── config/ ├── styles/ ├── pages/ └── App.tsx

Let’s briefly break it down and discuss it at a high level, pinpointing some folders.

features/ - This directory contains all the major features of our application, each in its subdirectory. products/, cart/, checkout/ - These are individual features of your application. Each feature has its own set of:

components/: React components specific to this feature.

hooks/: Custom React hooks are used for this feature.

services/: API calls or other services related to this feature.

types.ts: This file contains the TypeScript used for that entity.

index.js: This file exports the main components/, hooks/, services/, and types.ts for easier importing elsewhere.

This organisation allows each feature to be encapsulated in a single scope, making it easy to manage, scale, test, and reuse.

common/ - This directory is for shared resources used across multiple features.

components/: Reusable React components like buttons.

hooks/: Custom hooks that might be used in multiple features.

utils/: Utility functions that are used throughout the application.

Following the same concept as the features/ folder, the common/ folder is whatever can be extracted and generalised throughout our application.

config/ - This contains configuration files for your application, such as environment variables or app-wide settings

https://medium.com/@tech-adventurer/mastering-react-a-senior-developer-s-best-practices-framework-️-6ea5a41292ae