The perfect folder structure for web-dev

The structure

└── 🗃️  Project
    ├── 📁`api` *
    ├── 📁`app` *
    ├── 📁`components` *
    ├── 📁`database` *
    ├── 📁`lib` *
    ├── 📁`utils` *
    └── 📁`features`
        └── 📁products
		    ├── 📁`components`
		    └── 📁`database`
        ├── 📁sales
		    └── 📁`components`
        └── 📁users
		    ├── 📁`lib`
		    └── 📁`database`

• Replicate the global structure * inside each of the features/ as per required. (Above, the folders are highlighted, any keyword kind of folders are covered in back-ticks, like `this`)

• Create only those folders that you are using (like an opt-in solution).

• Glue together all the components (from the features/) into the app directory.

{
  "extends": ["next/core-web-vitals", "next/typescript"],
  "plugins": ["boundaries"],
  "settings": {
    "boundaries/include": ["src/**/*"],
    "boundaries/elements": [
      {
        "mode": "full",
        "type": "shared",
        "pattern": [
          "src/components/**/*",
          "src/data/**/*",
          "src/drizzle/**/*",
          "src/hooks/**/*",
          "src/lib/**/*",
          "src/server/**/*"
        ]
      },
      {
        "mode": "full",
        "type": "feature",
        "capture": ["featureName"],
        "pattern": ["src/features/*/**/*"]
      },
      {
        "mode": "full",
        "type": "app",
        "capture": ["_", "fileName"],
        "pattern": ["src/app/**/*"]
      },
      {
        "mode": "full",
        "type": "neverImport",
        "pattern": ["src/*", "src/tasks/**/*"]
      }
    ]
  },
  "rules": {
    "boundaries/no-unknown": ["error"],
    "boundaries/no-unknown-files": ["error"],
    "boundaries/element-types": [
      "error",
      {
        "default": "disallow",
        "rules": [
          {
            "from": ["shared"],
            "allow": ["shared"]
          },
          {
            "from": ["feature"],
            "allow": [
              "shared",
              ["feature", { "featureName": "${from.featureName}" }]
            ]
          },
          {
            "from": ["app", "neverImport"],
            "allow": ["shared", "feature"]
          },
          {
            "from": ["app"],
            "allow": [["app", { "fileName": "*.css" }]]
          }
        ]
      }
    ]
  }
}