📂 Enterprise-Style Folder Structure & Conventions

This project is mainly focused on general folder structures and patterns followed at enterprise level. ⚠️ Note: Structures vary based on requirements — this is not a one-size-fits-all solution, but a good-to-go directory that works for most projects.

We aim to support major and popular libraries/frameworks including:

• Frontend → React, Next.js, Tailwind CSS
• Forms → Zod, Formik, React Hook Form
• State Management → Redux Toolkit (RTK), Zustand
• Backend → Node.js, FastAPI, NestJS
• Others → Testing, CI/CD, Authentication (NextAuth, Supabase, Clerk, Auth0), etc.

This structure helps teams quickly bootstrap enterprise-grade apps with consistent patterns.

📁 Folder Structure

src/
  ├── app/                # Next.js App Router (routes) (optional for NEXT APPS)
  │   └── route-name/
  │       ├── page.jsx    # Page file (only allowed here)
  │       └── layout.jsx  # Layout file (only allowed here)
  │
  ├── hooks/              # Custom React hooks
  │
  ├── store/              # State management (Zustand, Redux, etc.)
  │
  ├── modules/            # Full pages (Login, Dashboard, Form, etc.)
  │   └── login/
  │       ├── index.jsx
  │       ├── LoginContainer.jsx
  │       └── Login.jsx
  │       └── components/ # Module-specific components
  │
  ├── components/         # Shared/common components
  │   ├── UI/             # Custom UI components
  │   │   └── multi-select/
  │   │       └── index.jsx
  │   │
  │   └── forms/          # Form-related components
  │
  ├── utils/              # Utility/helper functions
  │
  └── types/              # TypeScript types/interfaces

📝 Rules & Conventions

1. Pages (src/app)

• Only page.jsx and layout.jsx files are allowed inside route folders.

• Example:

  src/app/login/page.jsx
  src/app/login/layout.jsx

2. Modules (src/modules)

• Each module = a full page (e.g., Login, Form, Dashboard).
• Naming convention: kebab-case (e.g., login-form, user-profile).

Required Files Inside a Module

1. index.jsx → Main export (import this everywhere).
2. ModuleContainer.jsx → Business logic / state / data fetching.
3. Module.jsx → Pure UI component (presentational).

Import Flow

• Module.jsx → imported inside ModuleContainer.jsx
• ModuleContainer.jsx → imported inside index.jsx
• Always import only index.jsx when using the module in other parts of the app.

Module-Specific Components

• Place in: src/modules/module-name/components/

• Example:

  src/modules/login/components/LoginButton.jsx

3. Components (src/components)

• Shared/common components used across modules.

• Each component folder should contain only an index.jsx file for clean imports.

• Example:

  src/components/UI/multi-select/index.jsx

4. Hooks (src/hooks)

• Store all custom hooks.
• Naming: useSomething.js

5. Store (src/store)

• Centralized state management (Zustand/Redux).

6. Utils (src/utils)

• General utility/helper functions.

7. Types (src/types)

• Global TypeScript types & interfaces.

✅ Example: Login Page Flow

1. Create a module folder:

   src/modules/login/

2. Add three base files:

   • Login.jsx → UI
   • LoginContainer.jsx → logic + hooks + API calls
   • index.jsx → entry point (exports container)

3. Usage:

   import Login from "@/modules/login";