Project Structure

Directory Structure

Organize JavaScript projects using a clear and logical layout for maintainability and scalability.

Example:

my-js-project/
    src/
        modules/
        components/
        utils/
    public/
        assets/
            js/
            css/
            images/
        index.html
    tests/
    config/
    docs/
    .env
    package.json
    README.md

Rationale

A clear, consistent project structure improves maintainability, onboarding, and scalability. It helps teams collaborate and reduces confusion as the codebase grows.

Advanced Directory Layouts

Single Page Application (SPA):

my-spa/
    src/
        components/
        views/
        store/
        router/
        utils/
    public/
        assets/
        index.html
    tests/
    config/
    docs/
    .env
    package.json
    README.md

Node.js Backend:

my-node-app/
    src/
        controllers/
        models/
        routes/
        services/
        utils/
    tests/
    config/
    docs/
    .env
    package.json
    README.md

Library/Package:

my-lib/
    src/
    dist/
    tests/
    docs/
    package.json
    README.md

File Naming

• Use descriptive, consistent names for files and folders.
• Use kebab-case for file names (e.g., user-profile.js).
• Group related files by feature or domain.
• Use PascalCase for React/Vue components: UserProfile.js
• Use index.js for entry points in folders.
• Avoid spaces and special characters in names.

Organization

• Separate source code, tests, configuration, and documentation.
• Keep the root directory clean; avoid placing custom code outside src/.
• Document custom directories and their purpose for new team members.
• Refactor and reorganize as the project grows.
• Use README.md and docs/ for project documentation and onboarding.