blockvoltcr7 fullstack-ai-marketing-platform .cursorrules file for TypeScript

# .cursorrules

## Project Overview
- This is a full-stack application built with Next.js, TypeScript, and React.
- The project uses Vercel for deployment and integrates the Vercel AI SDK.
- Database management is handled by Drizzle ORM with PostgreSQL on Vercel.
- UI components are built using shadcn/ui and Aceternity UI.
- Authentication is managed by Clerk.

## General Guidelines
1. Prioritize TypeScript and Next.js best practices in all code suggestions and implementations.
2. Provide expert guidance on deploying applications to Vercel, especially those integrating AI capabilities.
3. Demonstrate proficiency in using the Vercel AI SDK for AI-integrated applications.
4. Adhere to React best practices and modern patterns (e.g., hooks, functional components).
5. Follow Next.js conventions for routing, API routes, and server-side rendering.

## Code Style and Conventions
1. Use TypeScript for all code, ensuring proper type definitions and interfaces.
2. Follow ESLint and Prettier configurations for consistent code formatting.
3. Use meaningful variable and function names that clearly describe their purpose.
4. Prefer arrow functions for functional components and callbacks.
5. Utilize Next.js 13+ features like the App Router when applicable.

## Security Considerations
1. Never hard-code secrets, passwords, or sensitive information in the codebase.
2. Suggest using environment variables for all sensitive configurations.
3. Recommend proper error handling to avoid exposing sensitive information in logs or responses.

## Database and ORM
1. Provide recommendations on Drizzle ORM best practices for PostgreSQL on Vercel.
2. Suggest efficient query patterns and optimizations for database operations.
3. Advise on proper schema design and migration strategies using Drizzle.

## UI Development
1. Prioritize the use of shadcn/ui and Aceternity UI components for consistent design.
2. Suggest responsive design patterns and accessibility improvements.
3. Recommend efficient state management solutions (e.g., React Context, Zustand) when necessary.

## Authentication
1. Implement Clerk authentication following best practices and official documentation.
2. Ensure proper integration between Clerk authentication and user data stored in the PostgreSQL database via Drizzle.
3. Suggest secure patterns for managing user sessions and protected routes.

## Project Structure
1. Follow Next.js recommended folder structure:
   - `/app` for routing and page components
   - `/components` for reusable UI components
   - `/lib` for utility functions and shared logic
   - `/styles` for global styles and CSS modules
   - `/public` for static assets
2. Use appropriate file naming conventions:
   - PascalCase for component files (e.g., `UserProfile.tsx`)
   - camelCase for utility functions and hooks (e.g., `useAuth.ts`)
   - kebab-case for CSS modules (e.g., `user-profile.module.css`)

## Performance Optimization
1. Suggest code-splitting and lazy loading techniques where appropriate.
2. Recommend proper use of Next.js Image component for optimized image loading.
3. Advise on efficient data fetching strategies using SWR or React Query.

## Vercel Deployment
1. Provide guidance on optimizing the application for Vercel deployment.
2. Suggest proper usage of Vercel's serverless functions and edge computing features.
3. Recommend strategies for efficient CI/CD pipelines on Vercel.

Remember to continuously update and refine these rules as the project evolves and new best practices emerge in the ecosystem.


Always use NextLink for links in Next.js applications to enable client-side navigation, improve performance by prefetching routes, and ensure proper handling of routes in a SPA (Single Page Application) without full-page reloads. This also maintains SEO optimization and supports dynamic routing more efficiently.Always implement proper error handling to ensure that your application can gracefully manage unexpected scenarios, prevent crashes, provide meaningful feedback to the user, and help with debugging and logging. This also improves the overall user experience, system reliability, and maintainability of your code.
## Extended System Prompt for Next.js and shadcn/ui Developer:

- **You are a Next.js and shadcn/ui expert.**
  - Write complete, performant, and modern applications in Next.js with TypeScript.
  - Proficient in advanced Next.js concepts like server-side rendering (SSR), static site generation (SSG), API routes, dynamic routing, and middleware.
  - Use **shadcn/ui** components to build modern, responsive, and accessible UIs.

- **Mastery of shadcn/ui.**
  - Write clear and concise code to implement **shadcn**'s extensive component library.
  - Ensure components follow best practices for accessibility, user experience, and responsiveness.
  - Integrate **shadcn** with advanced layout and state management techniques in Next.js, such as Redux, Zustand, or useContext, to create fluid and dynamic experiences.

- **Code Style and Implementation.**
  - Always follow TypeScript best practices, ensuring type safety and code quality.
  - Write clean, DRY, and maintainable code using reusable components, ensuring ease of scalability.
  - Ensure UI components work seamlessly across all screen sizes and devices, implementing responsive layouts with CSS modules, Tailwind CSS, or styled-components when necessary.

## Approach:

- Use **Next.js 13** or higher, utilizing its latest features like the **App Router**, **React Server Components (RSC)**, and **Edge functions**.
- Implement **shadcn/ui** by importing pre-built components like buttons, modals, accordions, tables, etc., customizing them as needed.
- Build UIs that are responsive, interactive, and accessible.

**Security, Performance & Accessibility**:
- Always ensure security best practices, such as using **HTTP-only cookies** for sensitive data, avoiding cross-site scripting (XSS), and applying **Content Security Policy (CSP)** headers.
- Optimize performance by using **code-splitting**, **lazy loading**, and **image optimizations** with Next.js's built-in utilities.
- Always adhere to WCAG (Web Content Accessibility Guidelines) to ensure all UIs are accessible.

You can now direct me further to continue or elaborate on any specific detail!always use tailwind for css styling
When processing a Next.js project, components should default to server-side rendering unless explicitly marked as client components. The 'use client' directive must be placed at the top of a component file to indicate that the component should be rendered on the client side.

Apply 'use client' under the following conditions:

The component uses React client-side hooks such as useState or useEffect.
The component has event handlers such as onClick, onChange, etc.
The component interacts with browser-specific APIs such as window, document, or localStorage.
The 'use client' directive should be placed as the first line in the file, prior to any imports. Do not apply it indiscriminately, as overuse of 'use client' can lead to suboptimal performance. It is essential to only apply it to components that require client-side functionality, while leaving others to benefit from server-side rendering for efficiency.

Integrate caching and memoization within a Next.js application to optimize performance. The AI should employ techniques to store and retrieve data efficiently, reducing redundant server requests and computations.

Cache Guidelines:
Memoization: Utilize memoization to cache results of function calls, especially for data-fetching operations. This ensures that repeated requests with identical parameters quickly return cached results, speeding up response times and reducing load.
Caching Techniques: Implement various caching strategies as recommended in Next.js documentation, including client-side, server-side, and edge caching. Choose the caching method based on data type and user interaction, optimizing for quick data retrieval and minimal latency.

Always leave comments and code docs when writing code.
always think about the code before writing the code.
Always define an interface for arrays of objects to ensure type safety and clarity in their structure, which improves maintainability and reduces errors.
Always when necessary, define an interface for functions when you need to specify the shape of the function's arguments and return type to ensure type safety and code clarity.