Component Organization

✅ Recommended: PascalCase
Button.jsx
UserProfile.jsx
ProductCard.jsx
NavigationMenu.jsx

✅ Also acceptable: PascalCase with extension
Button.tsx
UserProfile.tsx

✅ For pages/routes: PascalCase or kebab-case
HomePage.jsx  or  home-page.jsx
AboutPage.jsx  or  about-page.jsx

❌ Avoid:
button.jsx           // lowercase (hard to distinguish from non-components)
user-profile.jsx     // kebab-case for components (inconsistent)
userProfile.jsx      // camelCase (not standard for components)

✅ Utilities and helpers: camelCase
formatDate.js
calculateTotal.js
validateEmail.js

✅ Hooks: camelCase with "use" prefix
useAuth.js
useFetch.js
useLocalStorage.js

✅ Constants: UPPER_SNAKE_CASE
API_ENDPOINTS.js
COLORS.js
CONFIG.js

✅ Types/Interfaces (TypeScript): PascalCase
User.types.ts
Product.interface.ts
types.ts

✅ Styles: Match component name
Button.css
Button.module.css
Button.styles.js

src/
├── features/
│   ├── auth/
│   │   ├── components/
│   │   │   ├── LoginForm.jsx
│   │   │   ├── SignupForm.jsx
│   │   │   └── PasswordReset.jsx
│   │   ├── hooks/
│   │   │   ├── useAuth.js
│   │   │   └── useLogin.js
│   │   ├── services/
│   │   │   └── authService.js
│   │   ├── utils/
│   │   │   └── validation.js
│   │   └── index.js
│   │
│   ├── products/
│   │   ├── components/
│   │   │   ├── ProductCard.jsx
│   │   │   ├── ProductList.jsx
│   │   │   └── ProductDetail.jsx
│   │   ├── hooks/
│   │   │   └── useProducts.js
│   │   └── index.js
│   │
│   └── user/
│       ├── components/
│       │   ├── UserProfile.jsx
│       │   └── UserSettings.jsx
│       ├── hooks/
│       │   └── useUser.js
│       └── index.js
│
├── components/           # Shared/reusable components
│   ├── ui/
│   │   ├── Button.jsx
│   │   ├── Input.jsx
│   │   ├── Modal.jsx
│   │   └── Card.jsx
│   └── layout/
│       ├── Header.jsx
│       ├── Footer.jsx
│       └── Sidebar.jsx
│
├── hooks/               # Shared hooks
│   ├── useLocalStorage.js
│   ├── useDebounce.js
│   └── useWindowSize.js
│
├── utils/               # Shared utilities
│   ├── formatDate.js
│   ├── api.js
│   └── constants.js
│
├── pages/               # Page components
│   ├── HomePage.jsx
│   ├── AboutPage.jsx
│   └── DashboardPage.jsx
│
├── App.jsx
└── index.js

Benefits:
✅ Related code grouped together
✅ Easy to find feature-specific code
✅ Clear separation of concerns
✅ Easy to add/remove features
✅ Scales well for large apps

src/
├── components/
│   ├── Button.jsx
│   ├── Card.jsx
│   ├── Header.jsx
│   ├── Footer.jsx
│   ├── LoginForm.jsx
│   ├── ProductCard.jsx
│   └── UserProfile.jsx
│
├── hooks/
│   ├── useAuth.js
│   ├── useFetch.js
│   └── useProducts.js
│
├── pages/
│   ├── HomePage.jsx
│   ├── ProductsPage.jsx
│   └── ProfilePage.jsx
│
├── services/
│   ├── authService.js
│   └── apiService.js
│
├── utils/
│   ├── formatDate.js
│   └── validation.js
│
├── App.jsx
└── index.js

Good for:
✅ Small to medium apps
✅ Simple projects
✅ Learning/prototypes

Challenges:
❌ Hard to scale
❌ Mixing unrelated code
❌ Difficult to find related files

src/
├── features/            # Feature-specific code
│   ├── auth/
│   │   ├── LoginForm.jsx
│   │   ├── useAuth.js
│   │   └── authService.js
│   │
│   └── products/
│       ├── ProductList.jsx
│       ├── ProductCard.jsx
│       └── useProducts.js
│
├── components/          # Shared components only
│   ├── Button.jsx
│   ├── Input.jsx
│   └── Modal.jsx
│
├── hooks/              # Shared hooks only
│   ├── useDebounce.js
│   └── useLocalStorage.js
│
├── layouts/            # Page layouts
│   ├── MainLayout.jsx
│   └── DashboardLayout.jsx
│
├── pages/              # Route components
│   ├── HomePage.jsx
│   ├── DashboardPage.jsx
│   └── NotFoundPage.jsx
│
├── services/           # API services
│   └── api.js
│
├── utils/              # Utilities
│   ├── formatDate.js
│   └── constants.js
│
├── App.jsx
└── index.js

✅ Best of both worlds
✅ Clear separation
✅ Easy to navigate
✅ Scales well

// Simple components in one file
import React from 'react'
import './Button.css'

function Button({ children, variant = 'primary', onClick, disabled }) {
  return (
    <button 
      className={`btn btn-${variant}`}
      onClick={onClick}
      disabled={disabled}
    >
      {children}
    </button>
  )
}

export default Button

// Good for: Simple, self-contained components

ProductCard/
├── ProductCard.jsx       # Main component
├── ProductCard.module.css
├── ProductCard.test.jsx  # Tests
├── useProductCard.js     # Component-specific hook
└── index.js              # Public API

// index.js
export { default } from './ProductCard'
export { useProductCard } from './useProductCard'

Good for:
✅ Complex components
✅ Components with tests
✅ Components with styles
✅ Components with hooks

auth/
├── components/
│   ├── LoginForm/
│   │   ├── LoginForm.jsx
│   │   ├── LoginForm.module.css
│   │   └── LoginForm.test.jsx
│   │
│   └── SignupForm/
│       ├── SignupForm.jsx
│       └── SignupForm.test.jsx
│
├── hooks/
│   ├── useAuth.js
│   └── useLogin.js
│
├── services/
│   └── authService.js
│
├── utils/
│   └── validation.js
│
├── types.ts             # TypeScript types
├── constants.js         # Feature constants
└── index.js             # Public exports

// index.js - Export only what other features need
export { LoginForm, SignupForm } from './components'
export { useAuth } from './hooks'
export { login, logout } from './services/authService'

// pages/DashboardPage.jsx
import DashboardLayout from '../layouts/DashboardLayout'
import { UserStats, RecentActivity, QuickActions } from '../features/dashboard'

function DashboardPage() {
  return (
    <DashboardLayout>
      <h1>Dashboard</h1>
      <UserStats />
      <RecentActivity />
      <QuickActions />
    </DashboardLayout>
  )
}

export default DashboardPage

// Characteristics:
// - Corresponds to routes
// - Composes other components
// - Minimal logic
// - Usually in pages/ folder

// layouts/MainLayout.jsx
import Header from '../components/layout/Header'
import Footer from '../components/layout/Footer'
import Sidebar from '../components/layout/Sidebar'

function MainLayout({ children }) {
  return (
    <div className="main-layout">
      <Header />
      <div className="content-wrapper">
        <Sidebar />
        <main className="main-content">
          {children}
        </main>
      </div>
      <Footer />
    </div>
  )
}

export default MainLayout

// Characteristics:
// - Wraps other components
// - Defines page structure
// - Usually receives children
// - Shared across pages

// features/products/ProductList.jsx
import { useProducts } from './hooks/useProducts'
import ProductCard from './ProductCard'
import LoadingSpinner from '../../components/LoadingSpinner'

function ProductList({ category }) {
  const { products, loading, error } = useProducts(category)
  
  if (loading) return <LoadingSpinner />
  if (error) return <div>Error: {error}</div>
  
  return (
    <div className="product-list">
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  )
}

export default ProductList

// Characteristics:
// - Feature-specific logic
// - May fetch data
// - Business logic
// - In features/ folder

// components/ui/Button.jsx
function Button({ 
  children, 
  variant = 'primary', 
  size = 'medium',
  onClick, 
  disabled 
}) {
  return (
    <button 
      className={`btn btn-${variant} btn-${size}`}
      onClick={onClick}
      disabled={disabled}
    >
      {children}
    </button>
  )
}

export default Button

// Characteristics:
// - Generic/reusable
// - No business logic
// - Presentation only
// - Used across features
// - In components/ folder

// ✅ Default export - Good for main component
// Button.jsx
function Button() { }
export default Button

// Usage
import Button from './Button'

// ✅ Named exports - Good for multiple exports
// utils.js
export function formatDate() { }
export function formatCurrency() { }

// Usage
import { formatDate, formatCurrency } from './utils'

// ✅ Hybrid - Component + utilities
// ProductCard.jsx
function ProductCard() { }
export default ProductCard

export function formatPrice() { }
export const CURRENCY = 'USD'

// Usage
import ProductCard, { formatPrice, CURRENCY } from './ProductCard'

// ❌ Avoid mixing patterns inconsistently
// Pick one pattern and stick to it!

// components/ui/index.js
export { default as Button } from './Button'
export { default as Input } from './Input'
export { default as Modal } from './Modal'
export { default as Card } from './Card'

// Usage - Clean imports!
import { Button, Input, Modal } from '../components/ui'

// Instead of:
import Button from '../components/ui/Button'
import Input from '../components/ui/Input'
import Modal from '../components/ui/Modal'

// ⚠️ Warning: Can affect tree-shaking
// Use with caution in large apps

// Better for features:
// features/auth/index.js
export { LoginForm } from './components/LoginForm'
export { SignupForm } from './components/SignupForm'
export { useAuth } from './hooks/useAuth'

// Now other features import from feature root:
import { LoginForm, useAuth } from '../features/auth'

// jsconfig.json or tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

// Before: Relative imports
import Button from '../../../components/ui/Button'
import { useAuth } from '../../../hooks/useAuth'

// After: Absolute imports
import Button from 'components/ui/Button'
import { useAuth } from 'hooks/useAuth'

// Or with path aliases:
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@hooks/*": ["src/hooks/*"],
      "@utils/*": ["src/utils/*"],
      "@features/*": ["src/features/*"]
    }
  }
}

// Usage:
import Button from '@components/ui/Button'
import { useAuth } from '@hooks/useAuth'

// Benefits:
// ✅ Easier refactoring
// ✅ More readable
// ✅ Less ../ navigation

Small app (< 10 components):
src/
├── components/
├── App.jsx
└── index.js

Medium app (10-50 components):
src/
├── components/
├── hooks/
├── utils/
├── pages/
└── App.jsx

Large app (50+ components):
src/
├── features/
├── components/
├── hooks/
├── utils/
├── pages/
└── App.jsx

Don't over-engineer early!

✅ Keep related files together
ProductCard/
├── ProductCard.jsx
├── ProductCard.css
├── ProductCard.test.jsx
└── useProductCard.js

❌ Don't separate by type when closely related
components/
  └── ProductCard.jsx
styles/
  └── ProductCard.css
tests/
  └── ProductCard.test.jsx
hooks/
  └── useProductCard.js

// ❌ Avoid: Multiple components in one file
function Header() { }
function Navigation() { }
function UserMenu() { }

// ✅ Good: One main component
function Header() { }

// Small helper components are OK
function HeaderLink({ href, children }) { }

// ✅ Better: Extract if used elsewhere
// Header.jsx
import Navigation from './Navigation'
import UserMenu from './UserMenu'

function Header() {
  return (
    <header>
      <Navigation />
      <UserMenu />
    </header>
  )
}

# Project Structure

## Folder Organization
- `/features` - Feature-based modules
- `/components` - Shared/reusable components
- `/hooks` - Custom React hooks
- `/utils` - Helper functions
- `/pages` - Page components

## Naming Conventions
- Components: PascalCase (e.g., `UserProfile.jsx`)
- Hooks: camelCase with "use" prefix (e.g., `useAuth.js`)
- Utils: camelCase (e.g., `formatDate.js`)

## Import Rules
- Use absolute imports with @ aliases
- Barrel exports in feature modules
- Default exports for components