Code Style

Shared conventions across all Housr repositories.

Language and Typing

• TypeScript for all JavaScript projects (Webapp, App). Strict mode enabled.
• PHP 8.2+ for all backend projects (API v1, API v2, Portal). Use typed properties and return types.

Component and Function Style

• Functional components only — no class components anywhere
• Use the function keyword for pure functions and components (not arrow functions for top-level declarations)
• Named exports for components — avoid default exports

// Good
export function PropertyCard({ house }: PropertyCardProps) {
  return <div>...</div>
}
 
// Avoid
export default ({ house }) => <div>...</div>

Directory and File Naming

• Lowercase with dashes for directory names: auth-wizard/, perk-partners/, house-card/
• Lowercase with dashes for component files: property-card.tsx, use-list-houses.ts
• Feature modules follow a consistent internal structure: components/, api/, hooks/, types/, utils/, constants/

Styling

• Tailwind CSS for all styling in Webapp and future web projects (Tailwind 4)
• Shadcn/UI (New York style) for UI components in Webapp
• Use cn() from src/lib/utils.ts for conditional class merging
• React Native StyleSheet or inline styles in the App (Flexbox layout)
• Poppins is the standard font across all products

TypeScript Conventions (App-Specific)

• No enums — use objects or maps instead
• Prefer interfaces over type aliases
• Descriptive variable names with auxiliary verbs: isLoading, hasError, canSubmit

// Good
interface House {
  id: number
  name: string
  isAvailable: boolean
}
 
// Avoid
enum HouseStatus {
  Available,
  Unavailable,
}

Code Organization

• File structure within a component file: exported component first, then subcomponents, helpers, static content, types
• Use early returns for error/edge conditions — avoid deep nesting
• Minimize inline code comments — code should be self-documenting
• Memoize with useMemo / useCallback to prevent unnecessary re-renders (App)

Icons

• Lucide React for UI icons (Webapp)
• FontAwesome for brand and solid icons (Webapp)
• Custom SVGs in src/features/icons/ or src/components/icons/

Formatting

• Prettier for all JavaScript/TypeScript formatting
• Run npm run format before committing
• ESLint configured per repo (Webapp uses next/core-web-vitals + next/typescript)