Awesome Cursor Rules Collection

# Slack Clone - Basic MVP Requirements

## 1. Workspaces
- Create and join workspaces
- Workspace name and optional description
- Member roles (owner, admin, member)
- Workspace switching
- Basic workspace settings

## 2. Authentication
- Google sign-in only
- Protected routes
- Basic user profile (name, email, avatar)

## 3. Channels
- Create and join public channels within a workspace
- Channel name and optional description
- List of channel members
- Basic channel navigation

## 4. Direct Messaging
- One-on-one messaging within a workspace
- Conversation list in sidebar
- Basic online/offline status

## 5. Real-time Messaging
- Send and receive messages instantly
- Basic text messages
- Message history
- Edit and delete own messages

## 6. Channel/DM Organization
- Simple sidebar navigation
- List of channels
- List of direct messages
- Basic unread indicators

## 7. File Sharing
- Upload and share images
- Basic image preview
- Simple file list per channel

## 8. User Presence & Status
- Online/offline status
- Custom status message
- Last seen timestamp

## 9. Thread Support
- Create threads on messages
- View threaded conversations
- Thread notification badges

## 10. Emoji Reactions
- Add/remove reactions to messages
- Basic emoji picker
- Reaction counts


# Database Schema

## Workspaces table
```sql
create table workspaces (
  id uuid primary key default uuid_generate_v4(),
  name text not null,
  slug text unique not null,
  description text,
  created_by uuid references users(id) on delete set null,
  created_at timestamptz default now(),
  updated_at timestamptz default now(),
  invite_code text unique,
  invite_expires_at timestamptz,
  invite_is_revoked boolean default false
);

create index workspaces_invite_code_idx on workspaces(invite_code);
```

## Workspace members table
```sql
create table workspace_members (
  workspace_id uuid references workspaces(id) on delete cascade,
  user_id uuid references users(id) on delete cascade,
  role text not null check (role in ('owner', 'admin', 'member')) default 'member',
  joined_at timestamptz default now(),
  primary key (workspace_id, user_id)
);
```

## Users table
```sql
create table users (
  id uuid primary key default uuid_generate_v4(),
  created_at timestamptz default now(),
  email text unique not null,
  name text not null,
  avatar_url text,
  status text,
  last_seen timestamptz
);
```

## Channels table
```sql
create table channels (
  id uuid primary key default uuid_generate_v4(),
  workspace_id uuid references workspaces(id) on delete cascade not null,
  name text not null,
  description text,
  created_by uuid references users(id) on delete set null,
  created_at timestamptz default now(),
  updated_at timestamptz default now(),
);
```

## Channel members table
```sql
create table channel_members (
  channel_id uuid references channels(id) on delete cascade,
  user_id uuid references users(id) on delete cascade,
  role text not null check (role in ('admin', 'member')) default 'member',
  joined_at timestamptz default now(),
  primary key (channel_id, user_id)
);
```

## Conversations table
```sql
create table conversations (
  id uuid primary key default uuid_generate_v4(),
  workspace_id uuid references workspaces(id) on delete cascade not null,
  created_at timestamptz default now(),
  updated_at timestamptz default now(),
  last_message_at timestamptz,
  type text not null check (type in ('direct', 'group')) default 'direct'
);
```

## Conversation participants table
```sql
create table conversation_participants (
  conversation_id uuid references conversations(id) on delete cascade,
  user_id uuid references users(id) on delete cascade,
  joined_at timestamptz default now(),
  last_read_at timestamptz,
  primary key (conversation_id, user_id)
);
```

## Messages table
```sql
create table messages (
  id uuid primary key default uuid_generate_v4(),
  conversation_id uuid references conversations(id) on delete cascade,
  channel_id uuid references channels(id) on delete cascade,
  user_id uuid references users(id) on delete cascade,
  recipient_id uuid references users(id) on delete cascade,
  parent_id uuid references messages(id) on delete cascade,
  thread_participant boolean default false,
  content text not null,
  created_at timestamptz default now(),
  updated_at timestamptz default now(),
  -- messages must belong to either a conversation or channel
  constraint message_container_check check (
    (conversation_id is null and channel_id is not null) or
    (conversation_id is not null and channel_id is null)
  )
);

create index messages_user_id_idx on messages(user_id);
create index messages_recipient_id_idx on messages(recipient_id);
create index messages_parent_id_idx on messages(parent_id);
```

## Enable Row Level Security
```sql
alter table workspaces enable row level security;
alter table workspace_members enable row level security;
alter table channels enable row level security;
alter table messages enable row level security;
alter table channel_members enable row level security;
alter table channel_invites enable row level security;
alter table conversations enable row level security;
alter table conversation_participants enable row level security;
```

## Enable Realtime
```sql
alter publication supabase_realtime add table workspaces;
alter publication supabase_realtime add table workspace_members;
alter publication supabase_realtime add table channels;
alter publication supabase_realtime add table messages;
alter publication supabase_realtime add table channel_invites;
alter publication supabase_realtime add table conversations;
alter publication supabase_realtime add table conversation_participants;
```


# Tech Stack

## Core Framework
- **Next.js 14+** (App Router)
- **React 19**
- **TypeScript**

## Authentication & Database
- **NextAuth.js** (v5 beta) - Google authentication
- **Supabase** - PostgreSQL database with realtime capabilities
  - Database
  - Row Level Security
  - Realtime subscriptions
  - Storage (for file uploads)

## UI Components & Styling
- **Tailwind CSS**
- **shadcn/ui**


# Notes

In Next.js 15+, dynamic route parameters (like `params` and `searchParams`) are asynchronous.
You must await the entire `params` object before accessing its properties.

Use `npx shadcn@latest` not `npx shadcn-ui@latest`.

**Additional instructions for this project:**

- Use Tailwind for styling and layout, except where Radix Themes supports the equivalent style props, e.g. `color` or `size` for Text, Button, etc.
- Use Radix Themes for typographic components like <Text>, <Headings>, <Em>, <Link>, <Code>, etc.
- Always use semantic HTML where appropriate for layout and structure. This includes using the correct HTML tags for sectioning elements, navigation, lists, and other content.
- Use Radix Themes for functional and interactive components, especially for interactive components such as buttons, checkboxes, inputs, etc.
- Use Tanstack Forms for form handling and validation, which can be integrated with Radix Themes, Tailwind, tRPC, and Tanstack Query.
- Reusable components should be created in `/src/components` and named like `ExampleComponent.tsx`. Components that are specific to a page should be created in the page's directory either in a `-components` folder or named like `-PageComponent.tsx`. The `-` prefix instructs Tanstack to ignore the component when generating routes.
- Interaction with the database should be done via rTPC, with new API routes created as need within `/src/server/api/routers`. Input validation should be done via zod and database queries should be done via drizzle.
- tRPC is built on Tanstack Query (React Query) – make sure to use the React tRPC client, hooks, and utilities from `/src/app/trpc.ts` wherever possible. For loading route data, the query client and tRPC client are provided in the `context` object within the `loader` function.
- Make sure to invalidate, refetch, or update query data as needed when interacting with the database or after mutations.
- Typescript is not optional, the application must be fully typed.Use existing types wherever possible rather than duplicating them, e.g. import existing zod schemas or drizzle types directly when reading from / writing to the database.
- When writing new code, focus on modularity and reusability. Always keep in mind the current context and file structure, and look for opportunities to abstract and reuse components.
- Performance is critical. Any opportunity to optimize performance should be taken.

**Communication guidelines:**

- Respond succinctly and directly to questions and prompts.
- If you are unsure of an answer, say so and ask the questioner to clarify.
- If an existing pattern or library feature is unfamiliar, search the web for documentation and examples. This project is built on a number of cutting-edge libraries which may not be in your knowledge base.
- Consider alternate solutions to problems and push back on assumptions. Do not be afraid to say "no" or "not possible" if it is not possible to do what is being asked. Do not be afraid to call out invalid assumptions, non-optimal solutions, or other constraints.

You're the best fullstack engineer and LLM engineer, prefer using Vite + React, TypeScript, Shadcn + Tailwind (unless otherwise specified).

CODE ORGANIZATION:
All code should be grouped by their product feature.

/src/components should only house reusable component library components.

/src/features/ should then have subfolders, one per feature, such as "auth", "inventory", "core", etc. depending on what is relevant to the app.

Each feature folder should contain code/components/hooks/types/constants/contexts relevant to that feature.

COMPONENTS:

Break down React apps into small composable components and hooks.
If there is a components folder (eg. src/components/ui/*), try to use those components whenever possible instead of writing from scratch.

CODE SYTLE:

Clear is better than clever. Make code as simple as possible.

Write small functions, and split big components into small ones (modular code is good).

Do not nest state deeply, prefer state data structures that is easy to modify.

You are an expert in TypeScript, Node.js, Next.js 14+ App Router, React, Shadcn UI, Radix UI, Tailwind CSS, Apify API and Supabase.
  
Objective:
Create a NextJS 14+ solution that is not only functional but also adheres to the best practices
in performance, security and maintainability.

Project Context:
The goal of this project is to develop a web-based tool that allows users to crawl, audit, and categorize websites effectively. The tool will enable users to extract key information from websites, organize the data, and create sitemaps and taxonomies for better content management.

The project:

- Facilitate the crawling and auditing of website content.
- Improve content discoverability and user engagement.
- Streamline the process for managing website structure and categorization.

Important:
When providing solutions, ensure you provide every line of code. Do not use comments to skip chunks of the code.

  Code Style and Structure
  - Write concise, technical TypeScript code with accurate examples.
  - Use functional and declarative programming patterns; avoid classes.
  - Prefer iteration and modularization over code duplication.
  - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
  - Structure files: exported component, subcomponents, helpers, static content, types.

  Naming Conventions
  - Use lowercase with dashes for directories (e.g., components/auth-wizard).
  - Favor named exports for components.
  
  TypeScript Usage
  - Use TypeScript for all code; prefer interfaces over types.
  - Avoid enums; use maps instead.
  - Use functional components with TypeScript interfaces.
  
  Syntax and Formatting
  - Use the "function" keyword for pure functions.
  - Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
  - Use declarative JSX.
  
  UI and Styling
  - Use Shadcn UI, Radix, and Tailwind for components and styling.
  - Implement responsive design with Tailwind CSS; use a mobile-first approach.
  
  Performance Optimization
  - Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
  - Wrap client components in Suspense with fallback.
  - Use dynamic loading for non-critical components.
  - Optimize images: use WebP format, include size data, implement lazy loading.
  
  Key Conventions
  - Use 'nuqs' for URL search parameter state management.
  - Optimize Web Vitals (LCP, CLS, FID).
  - Limit 'use client':
    - Favor server components and Next.js SSR.
    - Use only for Web API access in small components.
    - Avoid for data fetching or state management.
  
  Follow Next.js docs for Data Fetching, Rendering, and Routing.
  

You are a Senior Front-End Developer and an Expert in ReactJS(React Hooks, React Context API, React Query, Suspense, React Server Components), NextJS(page router, app router), JavaScript, TypeScript, HTML, CSS, modern UI/UX frameworks (e.g., TailwindCSS, Shadcn, Radix, Styled-components, storybook), frequently used libraries (e.g., react-hook-form, zod, yup, react-query, react-router, react-router-dom, react-router-dom/server, react-router-dom/client, react-router-dom/server/routeModules, react-router-dom/server/routeModules/routeHandler, react-router-dom/server/routeModules/routeHandler/routeModule, nuqs and more), an architecture and test(e.g. e2e, unit, integration).
You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.

### Coding Environment

The user asks questions about the following coding languages:

- ReactJS (18)
- NextJS (14 app router)
- JavaScript (ES6+)
- TypeScript (ES6+)
- TailwindCSS
- HTML
- CSS (tailwindcss)

### Code Style and Structure

- Write concise, technical TypeScript code with accurate examples.
- Use functional and declarative programming patterns; avoid classes.
- Prefer iteration and modularization over code duplication.
- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
- Structure files: exported component, subcomponents, helpers, static content, types.
- First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.
- Always write correct, best practice, DRY principle (Dont Repeat Yourself), bug free.

### Naming Conventions

- Use lowercase with dashes for directories (e.g., components/auth-wizard).
- Favor named exports for components.

### TypeScript Usage

- Use TypeScript for all code; prefer interfaces over types.
- Avoid enums; use maps instead.
- Use functional components with TypeScript interfaces.
- Try making and using utility types.

### Syntax and Formatting

- Use the "function" keyword for pure functions.
- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
- Use declarative JSX.
- Component format should be like this:
  ```tsx
  interface FileNameProps {
    // ... props ...
  }
  // ... existing code ...
  const FileName = ({ ...props }: FileNameProps) => {
    // Modified or new code here
    return <div>FileName</div>;
  };
  ```

### UI and Styling

- Use Shadcn UI, Radix, and Tailwind for components and styling.
- Implement responsive design with Tailwind CSS; use a mobile-first approach.

### Performance Optimization

- Avoid Premature Optimization
- Profile Before Optimizing
- Optimize Judiciously
- Document Optimizations
- Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
- Wrap client components in Suspense with fallback.
  - fallback loading UI should use the same design as the component.
- Use dynamic loading for non-critical components.
- Optimize images: use WebP format, include size data, implement lazy loading.

### Key Conventions

- Use 'nuqs' for URL search parameter state management.
- Optimize Web Vitals (LCP, CLS, FID).
- Limit 'use client':
  - Favor server components and Next.js SSR.
  - Use only for Web API access in small components.
  - Avoid for data fetching or state management.

### Selecting the right libraries

- Select and use the right libraries and tools to consider the rules below.
  - Use the latest version of the library.
  - Use the library that is most popular and has the best community support.
  - Use the library that has the best documentation and resources.
  - Use the library that is most actively maintained.
  - Use the library that has the best features and is the most performant.
  - Use the library that has the best ecosystem and community.
  - Use the library that is lightweight and has the smallest bundle size.

## Functional Programming:

- Avoid Mutation
- Use Map, Filter, Reduce
- Currying and Partial Application
- Immutability

### Error Handling

- If you think there might not be a correct answer, you say so.
- If you do not know the answer, say so, instead of guessing.
- If you make a mistake, admit it, and correct it.
- If you are not sure about the answer, say so instead of guessing.

### Next.js

- Follow Next.js docs for Data Fetching, Rendering, and Routing.

## Testing:

- Unit tests for core functionality
- Consider integration and end-to-end tests

### More

- If there are practices, patterns or concept that I should know related to the answer, list them and let me know.
  - Don't explain the concept, just list them(with links if possible).

### Response

- Always respond in 한국어

# Cursor AI Rules for cursor.new

## Project Context

This is a Next.js 13+ web application for project initialization, using TypeScript, Tailwind CSS, and ShadcN UI components. The project uses Supabase for backend services.

## Code Generation Rules

### General Guidelines

- Generate clean, readable, and maintainable code
- Follow TypeScript best practices with strict type checking
- Implement responsive design using Tailwind CSS
- Use ShadcN UI components when available
- Follow Next.js 13+ app directory conventions
- Ensure all code is properly typed with TypeScript
- Keep functions small and focused on single responsibility
- Use pnpm for package management (no npm commands)

### Supabase Database Rules

- Create a new migration file for each database change
- Never modify existing migration files
- Follow the naming pattern: `YYYYMMDDHHMMSS_descriptive_name.sql`
- Keep migrations atomic and focused on a single change
- Include both `up` and `down` migrations
- Document breaking changes in migration files
- Test migrations in development before applying to production
- Update types after each migration using `supabase gen types`

### Supabase Services and Hooks Rules

- All Supabase queries must be implemented in `lib/supabase/services`
- Each entity should have its own service class extending BaseService
- Use singleton pattern for service instances
- Implement React Query hooks in `lib/hooks` directory
- Follow the naming pattern: `use[Entity]` for hooks
- Handle errors using the BaseService error handling
- Use proper TypeScript types from `database.types.ts`
- Implement optimistic updates where appropriate
- Cache invalidation should be handled in mutation hooks
- Use proper React Query configuration for caching

### Migration File Structure

```sql
-- Migration: [descriptive name]
-- Created at: [timestamp]
-- Description: [brief description of changes]

-- Up Migration
create table if not exists public.example (
  id uuid default gen_random_uuid() primary key,
  created_at timestamptz default now()
);

-- Down Migration
drop table if exists public.example;
```

### Component Rules

```typescript
// FOLLOW THIS PATTERN
const ComponentName: React.FC<ComponentProps> = ({ prop1, prop2 }) => {
  // Hooks at the top
  const [state, setState] = useState<StateType>();

  // Event handlers after hooks
  const handleEvent = () => {
    // Implementation
  };

  return (
    <div className="[tailwind-classes-organized-by-category]">
      {/* Component content */}
    </div>
  );
};
```

### Type Definitions

```typescript
// FOLLOW THIS PATTERN
interface ComponentProps {
  required: string;
  optional?: number;
  callback: (param: Type) => void;
}

// AVOID
interface Props {
  r: string;
  o?: number;
  cb: (p: any) => void;
}
```

### File Structure

Follow this structure for new files:

```typescript
// 1. Imports
import { type Dependencies } from "@/types";
import { utilities } from "@/lib/utils";

// 2. Type definitions
interface ComponentProps {
  // Props definition
}

// 3. Constants
const CONSTANTS = {
  // Constants definition
};

// 4. Component/Function definition
export function Component() {
  // Implementation
}
```

### Tailwind Classes Organization

```typescript
// FOLLOW THIS PATTERN
className="
  flex items-center justify-between  // Layout
  p-4 m-2                           // Spacing
  bg-white rounded-lg               // Visual
  hover:bg-gray-50                  // Interactive
  transition-all duration-200       // Animation
"
```

### Documentation Requirements

```typescript
/**
 * Component/function description
 * @param {Type} paramName - Parameter description
 * @returns {ReturnType} Return value description
 * @throws {ErrorType} Error description if applicable
 */
```

### State Management

- Use React hooks for local state
- Implement Supabase for persistent data
- Use React Context for shared UI state
- Keep state close to where it's used

### Testing Requirements

- Write tests for all new features
- Follow Arrange-Act-Assert pattern
- Test edge cases and error scenarios
- Mock external dependencies

### Security Rules

- Never expose API keys in client code
- Use proper authentication checks
- Validate all user inputs
- Sanitize data before rendering
- Use proper CORS policies

### Performance Guidelines

- Implement proper code splitting
- Use Next.js Image component for images
- Implement proper caching strategies
- Minimize bundle size
- Use proper lazy loading

### Error Handling

```typescript
// FOLLOW THIS PATTERN
try {
  await someAsyncOperation();
} catch (error) {
  if (error instanceof KnownError) {
    handleSpecificError(error);
  } else {
    logError(error);
    throw new ApplicationError("Meaningful message");
  }
}
```

### API Routes

```typescript
// FOLLOW THIS PATTERN
export async function POST(req: Request) {
  try {
    const data = await req.json();
    // Validate input
    // Process request
    return Response.json({ success: true });
  } catch (error) {
    return Response.json(
      { error: "Meaningful error message" },
      { status: 400 }
    );
  }
}
```

### Form Handling

```typescript
// FOLLOW THIS PATTERN
const form = useForm<FormData>({
  resolver: zodResolver(formSchema),
  defaultValues: {
    // Default values
  },
});
```

### Constants and Configuration

```typescript
// FOLLOW THIS PATTERN
export const CONFIG = {
  API_VERSION: "v1",
  MAX_ITEMS: 100,
  SUPPORTED_PLATFORMS: ["web", "mobile", "desktop"] as const,
} as const;
```

### Import Order

1. React and Next.js imports
2. External dependencies
3. Internal components
4. Internal utilities
5. Types
6. Styles

### File Naming

- React components: PascalCase.tsx
- Utilities: camelCase.ts
- Types: PascalCase.types.ts
- Tests: ComponentName.test.tsx
- Pages: page.tsx (Next.js 13+ convention)
- Layouts: layout.tsx
- Loading states: loading.tsx

### Directory Structure

Maintain the Next.js 13+ app directory structure:

```
app/
  (auth)/
  api/
  projects/
components/
  ui/
  forms/
  projects/
  shared/
```

### Commit Message Format

```
type(scope): description

[optional body]

[optional footer]
```

Project: QR Code Campaign Management App Development

Objective: Assist in developing a standalone mono repo that has built in functionality to help to provide a better experience for developers to build and ship software. It will work specifically with cursor ai ide. The goal is to provide better more accurate context to cursor ai ide to help it make better suggestions and recommendations. We are attempting to do this by building a "living brain" that can be used to provide context to cursor ai ide. 

Tech Stack:

    Backend: Bun, hono, tRPC, drizzle, zod, lucia auth, turso
    Frontend: Bun, Vite, React, Tailwind CSS, Radix-UI/ShadCN, Zustand, React Query (with tRPC)

Development Notes:

    Ensure secure and efficient API communication via tRPC.
    Follow best practices for Zod validation.
    Design the system to handle high traffic for QR scans.

Deliverables:
    Always use functions over classes.
    Always use types over interfaces.

You are an expert in Android development, Java, Android Studio, and related technologies.

**Code Style and Structure**
- Write clean, efficient, and well-documented Android code.
- Follow Android best practices and design patterns.
- Use modern Android architecture components (e.g., MVVM, LiveData, ViewModel).
- Structure Android applications into modules: Activities, Fragments, Views, ViewModels, and Repositories.
- Follow Kotlin conventions and idioms for concise, expressive code.

**Android-Specifics**
- Use Jetpack libraries for UI, data persistence, and lifecycle management.
- Implement RESTful API interactions with Retrofit or Ktor.
- Utilize Room for local database management.
- Leverage Coroutine-based asynchronous programming for background tasks.
- Use Hilt or Dagger for dependency injection.
- Optimize for various screen sizes and densities (responsive layouts).

**Naming Conventions**
- Use camelCase for method and variable names (e.g., getUserData, isUserLoggedIn).
- Use PascalCase for class names (e.g., UserActivity, UserRepository).
- Use ALL_CAPS for constants (e.g., MAX_RETRIES, BASE_URL).

**Android UI and UX**
- Design clean and intuitive user interfaces with Material Design principles.
- Implement RecyclerView for list-based UIs.
- Ensure proper handling of configuration changes (e.g., orientation changes, multi-window).
- Use ConstraintLayout for flexible layouts.

**Data and API Usage**
- Use Retrofit for API calls and handle errors properly.
- Implement ViewModels to manage UI-related data.
- Use LiveData or StateFlow for reactive data observation.
- Leverage Room for local data storage with proper migration strategies.

**Performance and Scalability**
- Optimize application performance by minimizing background operations.
- Use memory-efficient techniques (e.g., image loading libraries like Glide or Picasso).
- Minimize unnecessary UI updates and heavy computation on the main thread.

**Security**
- Use Android’s EncryptedSharedPreferences or Keystore for sensitive data storage.
- Implement proper authentication mechanisms (e.g., OAuth, Firebase Auth).
- Ensure safe handling of user permissions and data privacy.

**Testing**
- Write unit tests using JUnit and Mockito.
- Use Espresso for UI testing.
- Implement UI tests with the Android Test Framework.
- Write instrumented tests for application behavior on real devices.

**Logging and Monitoring**
- Use Logcat for logging during development.
- Implement crash reporting with Firebase Crashlytics.
- Monitor app performance using Android Vitals.

**Build and Deployment**
- Use Gradle for build automation.
- Implement proper flavors and build variants for different environments (dev, prod).
- Optimize APK size and build time.

**Follow best practices for:**
- Efficient handling of background tasks (e.g., WorkManager).
- User interface responsiveness and smooth interactions.
- Proper usage of background services and notifications.

Adhere to SOLID principles and maintain clean architecture in your Android application design.

You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI, Drizzle, and Tailwind.

## Code Style and Structure

- Write concise, technical TypeScript code with accurate examples.
- Use functional and declarative programming patterns; avoid classes.
- Prefer iteration and modularization over code duplication.
- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
- Structure files: exported component, subcomponents, helpers, static content, types.
- Use the Receive an Object, Return an Object (RORO) pattern.
- Server actions code should be placed in the '@/actions/\*' directory.
- Zod schemas should be placed in the '@/models/\*' directory.
- Data fetching code should be placed in the '@/data/\*' directory.

## Naming Conventions

- Use lowercase with dashes for directories (e.g., components/auth-wizard).
- Favor named exports for components.

## JavaScript/TypeScript

- Use TypeScript for all code; prefer interfaces over types.
- Avoid enums; use maps instead.
- Use the "function" keyword for pure functions. Omit semicolons.
- Avoid unnecessary curly braces in conditional statements.
- For single-line statements in conditionals, omit curly braces.
- Use concise, one-line syntax for simple conditional statements (e.g., if (condition) doSomething()).
- Use functional components with TypeScript interfaces.
- Use declarative JSX.
- Place static content and interfaces at file end.
- Use content variables for static content outside render functions.

## UI and Styling

- Use Shadcn UI, Radix, and Tailwind for components and styling.
- Implement responsive design with Tailwind CSS; use a mobile-first approach.

## Performance and Optimization

- Minimize 'use client', 'useEffect', and 'setState'. Favor React Server Components (RSC).
- Wrap client components and components that use searchParams in Suspense with fallback.
- Use dynamic loading for non-critical components.
- Optimize images: WebP format, size data, lazy loading.

## Server Actions and API

- Use next-safe-action for all server actions:
  - Implement type-safe server actions with proper validation using the authActionClient (authenticated) or actionClient, e.g. `import { authActionClient } from '@/lib/safe-action'`.
  - Place action code in the '@/actions/\*' directory.
  - Place Zod schemas in the '@/models/\*' directory.
  - Utilize the `useAction` hook from next-safe-action for client-side components, e.g. `import { useAction } from 'next-safe-action/hooks'`.
  - Implement consistent error handling and success responses using ActionResponse.
  - Use the `import { renderSafeActionErrorToast } from '@components/render-safe-action-error-toast'`and the `onError` callback function from the useAction hook to render error toasts.

## Error Handling and Validation

- Prioritize error handling and edge cases:
  - Handle errors and edge cases at the beginning of functions.
  - Use early returns for error conditions to avoid deeply nested if statements.
  - Place the happy path last in the function for improved readability.
  - Avoid unnecessary else statements; use if-return pattern instead.
  - Use guard clauses to handle preconditions and invalid states early.
  - Implement proper error logging and user-friendly error messages.
  - Consider using custom error types or error factories for consistent error handling.
  - Model expected errors as return values; avoid using try/catch for expected errors in Server Actions.
  - Use error boundaries (error.tsx and global-error.tsx) for unexpected errors to provide a fallback UI.
  - Use Zod for form validation.

## Database

- Use Drizzle ORM for all database interactions to ensure type safety and consistency.
- Define database schemas using Drizzle ORM's schema definitions in TypeScript.
- Almost every table should have timestamps (createdAt, updatedAt) and auth related fields (userId, orgId).
- Avoid raw SQL queries; utilize Drizzle ORM's query builder for constructing queries.
- Leverage TypeScript inference provided by Drizzle ORM to ensure strict typing in database operations.
- Implement relations using Drizzle ORM's relation APIs for one-to-one, one-to-many, and many-to-many associations.
- Optimize database performance by defining indexes and constraints within your Drizzle ORM schema definitions.
- Use transactions (db.transaction) provided by Drizzle ORM for atomic and consistent database operations.
- Prefer built-in operators and functions of Drizzle ORM; use the sql tagged template only for advanced queries when necessary.

## Key Conventions

1. Rely on Next.js App Router for state changes.
2. Prioritize Web Vitals (LCP, CLS, FID).
3. Minimize 'use client' usage:
   - Prefer server components and Next.js SSR features.
   - Use 'use client' only for Web API access in small components.
   - Avoid using 'use client' for data fetching or state management.
4. Use 'nuqs' for URL search parameter state management.

Refer to Next.js documentation for Data Fetching, Rendering, and Routing best practices.

  You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind.
  
  Code Style and Structure
  - Write concise, technical TypeScript code with accurate examples.
  - Use functional and declarative programming patterns; avoid classes.
  - Prefer iteration and modularization over code duplication.
  - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
  - Structure files: exported component, subcomponents, helpers, static content, types.
  
  Naming Conventions
  - Use lowercase with dashes for directories (e.g., components/auth-wizard).
  - Favor named exports for components.
  
  TypeScript Usage
  - Use TypeScript for all code; prefer interfaces over types.
  - Avoid enums; use maps instead.
  - Use functional components with TypeScript interfaces.
  
  Syntax and Formatting
  - Use the "function" keyword for pure functions.
  - Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
  - Use declarative JSX.
  
  UI and Styling
  - Use Shadcn UI, Radix, and Tailwind for components and styling.
  - Implement responsive design with Tailwind CSS; use a mobile-first approach.
  
  Performance Optimization
  - Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
  - Wrap client components in Suspense with fallback.
  - Use dynamic loading for non-critical components.
  - Optimize images: use WebP format, include size data, implement lazy loading.
  
  Key Conventions
  - Use 'nuqs' for URL search parameter state management.
  - Optimize Web Vitals (LCP, CLS, FID).
  - Limit 'use client':
    - Favor server components and Next.js SSR.
    - Use only for Web API access in small components.
    - Avoid for data fetching or state management.
  
  Follow Next.js docs for Data Fetching, Rendering, and Routing.
  
  Please write me a web application in this mentioned stlye for a app with the following features:
  - please install all necessary npm packages first at the end the app should fully work and run in dev mode
  - it will be a notes app
  - a entry where cou can add a new note
  - a list of all notes
  - a detail page for each note
  - a edit page for each note
  - a delete button for each note
  - please also add a search field to the list of notes
  - please also add a filter field to the list of notes
  - please also add a sort field to the list of notes
  - please also add a pagination to the list of notes
  - please also add a loading state to the list of notes
  - please also add a error state to the list of notes
  - please add a drag and drop feature to the list of notes

When revising or creating JavaDoc comments and inline comments for Java code, please follow these guidelines:

1. Comprehensive Explanation:
   - Provide a clear, step-by-step explanation of the algorithm or design pattern.
   - Explain the "why" behind design decisions, not just the "how".
   - Relate the code to real-world applications and modern Java development practices.

2. Complexity Analysis:
   - Include time complexity analysis for worst, best, and average cases.
   - Discuss space complexity and any trade-offs between time and space.
   - Compare the efficiency with alternative implementations or data structures.

3. Modern Java Features:
   - Highlight the use of modern Java features (e.g., lambdas, streams, optional) where applicable.
   - Explain how these features enhance readability, maintainability, or performance.

4. Design Patterns and Principles:
   - Identify and explain any design patterns used in the code.
   - Discuss how the code adheres to SOLID principles and other best practices.
   - Suggest potential refactoring to better align with design patterns if applicable.

5. Concurrency and Performance:
   - Address any concurrency considerations or potential issues.
   - Discuss performance optimizations and their impact.
   - Mention relevant Java concurrency utilities if applicable.

6. Error Handling and Robustness:
   - Explain error handling strategies and exception hierarchies.
   - Discuss input validation and edge cases.

7. Testing and Debugging:
   - Provide insights on how to effectively test the code.
   - Mention relevant testing frameworks (e.g., JUnit 5, Mockito).
   - Offer debugging tips for common issues.

8. Integration and Scalability:
   - Discuss how the code integrates with larger systems or frameworks (e.g., Spring).
   - Address scalability concerns for cloud-native or microservices architectures.

9. Security Considerations:
   - Highlight any security best practices implemented in the code.
   - Suggest additional security measures if relevant.

10. Code Style and Readability:
    - Emphasize clean code principles and consistent formatting.
    - Use meaningful variable names and modular structure.

11. Alternative Implementations:
    - Discuss potential alternative implementations using different Java collections or algorithms.
    - Compare trade-offs between different approaches.

12. Practical Applications:
    - Provide examples of real-world scenarios where this code or pattern is particularly useful.
    - Relate to industry practices and common use cases.

13. Advanced Topics:
    - If relevant, touch on advanced topics like reactive programming, big data processing, or machine learning integration.

14. Learning Resources:
    - Suggest additional learning resources or related topics for further exploration.

15. Continuous Improvement:
    - Encourage code reviews and continuous learning.
    - Mention the importance of staying updated with Java developments and community best practices.

Remember to tailor the level of detail to the complexity of the code and the intended audience (e.g., beginner, intermediate, or advanced Java developers). Strive for a balance between comprehensiveness and clarity, ensuring the documentation is both informative and accessible.

# Cursor Rules for Vently Project

## Project Overview

*   **Project Name:** Vently

*   **Description:** Vently is a dynamic, mobile-friendly platform designed to centralize event promotion and engagement within communities. It features a user-friendly interface that allows users to discover events through a map, engage with communities, purchase tickets, and participate in discussions.

*   **Tech Stack:**

    *   Frontend: ReactJS
    *   Styling: Tailwind CSS
    *   Backend & Database: Supabase
    *   Payment Integration: Stripe
    *   Location Services: Google Maps API

*   **Key Features:**

    *   Interactive event map with clickable pins for event discovery.
    *   Event and community management capabilities.
    *   Secure ticket purchasing with payment gateway integration.
    *   User roles for Regular Users, Event Organizers, and Community Admins.

## Project Structure

*   **Root Directory:** Contains the main configuration files and documentation.

*   `/frontend/`: All frontend-related code.

    *   `/components/`:

        *   `MapView`: Displays events on a map.
        *   `EventCard`: Presents event details.
        *   `CommunityList`: Displays a list of communities.
        *   Other UI components as necessary.

    *   `/assets/`:

        *   Event images and icons.
        *   Community profile pictures.

    *   `/styles/`:

        *   Global styles utilizing Tailwind CSS.

*   `/backend/`: All backend-related code.

    *   `/controllers/`: Handles CRUD operations for events and community entities.
    *   `/models/`: Schema definitions for Events, Tickets, Users, and Communities.
    *   `/routes/`: API endpoints for frontend-backend communication.

*   `/config/`: Configuration files for environment variables and application settings.

*   `/tests/`: Unit and integration tests for frontend and backend modules.

## Development Guidelines

*   **Coding Standards:**

    *   Follow the Airbnb React/JSX Style Guide for JavaScript and React components.
    *   Consistent use of `eslint` for styling and error prevention.
    *   Component files should be organized by feature or route for clarity.

*   **Component Organization:**

    *   Each component should be modular, maintaining a single responsibility principle.
    *   Utilize context API or third-party state management tools where appropriate.

## Cursor IDE Integration

*   **Setup Instructions:**

    *   Clone the repository locally.
    *   Run `npm install` to set up dependencies.
    *   Start the development environment with `npm start` for frontend and backend servers.

*   **Key Commands:**

    *   `npm run test` to run tests.
    *   Use the built-in tools of Cursor AI for real-time code suggestions and modifications.

## Additional Context

*   **User Roles:**

    *   Regular Users: Can browse events and communities, RSVP, and purchase tickets.
    *   Event Organizers: Can create and manage events, access to event-related analytics (future feature).
    *   Community Admins: Manage community settings and moderate content.

*   **Accessibility Considerations:**

    *   Use ARIA roles to enhance component accessibility.
    *   Ensure color contrast meets WCAG standards for the synthe purple theme.