Code Conventions

Files and Folders:

  • Use kebab-case for routes, folders, and files (e.g., user-profile/page.tsx, login-form/LoginForm.tsx).
  • Feature folders under app/ match routes (e.g., app/login/, app/user-profile/[id]/).

Components:

  • Use PascalCase for component files and exports (e.g., LoginForm.tsx, ProfileCard.tsx).
  • Place in feature-specific components/ (e.g., app/login/components/LoginForm.tsx) or shared components/ (e.g., components/Button/Button.tsx).

Hooks:

  • Use camelCase with use prefix (e.g., useLogin.ts, useUserProfile.ts).
  • Store in feature-specific hooks/ (e.g., app/login/hooks/useLogin.ts) or shared lib/hooks/.

Types:

  • Use camelCase for type files (e.g., login.types.ts, user.types.ts).
  • Use PascalCase for interfaces (e.g., LoginFormProps, UserData).
  • Store in feature-specific types/ (e.g., app/login/types/login.types.ts) or shared types/.

Styles:

  • Use kebab-case for CSS Modules (e.g., LoginForm.module.css).
  • Use camelCase for CSS class names (e.g., .loginForm, .profileCard).

API Routes:

  • Use kebab-case for API route files (e.g., app/api/auth/route.ts).

Commits:

  • Use [type]: Description (e.g., feat: add login form [NPW-456], fix: adjust button styles).
  • Types: feat, fix, docs, style, test, chore.

Dependencies File:

  • Name as dependencies.md in each feature folder (e.g., app/login/dependencies.md).

Example:

app/login/
├── page.tsx
├── components/
│   ├── LoginForm.tsx
│   ├── LoginForm.test.tsx
│   ├── LoginForm.module.css
├── hooks/
│   ├── useLogin.ts
├── types/
│   ├── login.types.ts
├── dependencies.md

// app/login/components/LoginForm.tsx
import Button from "@/components/Button/Button";
import styles from "./LoginForm.module.css";

interface LoginFormProps {
  onSubmit: (data: { email: string }) => void;
}

const LoginForm = ({ onSubmit }: LoginFormProps) => (
  <form className={styles.loginForm}>
    <Button label="Submit" onClick={() => onSubmit({ email: "" })} />
  </form>
);