13 feature nextjs project setup

.cursor/mcp.json

@@ -0,0 +1,21 @@
+{
+  "mcpServers": {
+    "shadcn-ui-server": {
+      "command": "npx",
+      "args": ["-y", "shadcn-ui-mcp-server"]
+    },
+    "plate": {
+      "description": "Plate editors, plugins, components, and docs",
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "shadcn@canary", "registry:mcp"],
+      "env": {
+        "REGISTRY_URL": "https://platejs.org/r/registry.json"
+      }
+    },
+    "playwright": {
+      "command": "npx",
+      "args": ["@playwright/mcp@latest"]
+    }
+  }
+}

.cursor/rules/accessibility.mdc

@@ -0,0 +1,27 @@
+---
+description:
+globs:
+alwaysApply: false
+---
+## Accessibility Guidelines
+
+- Use semantic HTML elements for proper document structure
+- Implement proper ARIA labels and roles for complex interactions
+- Ensure keyboard navigation works for all interactive elements
+- Use proper focus management and visible focus indicators
+- Implement proper heading hierarchy (h1, h2, h3, etc.)
+- Provide alternative text for all images and media content
+- Use sufficient color contrast ratios for text and backgrounds
+- Ensure all form inputs have proper labels and error messages
+- Implement proper screen reader support for dynamic content
+- Use landmark roles for better navigation structure
+- Provide skip links for keyboard users
+- Ensure all interactive elements are properly focusable
+- Use proper live regions for dynamic content updates
+- Implement proper error announcement for form validation
+- Use descriptive link text and button labels
+- Ensure proper table markup with headers and captions
+- Implement proper modal and dialog accessibility
+- Use consistent navigation patterns throughout the application
+- Test with screen readers and keyboard-only navigation
+- Follow WCAG 2.1 AA guidelines for compliance

.cursor/rules/ai-assisted-coding.mdc

@@ -0,0 +1,158 @@
+---
+description: 
+globs: 
+alwaysApply: false
+---
+## AI-Assisted Coding Guidelines
+
+### Cursor Rules & MCP Best Practices
+
+- Use `@rules` to reference these workspace rules in your prompts
+- Leverage the `.cursor/rules/` directory for consistent AI guidance
+- Reference specific rule files: `@rules/typescript`, `@rules/error-handling`, etc.
+- Use MCP tools for codebase exploration and understanding
+- Keep rules concise but comprehensive for better AI comprehension
+
+### Free Tier Optimization
+
+- **Be Specific**: Provide clear, detailed prompts to avoid back-and-forth
+- **Use Context Wisely**: Reference existing files and patterns in your requests
+- **Batch Requests**: Combine related changes into single comprehensive requests
+- **Focus on Quality**: Prefer fewer, well-crafted prompts over many short ones
+- **Use Existing Patterns**: Reference established code patterns to reduce explanation needs
+
+### Effective AI Prompting
+
+```
+# Good Prompt Structure:
+1. Context: "I'm working on [specific feature/component]"
+2. Goal: "I need to [specific action]"
+3. Constraints: "Following our [specific rule/pattern]"
+4. Reference: "Similar to [existing file/pattern]"
+```
+
+### Model Selection for Free Tier
+
+- **Claude 3.5 Sonnet**: Best for complex refactoring and architecture decisions
+- **GPT-4**: Good for general coding tasks and explanations
+- **GPT-3.5**: Suitable for simple tasks and quick fixes
+- **Local Models**: Consider for frequent, simple tasks to preserve quota
+
+### Efficient AI Workflows
+
+#### For New Features:
+1. Start with architecture planning using AI
+2. Generate component structure following established patterns
+3. Implement core logic with AI assistance
+4. Use AI for error handling and edge cases
+5. AI-assisted testing and documentation
+
+#### For Bug Fixes:
+1. Use AI to analyze error patterns
+2. Reference similar fixes in codebase
+3. Apply established error handling patterns
+4. Validate fix with AI review
+
+#### For Refactoring:
+1. Use AI to identify improvement opportunities
+2. Follow established code organization rules
+3. Maintain consistency with existing patterns
+4. Use AI for impact analysis
+
+### Smart Context Usage
+
+- **File References**: Use `@filename` to include relevant files
+- **Rule References**: Use `@rules/rulename` for specific guidelines
+- **Pattern Examples**: Reference similar implementations in codebase
+- **Error Context**: Include full error messages and stack traces
+
+### Prompt Templates
+
+#### New Component Creation:
+```
+Create a new [component type] following @rules/ui-and-styling 
+and @rules/typescript patterns. Reference [similar component] 
+for consistency. Include proper error handling per @rules/error-handling.
+```
+
+#### Server Action Implementation:
+```
+Implement a server action following @rules/data-management 
+and @rules/error-handling patterns. Use the established 
+ServerActionResult pattern from lib/server-action-utils.ts.
+```
+
+#### Bug Investigation:
+```
+Analyze this error following @rules/error-handling. 
+Check similar patterns in [relevant files]. 
+Suggest fix maintaining consistency with our codebase.
+```
+
+### Code Review with AI
+
+- Use AI to review code against established rules
+- Check for consistency with existing patterns
+- Validate error handling implementation
+- Review performance implications
+- Ensure accessibility compliance
+
+### AI-Assisted Documentation
+
+- Generate JSDoc comments for complex functions
+- Create README updates for new features
+- Document API changes and breaking changes
+- Generate code examples following established patterns
+
+### Limitations & Alternatives
+
+#### When AI Struggles:
+- Very large file modifications (break into smaller chunks)
+- Complex state management (reference existing patterns)
+- Performance optimization (use specific metrics and requirements)
+- Security-sensitive code (validate thoroughly)
+
+#### Free Tier Strategies:
+- Plan requests during off-peak hours
+- Use AI for planning, implement manually when quota is low
+- Focus AI usage on complex problems, not simple syntax
+- Cache AI-generated solutions for similar future problems
+
+### Collaboration Patterns
+
+#### Team Usage:
+- Share effective prompts and patterns
+- Document AI-generated solutions for team reference
+- Review AI suggestions before implementation
+- Maintain consistency across team members' AI usage
+
+#### Code Quality:
+- Always review AI-generated code thoroughly
+- Test AI solutions against established patterns
+- Validate security and performance implications
+- Ensure adherence to project rules and conventions
+
+### Integration with Development Workflow
+
+1. **Planning Phase**: Use AI for architecture and approach
+2. **Implementation**: AI-assisted coding with rule validation
+3. **Review Phase**: AI code review against established patterns
+4. **Documentation**: AI-generated docs following project standards
+5. **Testing**: AI-assisted test creation and validation
+
+### AI Planning Workflow
+
+Before proposing implementation plans:
+1. Ask 4-6 clarifying questions based on your findings
+2. Draft a comprehensive plan of action and seek approval
+3. If feedback is provided, revise the plan and ask for approval again
+4. Once approved, implement all steps in that plan
+5. After completing each phase/step, mention what was completed and remaining phases
+
+### Monitoring AI Effectiveness
+
+- Track which types of requests work best
+- Document successful prompt patterns
+- Note common AI limitations for your use case
+- Share learnings with team for collective improvement
+

.cursor/rules/code-organization.mdc

@@ -0,0 +1,46 @@
+---
+description: Organize code in a consistent and logical manner.
+globs: */**
+alwaysApply: false
+---
+- Structure files logically, grouping related components, helpers, types and static content
+- Prefer named exports for components over default exports
+- Favor small, single-purpose components over large, monolithic ones
+- Separate concerns between presentational and container components
+- Use consistent file naming: kebab-case for files, PascalCase for components
+
+## Project Structure
+
+The folders follow a standard Next.js application with specific conventions:
+
+/actions - Server-side mutations (Create, Update, Delete operations)
+/app - Next.js App Router pages and API routes
+  /(admin) - Admin-only pages with role-based access
+  /api - API route handlers for external integrations
+  /auth.config.ts, /auth.ts - NextAuth configuration and setup
+  /db.ts - Centralized database connection and basic queries
+/components - Reusable UI components organized by feature
+  /ui - Base UI components (buttons, inputs, dialogs) from shadcn/ui
+  /editor - Plate.js editor components and plugins
+  /providers - React context providers (session, theme, etc.)
+/db - Database schema and configuration
+  /schema.ts - Drizzle ORM schema definitions
+/drizzle - Database migrations and metadata
+  /meta - Migration metadata and journal
+/hooks - Custom React hooks for shared logic
+/lib - Shared utility functions and configurations
+  /utils.ts - Utility functions and class name helpers
+  /constants.ts - Application constants and configuration
+/public - Static assets (images, icons, fonts)
+/types - TypeScript type definitions and DTOs
+/__tests__ - Test files and test utilities
+
+## Component Organization
+
+- Group related components in feature-specific directories
+- Keep component files focused on a single responsibility
+- Use index files for clean imports when appropriate
+- Separate complex components into smaller, composed parts
+- Co-locate related files (component, styles, tests) when beneficial
+- Use the `/components/ui` directory for reusable UI primitives
+- Place feature-specific components in dedicated subdirectories

.cursor/rules/data-management.mdc

@@ -0,0 +1,23 @@
+---
+description: Interaction with the database.
+globs: **/*.{js,jsx,ts,tsx}
+alwaysApply: false
+---
+- Interact with the database exclusively using Drizzle ORM client
+- Leverage Drizzle's generated types for type safety
+- Use the centralized Drizzle client from `app/db.ts` and schema from `db/schema.ts`
+- Implement data operations in separate layers:
+  - `/actions` for mutations (Create, Update, Delete operations)
+  - Direct database queries in components/pages for read operations
+- Use Drizzle's query methods (select, insert, update, delete) with proper type safety
+- Apply proper error handling for database operations using try-catch blocks
+- Implement transaction support using Drizzle's transaction API when needed
+- Use Drizzle's select with specific fields for performance optimization
+- Follow the established patterns for server actions with Zod validation
+- Implement proper caching strategies for read operations using Next.js caching
+- Use database-level constraints and validation defined in the schema
+- Handle relationship management using Drizzle's relational queries
+- Use proper indexing for performance-critical queries
+- Use Drizzle enums for consistent data validation (userRoleEnum, postStatusEnum, etc.)
+- Leverage Drizzle's JSONB support for rich content storage (Plate.js content)
+- Follow the established connection pattern using postgres client with connection pooling

.cursor/rules/error-handling.mdc

@@ -0,0 +1,24 @@
+---
+description: Enfore friendly and logical error handling.
+globs: **/*.{js,jsx,ts,tsx}
+---
+- Implement robust error handling and logging mechanisms.
+- Implement robust error handling and logging mechanisms throughout the application
+- Use structured error handling in server actions with consistent return patterns
+- Provide clear and user-friendly error messages using toast notifications
+- Handle database errors consistently using try-catch blocks around Drizzle operations
+- Use proper validation error handling with Zod schemas for form validation
+- Follow the established error handling pattern in server actions:
+  - Wrap database operations in try-catch blocks
+  - Log errors with contextual information to console/logging service
+  - Return consistent error response format from server actions
+  - Handle specific error types (database, validation, authentication)
+- Use error boundaries for React component error handling where appropriate
+- Handle upload errors gracefully with appropriate fallbacks
+- Implement retry logic for transient failures (network, database connection)
+- Provide proper loading states during async operations
+- Log errors with appropriate context like userId, operation type, and timestamps
+- Use NextAuth error handling patterns for authentication-related errors
+- Implement proper error handling for API routes with appropriate HTTP status codes
+- Handle Drizzle constraint violations and provide meaningful user feedback
+- Use proper error handling for file operations and external API calls

.cursor/rules/general-principles.mdc

@@ -0,0 +1,27 @@
+---
+description: Applies general principles across the project.
+globs: */**
+---
+- You are an expert in TypeScript, Node.js, Next.js with the app router, React, shadcn/ui, Tailwind, Auth.js and Prisma.
+- You are an expert in TypeScript, Node.js, Next.js (App Router), React, Shadcn/UI, Tailwind, NextAuth, and Drizzle ORM
+- Write clean, concise and well-commented TypeScript code
+- Favor functional and declarative programming patterns over object-oriented approaches
+- Prioritize code reuse and modularization over duplication
+- Follow the established patterns in the codebase for consistency
+- Use console.log for debugging and error logging during development
+- Implement proper validation using Zod schemas for form validation and API inputs
+- Use the established server action patterns for data mutations
+- Implement proper error handling and user feedback using toast notifications
+- Follow security best practices for data handling and authentication
+- Use performance optimization techniques (memoization, lazy loading, Next.js caching)
+- Implement proper testing strategies using Jest and Playwright
+- Use semantic HTML and proper accessibility practices
+- Follow the established patterns for state management with React hooks
+- Implement proper documentation for complex functions and components
+- Use consistent naming conventions across the project (see naming-conventions rule)
+- Prioritize user experience and performance in all implementations
+- Leverage Drizzle ORM's type safety and query capabilities
+- Use NextAuth v5 beta patterns for authentication and session management
+- Follow the established database schema patterns with proper enums and relationships
+- Use Plate.js for rich text editing with JSONB storage in the database
+

.cursor/rules/naming-conventions.mdc

@@ -0,0 +1,41 @@
+---
+description: Enforces a consistent naming convention across the project.
+globs: */**
+---
+- Use PascalCase for class names and type definitions.
+- Use PascalCase for React components and type definitions
+- Utilize camelCase for variables, functions and methods
+- Employ kebab-case for file and directory names
+- Reserve UPPERCASE for environment variables and constants
+- Avoid magic numbers by defining constants with meaningful names
+- Start function names with verbs to indicate their purpose
+
+## Specific Conventions
+
+### Components
+- `UserProfile` (PascalCase for component names)
+- `user-profile.tsx` (kebab-case for file names)
+- `useUserProfile` (camelCase for hooks, starting with 'use')
+
+### Server Actions
+- `createUser`, `updateUser`, `deleteUser` (camelCase, verb-first)
+- `create-user.ts` (kebab-case for file names)
+
+### Types and Interfaces
+- `UserProfile`, `ServerActionResult` (PascalCase)
+- `CreateUserInput`, `UpdateUserInput` (descriptive, specific)
+
+### Variables and Functions
+- `isLoading`, `hasError`, `shouldRender` (boolean variables with auxiliary verbs)
+- `userData`, `userList`, `documentId` (camelCase, descriptive)
+- `handleSubmit`, `processImage`, `validateInput` (camelCase, verb-first)
+
+### Constants
+- `MAX_FILE_SIZE`, `DEFAULT_AVATAR_URL` (UPPERCASE with underscores)
+- `MEDIA_CONFIG`, `PROMPT_TEMPLATES` (UPPERCASE for configuration objects)
+
+### Database/Drizzle
+- Follow Drizzle naming conventions (snake_case for database fields, camelCase for client-side)
+- Use descriptive field names: `createdAt`, `updatedAt`, `isPublished`
+- Use meaningful enum names: `userRoleEnum`, `postStatusEnum`, `courseStatusEnum`
+- Follow consistent table naming: singular form (e.g., `user`, `post`, `course`)

.cursor/rules/nextjs.mdc

@@ -0,0 +1,20 @@
+---
+description: Applies optimal Next.js rules and best practices.
+globs: **/*.{js,jsx,ts,tsx}
+---
+- Favor React Server Components (RSC) where possible.
+- Favor React Server Components (RSC) where possible.
+- Minimize `'use client'` directives - only use for interactivity.
+- Optimize for performance and Web Vitals.
+- Use server actions for mutations instead of API route handlers.
+- Use `next/image` for optimized image loading and processing.
+- Implement proper loading states and error boundaries.
+- Use Next.js built-in caching strategies appropriately.
+- Leverage the App Router's streaming capabilities.
+- Implement proper SEO with metadata API.
+- Use Next.js built-in optimizations (fonts, images, scripts).
+- Follow the established routing patterns in `/app` directory.
+- Use proper data fetching patterns with server components.
+- Implement progressive enhancement where appropriate.
+- Use dynamic imports for code splitting when beneficial.
+- Optimize bundle size with proper tree shaking.