.cursorrules

# Ethereum Forum Project - Cursor Rules

## Project Structure

This is a monorepo with two main components:

- `/web` - pnpm + Vite + React frontend project
- `/app` - Cargo + Rust backend project

## Package Management & Tooling

- **Frontend**: Always use `pnpm` commands, never `npm` or `npx`
- **Linting**: Run `pnpm lint:fix` to resolve frontend linting issues
- **OpenAPI**: This project uses autogenerated types from OpenAPI specifications
  - OpenAPI types are automatically built so long as the `pnpm dev` command is running, generally this might already be running in a different terminal so its worth checking if the generated types are up to date, or prompting the user to run `pnpm dev` if they are not up to date. (you can also explicitly run `pnpm api-schema`)

## Styling & CSS

- **Framework**: Tailwind CSS with PostCSS
- **Features**: Nested CSS and CSS custom properties (CSS vars)
- **Config**: Check `tailwindcss.config.js` and `index.css` for styling setup details
- **Class names**: Use the `classnames` utility function to combine class names
- **Template literal class names**: Avoid using template literal to concatenate class names, use the `classnames` utility function instead

## Code Organization

- **React Components**: Keep components clean and focused
- **Utilities**: Move reusable functions to `util` or `lib` folders instead of defining them inline in components
- **Example**: Functions like `toFirstLetterUppercase` should be extracted to utility modules in the util folder, not embedded in React components

## React Best Practices

- **Conditional Rendering**: Use `ts-pattern` with `match()` for complex conditional rendering instead of nested ternary operators
  - **Prefer**: `match(data).when(condition, renderer).otherwise(fallback)`
  - **Avoid**: `condition1 ? component1 : condition2 ? component2 : fallback`
  - **Benefits**: Better type safety, cleaner code, easier to maintain and debug
  - **Import**: Always import `{ match }` from `ts-pattern` when dealing with conditional rendering

## Development Guidelines

- Prefer extracting utility functions over inline definitions in React components
- Use the established folder structure for better code organization
- Always use pnpm for package management operations in the frontend