Utils Folder Design¶

Purpose¶

The utils folder holds reusable code that helps with common tasks. It's organised by purpose to keep things tidy, group related logic together, and make it clear which domain owns what. Each utility should either be tied to a specific part of the app (like listings or users) or handle something used across the whole system (like formatting dates or checking inputs).

Folder Structure¶

laravel/resources/inertia/scripts/
└── utils/
    ├── resources/
    │   ├── listing-fields/
    │   │   ├── constants.ts
    │   │   ├── types.d.ts
    │   │   └── helpers.ts
    │   ├── auctions/
    │   │   └── ...
    │   └── users/
    │       └── ...
    ├── system/
    │   ├── constants.ts
    │   ├── types.ts
    │   └── helpers.ts
    |   └── date-helpers.ts
    |   └── string-helpers.ts
    |   └── validation.ts

`resources/`¶

Each folder under resources/ maps to a frontend (inspired by backend) domain. Place domain-specific constants, helpers, and types here.

constants.ts: Constants related to the domain.
types.d.ts: TS types used across components.
helpers.ts: Pure utility functions used in the domain.

A pure function is a function that always returns the same output given a specific input. A pure function does not change any value or state outside its scope, and it doesn't depend on any value outside its scope. It only depends on the input given to the function and does not produce any side effects

`system/`¶

Use system/ for application-wide helpers and constants.

constants.ts: Global constants such as locales or themes.
date-helpers.ts, string-helpers.ts, validation.ts: Focused helper modules.
types.d.ts: Shared, non-domain TS types.

Naming Conventions¶

Constant objects must use PascalCase keys and the same for variable names.
TypeScript types go in .ts or .d.ts depending on location and usage.
Avoid default exports (https://dev.to/phuocng/avoid-using-default-exports-a1c)

export const ListingCategory = {
  CatNumberPlates: 24,
  CatParts: 11,
} as const;