CrossList App Development Rules

Development rules and conventions for the CrossList App, a marketplace management application that helps users cross-list products across multiple platforms.

Tech Stack

Package Management

When installing new packages, always use:

```bash

pnpm add <package-name>

```

For ShadCN components, use:

```bash

npx shadcn add <component-name>

```

Environment Variables

You cannot directly view or modify `.env` files. When environment variable changes are needed, provide clear instructions to the user about what they should add to their `.env` file, including:

Example format:

```

VITE_FIREBASE_API_KEY=your_api_key_here

```

Code Style

Functional Programming

Example

**Good** (Functional):

```javascript

const processProducts = (products) =>

products.filter(p => p.active).map(p => ({ ...p, listed: true }));

```

**Avoid** (OOP):

```javascript

class ProductProcessor {

process(products) {

// ...

}

}

```

Application Lifecycle

**Never** attempt to start or run the application yourself. The user has the development server running in a separate terminal.

When changes are made, inform the user that they may need to:

Database Schema Changes

When database schema modifications are required:

1. **Do not** execute SQL directly

2. **Write** the SQL statements to a file (e.g., `migrations/YYYY-MM-DD-description.sql`)

3. **Provide** clear comments explaining the changes

4. **Inform** the user they need to run the migration manually

Example migration file:

```sql

-- Add new column for product variants

ALTER TABLE products

ADD COLUMN variants JSONB DEFAULT '[]'::jsonb;

-- Create index for faster variant queries

CREATE INDEX idx_products_variants ON products USING GIN (variants);

```

Project Context

The CrossList App is designed to help users manage product listings across multiple marketplace platforms. Key features include:

The UI is based on Base44 design system, customized with Tailwind and ShadCN components.

Best Practices

1. **Components**: Keep React components small and focused

2. **State**: Use hooks (useState, useEffect, useContext) for state management

3. **API Calls**: Centralize API logic using Hono endpoints

4. **Types**: Leverage TypeScript where possible for type safety

5. **Accessibility**: Ensure components meet WCAG standards

6. **Performance**: Optimize re-renders and use React.memo when appropriate

File Organization

Maintain clean separation of concerns: