Kabi10 ratemyemployer .cursorrules file for TypeScript

# AI Agent Rules for Recreating and Enhancing the RateMyEmployer Project

## Overview

Welcome, AI Agent! Your mission is to **recreate and enhance** the **RateMyEmployer** project. You have access to the current codebase and documentation. Your goal is to build a superior version of the project, focusing on improved performance, scalability, security, and maintainability. Follow the guidelines below to ensure a successful redevelopment.

## Table of Contents

1. [Project Setup](#project-setup)
2. [Code Structure and Organization](#code-structure-and-organization)
3. [Coding Standards and Best Practices](#coding-standards-and-best-practices)
4. [Testing Strategy](#testing-strategy)
5. [Documentation](#documentation)
6. [Deployment Process](#deployment-process)
7. [Security Measures](#security-measures)
8. [Performance Optimization](#performance-optimization)
9. [Maintenance and Monitoring](#maintenance-and-monitoring)
10. [Continuous Improvement](#continuous-improvement)

---

## Project Setup

### 1. Environment Setup

- **Clone Repository:**
  ```bash
  git clone https://github.com/YOUR_USERNAME/ratemyemployer.git
  ```
- **Install Dependencies:**
  ```bash
  npm install
  ```
- **Configure Environment Variables:**
  ```bash
  cp .env.example .env.local
  ```
  - Populate `.env.local` with the required environment variables:
    - `NEXT_PUBLIC_SUPABASE_URL`
    - `NEXT_PUBLIC_SUPABASE_ANON_KEY`
    - Any other necessary keys.

### 2. Database Setup

- **Supabase Configuration:**
  - Create a Supabase account and set up a new project.
  - Configure the database schema to match application requirements.
  - Implement Row-Level Security (RLS) policies to secure data access.

- **Type Generation:**
  ```bash
  npx supabase gen types typescript --project-id "your-project-id" > src/types/supabase.ts
  ```

### 3. Development Tools

- **Install Global CLI Tools:**
  ```bash
  npm install -g vercel
  ```
- **Initialize Git Hooks:**
  ```bash
  npx husky install
  ```

---

## Code Structure and Organization

### 1. Directory Layout

Maintain a clear and scalable directory structure:

src/
├── app/ # Next.js 13 app router
├── components/ # Reusable React components
├── lib/ # Utilities and helpers
├── hooks/ # Custom React hooks
├── types/ # TypeScript definitions
├── pages/ # Next.js pages
├── styles/ # Global and component-specific styles
├── public/ # Static assets
└── tests/ # Test suites

### 2. File Naming Conventions

- **Components:** `ComponentName.tsx`
- **Hooks:** `useHookName.ts`
- **Utilities:** `utilityName.ts`
- **Types:** `typeName.d.ts`

### 3. Code Modularity

- **Single Responsibility:** Each module or component should have a single responsibility.
- **Reusability:** Design components and utilities to be reusable across different parts of the application.

---

## Coding Standards and Best Practices

### 1. TypeScript

- **Strict Mode:** Enable `strict` mode in `tsconfig.json` for type safety.
- **Explicit Types:** Always define explicit types for variables, function parameters, and return values.

### 2. Linting and Formatting

- **ESLint:** Enforce code quality and standards.
  ```bash
  npm install eslint --save-dev
  npx eslint --init
  ```
- **Prettier:** Ensure consistent code formatting.
  ```bash
  npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev
  ```
- **Configuration:**
  - Integrate ESLint with Prettier to avoid conflicts.
  - Add `lint` and `format` scripts in `package.json`:
    ```json
    {
      "scripts": {
        "lint": "eslint . --ext .ts,.tsx",
        "format": "prettier --write ."
      }
    }
    ```

### 3. Error Handling

- Implement comprehensive error handling using `try-catch` blocks.
- Provide meaningful error messages to aid in debugging.
- Log errors for monitoring and analysis.

### 4. Security Best Practices

- **Authentication:** Utilize Supabase Auth for managing user authentication.
- **Input Validation:** Use libraries like Zod for validating user inputs.
- **Sanitization:** Sanitize all user-generated content to prevent XSS and SQL injection.
- **Environment Variables:** Protect sensitive data by storing it in `.env.local` and never committing it to version control.

---

## Testing Strategy

### 1. Testing Frameworks

- **Unit Testing:** Use Vitest for unit tests.
- **Integration Testing:** Test interactions between different parts of the application.
- **End-to-End Testing:** Utilize Playwright for comprehensive end-to-end tests.

### 2. Test Structure

Organize tests within `src/__tests__/`:

src/__tests__/
├── components/     # Component tests
├── hooks/         # Hook tests
├── lib/           # Library/utility tests
├── integration/   # Integration tests
├── e2e/           # End-to-end tests
├── utils/         # Test utilities
│   ├── renderUtils.tsx
│   ├── customMatchers.ts
│   └── testHelpers.ts
└── mocks/         # Mock data and handlers
    ├── mockData.ts
    └── handlers.ts
```

### 3. Writing Tests

- **Component Tests:**
  - Test rendering with different props.
  - Verify interaction behaviors (e.g., button clicks).

- **Hook Tests:**
  - Validate the logic within custom hooks.
  - Ensure state updates correctly.

- **Utility Tests:**
  - Test utility functions for expected outputs.

### 4. Running Tests

- **Execute All Tests:**
  ```bash
  npm test
  ```
- **Run with Coverage:**
  ```bash
  npm run coverage
  ```
- **Run Specific Tests:**
  ```bash
  npm test path/to/test
  ```
- **Run End-to-End Tests:**
  ```bash
  npm run test:e2e
  ```

### 5. Test Coverage

- **Configuration:** Ensure `vitest.config.ts` includes coverage thresholds.
- **Enforce Coverage:** Maintain at least 80% test coverage across statements, branches, functions, and lines.

---

## Documentation

### 1. Code Documentation

- **JSDoc Comments:**
  - Document functions, classes, and methods with JSDoc for better readability.
  - Example:
    ```typescript
    /**
     * Calculates the average rating.
     * @param ratings - Array of numerical ratings.
     * @returns The average rating.
     */
    const calculateAverage = (ratings: number[]): number => {
      return ratings.reduce((a, b) => a + b, 0) / ratings.length;
    };
    ```

- **Prop Documentation:**
  - Document component props using TypeScript interfaces and JSDoc.

### 2. Project Documentation

- **README.md:**
  - Provide a comprehensive overview of the project.
  - Include setup instructions, features, and contribution guidelines.

- **Documentation Hub:**
  - Centralize all documentation in `docs/`.
  - Include guides on onboarding, system checks, error handling, and more.

### 3. Automated Documentation Generation

- Utilize tools to generate documentation from comments and code annotations.
- Example script to generate documentation:
  ```bash
  npm run docs
  ```

---

## Deployment Process

### 1. Continuous Integration and Continuous Deployment (CI/CD)

- **CI/CD Pipeline:**
  - Use GitHub Actions or similar tools to automate testing, linting, and building.
  - Example GitHub Actions workflow:
    ```yaml
    name: CI/CD Pipeline

    on:
      push:
        branches: [ main ]
      pull_request:
        branches: [ main ]

    jobs:
      build:
        runs-on: ubuntu-latest

        steps:
          - uses: actions/checkout@v2
          - name: Setup Node.js
            uses: actions/setup-node@v2
            with:
              node-version: '18.x'
          - run: npm install
          - run: npm run lint
          - run: npm test
          - run: npm run build
          - name: Deploy to Vercel
            uses: amondnet/vercel-action@v20
            with:
              vercel-token: ${{ secrets.VERCEL_TOKEN }}
              vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
              vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
    ```

### 2. Deployment to Vercel

- **Project Settings:**
  - Connect the repository to Vercel.
  - Ensure environment variables are correctly set in Vercel Dashboard.

- **Build Configuration:**
  - Specify the Node.js version in `package.json`:
    ```json
    {
      "engines": {
        "node": ">=18.17.0"
      }
    }
    ```
  - Use LTS versions (18.x or 20.x) for optimal compatibility.

### 3. Post-Deployment

- **Smoke Tests:**
  - Run automated smoke tests to verify deployment success.
- **Monitoring:**
  - Monitor application performance and error logs post-deployment.

---

## Security Measures

### 1. Authentication and Authorization

- **Supabase Auth:**
  - Implement secure authentication flows.
  - Protect routes using middleware to ensure only authorized access.

- **Row-Level Security (RLS):**
  - Define RLS policies in Supabase to control data access at the database level.

### 2. Data Protection

- **Input Validation:**
  - Validate all user inputs using Zod schemas to prevent malicious data entry.

- **Sanitization:**
  - Sanitize outputs to prevent cross-site scripting (XSS) and other injection attacks.

- **Encryption:**
  - Encrypt sensitive data both in transit and at rest.

### 3. Dependency Management

- **Regular Audits:**
  - Run `npm audit` regularly to identify and fix vulnerabilities.
- **Update Dependencies:**
  - Keep all dependencies up-to-date to mitigate security risks.

---

## Performance Optimization

### 1. Bundle Optimization

- **Code Splitting:**
  - Implement dynamic imports to reduce initial bundle size.
- **Lazy Loading:**
  - Lazy load non-critical components to enhance loading performance.

### 2. Image Optimization

- **Next.js Image Component:**
  - Utilize Next.js `<Image>` component for automatic image optimization.

### 3. Caching Strategies

- **API Caching:**
  - Implement caching mechanisms for frequently accessed API routes.
- **Static Site Generation (SSG) and Incremental Static Regeneration (ISR):**
  - Leverage Next.js features to serve pre-rendered pages for better performance.

### 4. Monitoring and Profiling

- **Performance Metrics:**
  - Track metrics like First Contentful Paint (FCP) and Time to Interactive (TTI).
- **Profiling Tools:**
  - Use tools like Lighthouse and Web Vitals for performance analysis.

---

## Maintenance and Monitoring

### 1. Regular Updates

- **Dependencies:**
  - Routinely update project dependencies to their latest stable versions.
- **Frameworks and Libraries:**
  - Stay updated with Next.js, Supabase, and other core technologies.

### 2. Monitoring Tools

- **Error Tracking:**
  - Integrate tools like Sentry for real-time error monitoring.
- **Performance Monitoring:**
  - Use services like Vercel Analytics or Google Analytics to monitor application performance.

### 3. Backup and Recovery

- **Database Backups:**
  - Schedule regular backups of the Supabase database.
- **Disaster Recovery Plan:**
  - Develop and maintain a disaster recovery plan to handle unexpected failures.

---

## Continuous Improvement

### 1. Feedback Loop

- **User Feedback:**
  - Collect and analyze user feedback to identify areas for improvement.
- **Team Reviews:**
  - Conduct regular code reviews and retrospectives to enhance development practices.

### 2. Refactoring

- **Code Quality:**
  - Continuously refactor code to improve readability, maintainability, and performance.
- **Eliminate Technical Debt:**
  - Address technical debt promptly to prevent long-term issues.

### 3. Innovation

- **Stay Informed:**
  - Keep abreast of the latest trends and technologies in web development.
- **Implement Enhancements:**
  - Propose and implement innovative features that add value to the project.

---

## Conclusion

By adhering to these rules and guidelines, you will enhance the RateMyEmployer project, ensuring it is robust, secure, and maintainable. Strive for excellence in every aspect of development, from code quality to user experience. Together, we can build an outstanding platform that serves its users effectively.

---

*Happy Coding! 🚀*