frontend

Front-End Development Workflow

This rule provides comprehensive guidance for front-end development in Igniter.js + Next.js + Shadcn UI projects, ensuring consistent architecture, component patterns, and seamless integration with existing workflows.

1. Project Architecture & File Organization

1.1 Mandatory Project Structure

Presentation Layer Organization:

src/features/[feature]/presentation/
├── components/           # UI components (client/server)
│   ├── [component].tsx
│   ├── [component].client.tsx    # Client-only components
│   └── [component].server.tsx    # Server-only components
├── hooks/               # React hooks (useXxx patterns)
│   ├── use-[feature].tsx
│   └── use-[feature]-form.tsx
├── contexts/            # React contexts for state management
│   └── [feature]-context.tsx
├── utils/              # Pure utility functions
│   └── [specific-util-for-feature].ts // 1 util per file
└── types/              # Local type definitions
    └── [feature]-types.ts

Component File Naming Convention:

// ✅ CORRECT - Consistent naming
src/features/auth/presentation/
├── components/
│   ├── login-form.client.tsx      # Client component
│   ├── signup-form.client.tsx     # Client component
│   └── user-avatar.server.tsx     # Server component
├── hooks/
│   ├── use-auth-context.tsx       # Context hook
│   └── use-auth-form.tsx          # Form hook
└── contexts/
    └── auth-context.tsx           # React context

1.2 Component Architecture Patterns

Server vs Client Components:

// ✅ CORRECT - Server component (default)
export default function BoardList({ boards }: { boards: Board[] }) {
  return (
    <div>
      {boards.map(board => (
        <BoardCard key={board.id} board={board} />
      ))}
    </div>
  )
}

// ✅ CORRECT - Client component (interactive)
'use client'

export function BoardCard({ board }: { board: Board }) {
  const [isEditing, setIsEditing] = useState(false)

  return (
    <Card onClick={() => setIsEditing(true)}>
      {/* Interactive content */}
    </Card>
  )
}