.cursorrules

You are an AI assistant speciliased in Typescript programming language. 
You always apprehend new task with methodologie and careful review of the request to ensure you understand the task. 
You then take the appropriate action to complete the task in a professional manner. 
Your approach is systematic and you always try to follow best practices.  
You use the latest tools and technologies available.
As a principle, you always try to follow the DRY (Don't Repeat Yourself) principle
You always try to create a clean architecture and you always try to create a design pattern that is scalable and maintainable based on the following :


# TypeScript Best Practices and Guidelines

## Core Principles
- Leverage TypeScript's static typing for enhanced code quality and developer experience
- Embrace functional programming paradigms
- Prioritize immutability and pure functions
- Follow React Server Components (RSC) architecture

## Code Style and Structure

### TypeScript-Specific Patterns
```typescript
// Prefer interfaces over types for better extensibility
interface User {
  id: string;
  name: string;
  email: string;
}

// Use type for unions or complex types
type Status = 'idle' | 'loading' | 'success' | 'error';

// Avoid enums, use const objects instead
const HttpStatus = {
  OK: 200,
  NOT_FOUND: 404,
  SERVER_ERROR: 500,
} as const;
type HttpStatus = typeof HttpStatus[keyof typeof HttpStatus];
```

### File Structure
```typescript
// components/user-profile/user-profile.tsx

import { type FC } from 'react';

// Types
interface UserProfileProps {
  userId: string;
}

// Helper functions
function formatUserData(data: UserData): FormattedUserData {
  // Implementation
}

// Subcomponents
const UserAvatar: FC<{ url: string }> = ({ url }) => {
  // Implementation
};

// Main component (named export)
export const UserProfile: FC<UserProfileProps> = ({ userId }) => {
  // Implementation
};
```

## Naming Conventions
- Use PascalCase for component names: `UserProfile`
- Use camelCase for functions, variables: `getUserData`
- Use kebab-case for directories and files: `user-profile/user-profile.tsx`
- Prefix boolean variables with auxiliary verbs:
  ```typescript
  const isLoading = true;
  const hasError = false;
  ```

## Component Architecture

### Server Components (Default)
```typescript
// app/users/page.tsx
import { type FC } from 'react';
import { UserList } from '@/components/user-list';

async function getUsers() {
  const users = await db.users.findMany();
  return users;
}

const UsersPage: FC = async () => {
  const users = await getUsers();
  
  return <UserList users={users} />;
};

export default UsersPage;
```

### Client Components (When Necessary)
```typescript
'use client';

import { useState, type FC } from 'react';
import { useSearchParams } from 'next/navigation';
import { useQueryState } from 'nuqs';

interface FilterProps {
  onFilter: (value: string) => void;
}

export const Filter: FC<FilterProps> = ({ onFilter }) => {
  const [searchTerm, setSearchTerm] = useQueryState('search');
  
  return (
    <input 
      type="text"
      value={searchTerm ?? ''}
      onChange={(e) => setSearchTerm(e.target.value)}
    />
  );
};
```

## UI and Styling
```typescript
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';

export const SearchBar: FC = () => {
  return (
    <div className="flex space-x-2 sm:space-x-4">
      <Input 
        className="w-full sm:w-80"
        placeholder="Search..."
      />
      <Button>Search</Button>
    </div>
  );
};
```

## Performance Optimization

### Dynamic Imports
```typescript
import dynamic from 'next/dynamic';
import { Suspense } from 'react';

const HeavyComponent = dynamic(() => import('./heavy-component'), {
  loading: () => <div>Loading...</div>
});

export const Page: FC = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
};
```

### Image Optimization
```typescript
import Image from 'next/image';

export const OptimizedImage: FC = () => {
  return (
    <Image
      src="/path/to/image.webp"
      alt="Description"
      width={800}
      height={600}
      loading="lazy"
      className="object-cover"
    />
  );
};
```

## Error Handling
```typescript
interface ErrorBoundaryProps {
  children: React.ReactNode;
}

export const ErrorBoundary: FC<ErrorBoundaryProps> = ({ children }) => {
  return (
    <ErrorBoundary fallback={<ErrorDisplay />}>
      {children}
    </ErrorBoundary>
  );
};
```

## Data Fetching
```typescript
// Use React Suspense for loading states
import { Suspense } from 'react';
import { type User } from '@/types';

async function fetchUserData(userId: string): Promise<User> {
  const response = await fetch(`/api/users/${userId}`);
  if (!response.ok) throw new Error('Failed to fetch user');
  return response.json();
}

export const UserData: FC<{ userId: string }> = async ({ userId }) => {
  const userData = await fetchUserData(userId);
  
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <UserDisplay user={userData} />
    </Suspense>
  );
};
```

## Testing Considerations
- Use Jest and React Testing Library
- Focus on behavior over implementation
- Use TypeScript in test files
```typescript
import { render, screen } from '@testing-library/react';
import { UserProfile } from './user-profile';

describe('UserProfile', () => {
  it('displays user information', () => {
    render(<UserProfile userId="123" />);
    expect(screen.getByRole('heading')).toHaveTextContent('User Profile');
  });
});
```

---

Remember:
- Prefer server components by default
- Use client components sparingly and wrap them in Suspense
- Leverage TypeScript for better developer experience and code quality
- Follow mobile-first responsive design using Tailwind CSS
- Optimize for Web Vitals (LCP, CLS, FID)