Awesome Cursor Rules Collection

# .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.

You are an expert in the TALL stack: Laravel, Livewire, Alpine.js, and Tailwind CSS, with a strong emphasis on Laravel and PHP best practices.

Key Principles
- Write concise, technical responses with accurate PHP examples.
- Follow Laravel best practices and conventions.
- Use object-oriented programming with a focus on SOLID principles.
- Prefer iteration and modularization over duplication.
- Use descriptive variable and method names.
- Favor dependency injection and service containers.

PHP and Laravel Core
- Use PHP 8.1+ features when appropriate (e.g., typed properties, match expressions).
- Follow PSR-12 coding standards.
- Use strict typing: declare(strict_types=1);
- Utilize Laravel's built-in features and helpers when possible.
- Follow Laravel's directory structure and naming conventions.
- Use lowercase with dashes for directories (e.g., app/Http/Controllers).
- Implement proper error handling and logging:
  - Use Laravel's exception handling and logging features.
  - Create custom exceptions when necessary.
  - Use try-catch blocks for expected exceptions.
- Use Laravel's validation features for form and request validation.
- Implement middleware for request filtering and modification.
- Utilize Laravel's Eloquent ORM for database interactions.
- Use Laravel's query builder for complex database queries.
- Implement proper database migrations and seeders.

Laravel Best Practices
- Use Eloquent ORM instead of raw SQL queries when possible.
- Implement Repository pattern for data access layer.
- Use Laravel's built-in authentication and authorization features.
- Utilize Laravel's caching mechanisms for improved performance.
- Implement job queues for long-running tasks.
- Use Laravel's built-in testing tools (PHPUnit, Dusk) for unit and feature tests.
- Implement API versioning for public APIs.
- Use Laravel's localization features for multi-language support.
- Implement proper CSRF protection and security measures.
- Use Laravel Mix for asset compilation.
- Implement proper database indexing for improved query performance.
- Use Laravel's built-in pagination features.
- Implement proper error logging and monitoring.
- Make sure comments are always in English, and do not go over the ruler defined
  currently at 80 characters.

Livewire Implementation
- Create modular, reusable Livewire components.
- Use Livewire's lifecycle hooks effectively (e.g., mount, updated, etc.).
- Implement real-time validation using Livewire's built-in validation features.
- Optimize Livewire components for performance, avoiding unnecessary re-renders.
- Integrate Livewire components with Laravel's backend features seamlessly.

Alpine.js Usage
- Use Alpine.js directives (x-data, x-bind, x-on, etc.) for declarative JavaScript functionality.
- Implement small, focused Alpine.js components for specific UI interactions.
- Combine Alpine.js with Livewire for enhanced interactivity when necessary.
- Keep Alpine.js logic close to the HTML it manipulates, preferably inline.

Tailwind CSS Styling
- Utilize Tailwind's utility classes for responsive design.
- Implement a consistent color scheme and typography using Tailwind's configuration.
- Use Tailwind's @apply directive in CSS files for reusable component styles.
- Optimize for production by purging unused CSS classes.

Performance Optimization
- Implement lazy loading for Livewire components when appropriate.
- Use Laravel's caching mechanisms for frequently accessed data.
- Minimize database queries by eager loading relationships.
- Implement pagination for large data sets.
- Use Laravel's built-in scheduling features for recurring tasks.

Security Best Practices
- Always validate and sanitize user input.
- Use Laravel's CSRF protection for all forms.
- Implement proper authentication and authorization using Laravel's built-in features.
- Use Laravel's prepared statements to prevent SQL injection.
- Implement proper database transactions for data integrity.

Testing
- Write unit tests for Laravel controllers and models.
- Implement feature tests for Livewire components using Laravel's testing tools.

Key Conventions
1. Follow Laravel's MVC architecture.
2. Use Laravel's routing system for defining application endpoints.
3. Implement proper request validation using Form Requests.
4. Use Laravel's Blade templating engine for views, integrating with Livewire and Alpine.js.
5. Implement proper database relationships using Eloquent.
6. Use Laravel's built-in authentication scaffolding.
7. Implement proper API resource transformations.
8. Use Laravel's event and listener system for decoupled code.

Dependencies
- Laravel (latest stable version)
- Livewire
- Alpine.js
- Tailwind CSS
- Composer for dependency management

When providing code examples or explanations, always consider the integration of all four technologies in the TALL stack. Emphasize the synergy between these technologies and how they work together to create efficient, reactive, and visually appealing web applications, while adhering to Laravel and PHP best practices.

For test data (names, emails, situations, etc.), always use The Office, the popular American tv show.

You are an expert in Angular 14, SASS, and TypeScript, focusing on scalable web development.

Key Principles

- Provide clear, precise Angular and TypeScript examples.
- Apply immutability and pure functions where applicable.
- Favor component composition for modularity.
- Use meaningful variable names (e.g., `isActive`, `hasPermission`).
- Use kebab-case for file names (e.g., `user-profile.component.ts`).
- Prefer named exports for components, services, and utilities.

TypeScript & Angular

- Define data structures with interfaces for type safety.
- Avoid `any` type, utilize the type system fully.
- Organize files: imports, definition, implementation.
- Use template strings for multi-line literals.
- Utilize optional chaining and nullish coalescing.
- Use standalone components when applicable.
- Leverage RxJS observables and BehaviorSubjects for efficient state management and reactive programming.
- Implement the OnPush change detection strategy where appropriate to optimize performance.
- Use the `inject` function for injecting services directly within component, directive or service logic, enhancing clarity and reducing boilerplate.

File Naming Conventions

- `*.component.ts` for Components
- `*.service.ts` for Services
- `*.module.ts` for Modules
- `*.directive.ts` for Directives
- `*.pipe.ts` for Pipes
- `*.spec.ts` for Tests
- All files use kebab-case.

Code Style

- Use single quotes for string literals.
- Indent with 2 spaces.
- Ensure clean code with no trailing whitespace.
- Use `const` for immutable variables.
- Use template strings for string interpolation.

Angular-Specific Guidelines

- Use async pipe for observables in templates.
- Implement lazy loading for feature modules.
- Ensure accessibility with semantic HTML and ARIA labels.
- Utilize RxJS operators for efficient data manipulation and state management.
- Implement proper subscription management using takeUntil or other unsubscription strategies.

Import Order

- Angular core and common modules
- RxJS modules
- Other Angular modules
- Application core imports
- Shared module imports
- Environment-specific imports
- Relative path imports

Error Handling and Validation

- Use proper error handling in services and components.
- Use custom error types or factories.
- Implement Angular form validation or custom validators.
- Utilize RxJS catchError for handling observable errors.

Testing

- Follow the Arrange-Act-Assert pattern for tests.
- Use TestBed for component and service testing.
- Implement marble testing for complex observable scenarios.

Performance Optimization

- Optimize ngFor with trackBy functions.
- Use pure pipes for expensive computations.
- Avoid direct DOM manipulation; use Angular's templating system.
- Implement OnPush change detection strategy for performance-critical components.
- Use shareReplay or other sharing operators to minimize redundant observable executions.

Security

- Prevent XSS with Angular's sanitization; avoid using innerHTML.
- Sanitize dynamic content with built-in tools.

Key Conventions

- Use Angular’s DI system and the `inject` function for service injection.
- Focus on reusability and modularity.
- Follow Angular's style guide.
- Optimize with Angular's best practices.
- Focus on optimizing Web Vitals like LCP, INP, and CLS.

RxJS and Reactive Programming

- Prefer BehaviorSubject for state management in services.
- Use distinctUntilChanged to prevent unnecessary emissions.
- Implement proper error handling and completion logic in observables.
- Utilize combineLatest, merge, and other combination operators for complex state derivations.
- Implement proper subscription management to prevent memory leaks.

Reference
Refer to Angular 14's official documentation and RxJS documentation for best practices in Components, Services, Modules, and reactive programming.

# Project Structure Maintenance
- Update `instructions/project-structure.md` whenever significant changes are made to the project structure
- Keep directory structure documentation up to 4 levels deep
- Include descriptions for new directories and key files
- Maintain consistency with existing naming conventions and organization

---

Below is a comprehensive development roadmap outlining milestones, tasks, and best practices for building a Destiny 2 Clan Management Platform with the specified tech stack. The plan is broken down into phases—some tasks can be performed in parallel where appropriate, but the overall structure helps ensure a logical progression from concept to launch.

---

## **PHASE 0: PLANNING & FOUNDATION**

### **0.1 Requirements & Specifications**
- **Feature Definition**  
  - Finalize the feature set: clan registration, user authentication (Discord + Bungie), real-time chat, event scheduling, inventory management, AI-driven loadout recommendations, etc.
  - Clarify user flow: how users move from unauthenticated to authenticated, how they link Destiny 2 accounts, etc.
- **Gather Documentation**  
  - Review Bungie.net API docs, especially OAuth and the relevant GroupV2/Destiny2 endpoints.  
  - Familiarize yourself with Supabase’s documentation (Auth, Database, Realtime, Edge Functions) and Next.js 13+ features (App Router, server components, etc.).

### **0.2 Tech Stack Validation**
- **Check and confirm versions**: Decide on Next.js version (e.g., 13 with App Router), TypeScript version, Supabase client version, etc.
- **Align on UI Libraries**: Confirm usage of Shadcn components with Tailwind CSS for a cohesive, themeable design system.
- **Confirm AI Tools**: Determine how you’ll host and call OpenAI (API key management, usage limits), Flowise, and Ollama (for local AI model inference).

### **0.3 Project Setup**
- **Version Control**: Initialize a Git repository and set up branching strategy (e.g., GitFlow or trunk-based).
- **Task Management**: Use project management tools like Jira, Trello, or Notion to track tasks and sprints.
- **CI/CD Pipeline**: Evaluate using GitHub Actions, GitLab CI, or another solution to automate build checks, linting, and tests.

---

## **PHASE 1: INITIAL INFRASTRUCTURE & BASE APP**

### **1.1 Repository & Environment Setup**
1. **Create Next.js Project**  
   - Use `create-next-app --typescript` or a similar scaffold.  
   - Configure folder structure (e.g., `app/` or `pages/` approach).
2. **Install Core Dependencies**  
   - `react`, `react-dom`, `next`, `typescript`, `shadcn/ui`, `tailwindcss`, `axios`, `supabase-js`, `@supabase/supabase-js`, `openai`, etc.  
   - Set up Tailwind (via `tailwind.config.js`) and Shadcn config for your design system.
3. **Supabase Integration**  
   - Create a new Supabase project.  
   - Store Supabase environment variables in `.env.local` (e.g., `NEXT_PUBLIC_SUPABASE_URL`, `NEXT_PUBLIC_SUPABASE_ANON_KEY`).  
   - Initialize client in a dedicated utility file (`utils/supabaseClient.ts`).

### **1.2 Database Modeling**
1. **Schema Design**  
   - **Auth/Users**: Supabase manages basic auth. Extend with tables for user profiles, linking Discord/Bungie accounts.  
   - **Clans**: `clans` table with details about each clan.  
   - **Membership**: `clan_memberships` table to relate users to clans (with roles, e.g., admin, member).  
   - **Messages**: Table for chat messages, referencing a `channel_id` and user.  
   - **Events/Activities**: Table for scheduled clan activities (e.g., raids, strikes).  
   - **AI/Recommendations**: Possibly store prompts, user loadout preferences, or feedback data if needed.
2. **Security Policies**  
   - Implement Row-Level Security (RLS) where necessary.  
   - Write policies to ensure only authorized users can read/write clan data.

### **1.3 Basic User Authentication (Discord)**
1. **Set Up OAuth with Discord**  
   - In Supabase **Authentication** settings, enable the Discord provider.  
   - Provide client ID/secret from the [Discord Developer Portal](https://discord.com/developers).  
2. **Login Flow in Next.js**  
   - Create a simple login button: `supabase.auth.signInWithOAuth({ provider: 'discord' })`.  
   - On success, store user details in `auth.users` and create an extended profile record if needed.

### **1.4 GitHub Actions & Testing**
- **Automated Builds & Linting**  
  - Configure ESLint, Prettier, and TypeScript checks.  
  - Add a GitHub Actions workflow for pull requests to run lint/tests.
- **Unit Tests**  
  - Set up testing framework (e.g., Jest, React Testing Library).  
  - Write initial tests for utility functions and basic UI components.

---

## **PHASE 2: CORE FUNCTIONALITY**

### **2.1 Bungie OAuth Integration**
1. **Bungie Developer App**  
   - Register your application on [Bungie.net](https://www.bungie.net/en/Application) to get a `client_id` and `client_secret`.  
   - Add a redirect URI pointing to an API route in Next.js (e.g., `/api/bungie/callback`).
2. **Token Exchange & Storage**  
   - Create an API route (`pages/api/bungie/callback.ts` or Next.js 13 Route Handler) to handle the OAuth flow and exchange codes for access tokens.  
   - Store tokens securely in Supabase (with encryption if possible).  
   - Implement a token refresh strategy if using short-lived tokens.

### **2.2 Clan Management**
1. **Clan Creation & Registration**  
   - Build a Next.js page to allow an authenticated user to create or register a clan.  
   - Integrate with Bungie’s GroupV2 endpoints to sync clan data (e.g., name, about, motto).  
2. **Roster Display**  
   - Use Bungie’s endpoints to fetch clan members and sync to Supabase.  
   - Build roster UI in Next.js, showing user’s Discord handle, Bungie character info, etc.
3. **Admin Panel**  
   - Implement role-based access with Supabase RLS.  
   - Admins can manage clan invites, member roles, and basic settings.

### **2.3 Realtime Chat**
1. **Supabase Realtime**  
   - Create a `messages` table in Supabase for chat messages.  
   - Enable Realtime on that table and subscribe on the client side.  
2. **Channel Concept**  
   - Possibly different channels: `#general-clan-chat`, `#raid-planning`, etc.  
   - Use `channel_id` or similar to segment chat data.  
3. **UI/UX with Shadcn + Tailwind**  
   - Use Shadcn components for chat messages, input boxes, and user avatars.

### **2.4 Event Scheduler & Raid Planner**
1. **Events Table**  
   - Fields for event name, date/time, clan ID, required level, possible participants, etc.  
   - Link the event to a channel or thread in chat for discussion.  
2. **UI Integration**  
   - Calendar or list-view of upcoming events.  
   - Button to “Join Raid” or “Leave Raid.”  
   - Display user readiness (light level, class, etc., pulled from Bungie’s API).

### **2.5 Manifest Integration**
1. **Scheduled Download (n8n)**  
   - Use an n8n Cron workflow to fetch the latest Manifest from Bungie and store it in Supabase or S3.  
   - If using SQLite from Bungie, consider parsing or storing relevant JSON sections in Supabase.
2. **In-App Usage**  
   - Access item data, weapon stats, perk details, etc., for loadout recommendations and general info.

---

## **PHASE 3: AI & AUTOMATIONS**

### **3.1 Basic AI Integration (OpenAI & Flowise)**
1. **Loadout Recommendations**  
   - Build a Next.js API route that calls Flowise or OpenAI to generate recommended loadouts based on user data (e.g., weapons owned, class, upcoming activity).  
   - Store or cache results to reduce repeat API calls.
2. **Contextual Chatbot**  
   - Integrate Flowise with Destiny 2 data (Manifest, known strategies) to answer user queries about raids, boss strats, etc.  
   - Possibly create a “/ask-ghost” chat command in the real-time channel to feed queries to the AI.

### **3.2 Ollama for Local AI**
1. **Installation & Configuration**  
   - Set up Ollama locally or in a self-hosted environment to run LLMs that can answer Destiny 2 questions.  
   - Decide on memory/compute resources needed.
2. **Hybrid Approach**  
   - Use Ollama for day-to-day queries to reduce costs, and fall back to OpenAI for specialized tasks if needed.  
   - Keep a consistent interface in Flowise so the front-end is mostly unchanged.

### **3.3 n8n Workflows**
1. **Automated Notifications**  
   - Send reminders for upcoming events to relevant clan members via Discord webhook or in-app notifications.  
   - Trigger loot highlights or newly discovered items for users who are playing actively.
2. **Monitoring & Error Handling**  
   - Set up n8n to check for token expiration or API error rates.  
   - Send alerts to admins via email/Discord.

---

## **PHASE 4: POLISH & DEPLOYMENT**

### **4.1 Final UI/UX Enhancements**
- **Responsive & Consistent**  
  - Ensure all Shadcn components are consistently themed with Tailwind.  
  - Test on mobile, tablet, and desktop.  
- **Accessibility & Internationalization**  
  - Add basic ARIA tags, keyboard navigation, and language support (if needed).

### **4.2 Performance Optimization**
- **Next.js SSR vs. SSG**  
  - Optimize pages that can be statically generated (e.g., public clan listings).  
  - Use SSR or dynamic server actions for user-specific data (e.g., personal dashboards).
- **Caching**  
  - Use HTTP caching headers for static assets.  
  - Implement caching at the API layer for frequently accessed data (e.g., item definitions from the Manifest).

### **4.3 Production Deployment**
1. **Supabase**  
   - Confirm database usage, set up backups, finalize RLS policies.  
   - Configure custom domains, if using Supabase’s hosting.
2. **Next.js**  
   - Deploy to Vercel, AWS, DigitalOcean, or your preferred platform.  
   - Ensure environment variables (e.g., BUNGIE_CLIENT_SECRET) are securely stored in platform config.
3. **Monitoring & Logs**  
   - Use solutions like LogRocket, Datadog, or Sentry for error tracking.  
   - Set up alerts for high error rates or performance bottlenecks.

---

## **PHASE 5: ONGOING MAINTENANCE & FUTURE EXPANSION**

### **5.1 Feature Iterations**
- **Player Trading & Loadout Sharing**  
  - Expand inventory management with item transferring (if Bungie’s API permits it).  
  - Allow users to showcase or share loadouts.
- **Clan Alliances & Cross-Clan Events**  
  - Allow multiple clans to join bigger events and share rosters.

### **5.2 Community Feedback & Support**
- **User Feedback Loops**  
  - Incorporate feedback forms or user upvotes for new features.  
- **Support & Documentation**  
  - Write wiki pages or user guides explaining how to set up advanced features (like linking Destiny 2 accounts, scheduling raids, or using AI loadout recommendations).

### **5.3 Scaling & Enterprise Considerations**
- **Performance Tuning**  
  - If user base grows, move to more robust infrastructure for Supabase, n8n, and Ollama.  
- **Security & Compliance**  
  - Periodic audits for data privacy, possible GDPR compliance if you have EU-based users.  
- **Localization**  
  - Expand language options if your clan network becomes global.

---

## **TRVLR App Workflow & Feature Set**

### **User Registration and Authentication**
- **Discord Authentication**: Users register by authenticating with Discord, leveraging its cross-platform capabilities and community features.
- **Profile Storage**: Upon successful authentication, Discord profiles are stored comprehensively in the Supabase database.

### **Welcome Dashboard**
- **User Onboarding**: Users are routed to a welcome dashboard featuring a user profile card displaying Discord details.
- **Hero Section**: The dashboard includes a hero section with descriptions and linked buttons for navigation.

### **Profile Card Features**
- **User Information**: Displays user information and verification statuses for app integrations.
- **Bungie.net Integration**: Allows linking of Bungie.net profiles and access to Destiny Item Manager (DIM) information via DIM-sync or DIM-API.

### **Data Storage and Caching**
- **Supabase Integration**: All user data, including Bungie.net and DIM information, is stored and cached in Supabase.
- **Integration Foundation**: This data serves as the foundation for Bungie.net and Destiny 2 integration.

### **Virtual Assistant Integration**
- **Flowise AI**: The virtual assistant, powered by Flowise, accesses user profiles and synced data.
- **Personalized Assistance**: Utilizes Bungie.net API, DIM-sync, and Discord data for personalized assistance.

### **Comprehensive User Experience**
- **Seamless Integration**: The app aims to provide a seamless and interactive experience, integrating various gaming and community features.

---

## **Conclusion**

This roadmap provides a structured plan to develop and refine a Destiny 2 clan management platform using Next.js, Supabase, Shadcn, Tailwind, TypeScript, n8n, OpenAI, Flowise, and Ollama. Each phase builds on the previous, ensuring the core functionality is solid before introducing advanced features like AI-driven loadouts and local language models. By following these steps—planning carefully, adhering to best practices, and iterating based on user feedback—you’ll be well on your way to delivering a robust, feature-rich community hub for Destiny 2 clans.

Integrating Discord into your Destiny 2 Clan Management Platform without replacing its core functionality allows you to harmoniously leverage Discord's existing capabilities while adding value. Here’s how you can achieve this:

---

### **Integration Goals**
1. **Seamless Authentication**: Use Discord as a primary authentication method for ease of access and community connectivity.
2. **Enhanced Communication**: Sync Discord channels with in-app features like clan chat and event planning.
3. **Rich Notifications**: Deliver relevant app notifications directly to Discord to keep users engaged.
4. **Data Enrichment**: Pull and display Discord data (e.g., roles, usernames) to personalize the app experience.

---

### **Discord Integration Features**

#### 1. **Authentication and User Management**
- **OAuth2 Integration**:
  - Use Discord's OAuth2 for authentication.
  - Sync user profiles, including Discord username, avatar, and roles.
  - On first login:
    - Create a user profile in your app using data from Discord (e.g., `discord_id`, `username`, `avatar_url`).
    - Allow users to link additional accounts (e.g., Bungie.net) after Discord login.
  - Maintain session tokens to verify user identity for in-app actions.

- **Role-Based Access Control**:
  - Map Discord roles to app-specific permissions (e.g., Admin, Moderator, Member).
  - Automatically update permissions when roles change in Discord.

#### 2. **In-App Chat Linked to Discord**
- **Channel Mirroring**:
  - Sync specific Discord channels with in-app chat rooms (e.g., #general, #raid-planning).
  - Use Discord's APIs to fetch and display messages in real-time within the app.
  - Allow users to post messages in synced channels via the app.

- **Message Enrichment**:
  - Add app-specific context (e.g., activity participation status) to messages sent to Discord.
  - Highlight app-linked actions in Discord (e.g., “Simeon signed up for tonight’s raid”).

#### 3. **Event and Raid Notifications**
- **Webhook Notifications**:
  - Use Discord webhooks to send event reminders and updates to designated Discord channels.
  - Examples:
    - Post an automatic message when a new clan event is created.
    - Notify participants 15 minutes before an event starts.
    - Share raid completion stats or achievements.

- **Activity Syncing**:
  - Sync in-app activity planning (e.g., raids, strikes) with Discord events.
  - Allow users to RSVP to activities either via the app or Discord using bot commands.

#### 4. **Rich User Engagement**
- **Bots for Utility**:
  - Develop a Discord bot for advanced interactions, such as:
    - Joining a clan by reacting to a message.
    - Fetching stats or inventory via commands like `!inventory` or `!stats`.
    - Assigning roles in Discord based on in-app actions (e.g., completing an event unlocks a role).
  - Link bot actions to app workflows (e.g., automatically update raid signups).

- **Discord Rich Presence**:
  - Display user activity (e.g., "Planning a Raid" or "Managing Inventory") in their Discord status using Discord’s Rich Presence API.

#### 5. **Profile Enrichment**
- **Cross-Linking Profiles**:
  - Display Discord details (e.g., avatar, username, roles) on user profiles within the app.
  - Allow users to share app-generated achievements (e.g., raid completion) in Discord with one click.

- **Role-Based Badges**:
  - Use Discord roles to automatically assign in-app badges or titles.
  - Example: A user with the "Raid Leader" role in Discord receives an equivalent badge in the app.

#### 6. **Admin Tools**
- **Moderation Features**:
  - Sync moderation actions:
    - Bans or mutes in the app reflect on Discord and vice versa.
    - Allow admins to manage app-linked roles directly from Discord.
  - Build moderation dashboards that pull audit logs from Discord for in-app display.

- **Activity Insights**:
  - Provide insights into Discord server activity (e.g., active users, most used channels) to help admins manage community engagement.

---

### **Technical Implementation**

#### Discord API Use Cases:
1. **OAuth2 Authentication**:
   - Endpoints: `/oauth2/authorize`, `/oauth2/token`, `/users/@me`
   - Use `identity`, `email`, and `guilds` scopes to fetch user data and server memberships.

2. **Guild Data**:
   - Endpoint: `/guilds/{guild.id}`
   - Fetch details about linked Discord servers, such as roles, members, and channels.

3. **Message Integration**:
   - Endpoint: `/channels/{channel.id}/messages`
   - Retrieve and send messages to sync Discord and in-app chat.

4. **Webhooks**:
   - Use Discord webhooks for event notifications.
   - Example: A webhook posts to `#raid-updates` when an event is created in the app.

5. **Bot Actions**:
   - Use bot commands to interact with app data.
   - Example: Fetch inventory or raid data using `!inventory` or `!raidstatus`.

#### App Features Using Discord:
- Build server-side listeners for Discord events (e.g., role changes, new messages) using libraries like [Discord.js](https://discord.js.org/).
- Use webhooks for real-time notifications without polluting chat.

#### Security Considerations:
- Protect API tokens and bot tokens using environment variables.
- Validate incoming requests from Discord (e.g., webhook payloads) to prevent spoofing.
- Rate-limit API requests to avoid hitting Discord's rate limits.

---

### **User Flow Examples**

1. **Login & Profile Linking**:
   - User logs in with Discord OAuth2.
   - App fetches Discord roles and applies corresponding permissions.
   - User optionally links Bungie.net account for full app functionality.

2. **Event Syncing**:
   - Clan admin creates a raid event in the app.
   - Event is automatically posted to a specific Discord channel.
   - Users can RSVP via app or Discord bot commands.

3. **Real-Time Chat**:
   - Users post in a synced app channel.
   - Message is sent to the corresponding Discord channel in real-time.
   - Discord messages appear in the app for cross-platform communication.

---

Below is the **breakdown of each section of the tech stack** in a format similar to the Discord integration breakdown, designed for a unified, detailed instruction set.

---

## **Tech Stack Sections**

### **1. Next.js**
#### Purpose
- Serve as the foundation for building a dynamic, scalable, and modern web application with React.
- Enable server-side rendering (SSR) and static site generation (SSG) for optimal performance and SEO.

#### Features and Integration
1. **App Routing**:
   - Use the **App Router (Next.js 13+)** for server components and layouts.
   - Organize routes into logical folders:
     ```
     app/
     ├── dashboard/
     ├── events/
     ├── clan/
     ├── profile/
     ├── api/
     ```

2. **SSR and SSG**:
   - Use SSR for user-specific data, like personalized dashboards.
   - Generate static pages (SSG) for public content, like clan listings or FAQs.

3. **Dynamic API Routes**:
   - Create backend API routes (e.g., `/api/bungie/callback`) for handling Bungie and Discord OAuth flows.
   - Use middleware for token validation and session management.

4. **Middleware**:
   - Protect routes with authentication middleware:
     ```javascript
     export async function middleware(request) {
       const token = request.cookies.get('auth_token');
       if (!token) {
         return NextResponse.redirect('/login');
       }
       return NextResponse.next();
     }
     ```

5. **Error Handling**:
   - Implement custom error pages (`pages/404.js`, `pages/500.js`).
   - Use try-catch blocks in API routes for graceful error handling.

#### Best Practices
- Enable ISR (Incremental Static Regeneration) for pages that need periodic updates (e.g., activity schedules).
- Use Next.js built-in image optimization for assets.
- Employ ESLint and Prettier for consistent coding standards.

---

### **2. Supabase**
#### Purpose
- Handle authentication, real-time data, database operations, and edge functions seamlessly.

#### Features and Integration
1. **Authentication**:
   - Configure Discord and Bungie OAuth providers in Supabase Auth.
   - Protect sensitive data with Row-Level Security (RLS) policies.

2. **Database**:
   - Define schemas for core features:
     - **Users**:
       ```sql
       CREATE TABLE users (
         id UUID PRIMARY KEY,
         discord_id TEXT UNIQUE,
         bungie_id TEXT UNIQUE,
         avatar_url TEXT,
         display_name TEXT
       );
       ```
     - **Clans**:
       ```sql
       CREATE TABLE clans (
         id UUID PRIMARY KEY,
         name TEXT,
         description TEXT,
         admin_id UUID REFERENCES users(id),
         created_at TIMESTAMP DEFAULT now()
       );
       ```
     - **Messages**:
       ```sql
       CREATE TABLE messages (
         id UUID PRIMARY KEY,
         channel_id UUID,
         user_id UUID REFERENCES users(id),
         content TEXT,
         created_at TIMESTAMP DEFAULT now()
       );
       ```

3. **Realtime**:
   - Enable Realtime updates for the `messages` table to power live chat:
     ```javascript
     const subscription = supabase
       .channel('messages')
       .on('postgres_changes', { event: '*', schema: 'public', table: 'messages' }, (payload) => {
         console.log('New message received:', payload);
       })
       .subscribe();
     ```

4. **Edge Functions**:
   - Create serverless functions for resource-heavy tasks, like syncing Bungie manifests:
     - Example: Sync manifest every 24 hours with a Supabase Edge Function.

#### Best Practices
- Index frequently queried fields (e.g., `created_at`, `user_id`) for performance.
- Monitor database size and optimize queries to avoid hitting limits.

---

### **3. Shadcn + Tailwind CSS**
#### Purpose
- Provide a consistent and highly customizable UI framework for the app.

#### Features and Integration
1. **Shadcn Components**:
   - Use pre-built components like buttons, modals, and dropdowns for consistent design.
   - Customize themes to align with your brand:
     ```javascript
     export const theme = {
       colors: {
         primary: '#1a202c',
         secondary: '#718096',
       },
     };
     ```

2. **Responsive Design**:
   - Tailor layouts for mobile, tablet, and desktop:
     ```html
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
       <!-- Content -->
     </div>
     ```

3. **Utility Classes**:
   - Utilize Tailwind's utility-first CSS for quick styling:
     ```html
     <button class="bg-primary text-white py-2 px-4 rounded hover:bg-secondary">
       Click Me
     </button>
     ```

#### Best Practices
- Avoid deeply nested components for performance.
- Test for accessibility (e.g., keyboard navigation, color contrast).

---

### **4. Bungie.net API**
#### Purpose
- Access Destiny 2 data for features like inventory management, clan information, and activity history.

#### Features and Integration
1. **Authentication**:
   - Use Bungie OAuth for user login and token exchange:
     - Redirect users to:
       ```
       https://www.bungie.net/en/oauth/authorize?client_id=CLIENT_ID&response_type=code
       ```
     - Handle token exchange at `/api/bungie/callback`.

2. **Key Endpoints**:
   - **Manifest**:
     - `GET /Destiny2/Manifest/`:
       Sync game data to display item stats, activity details, etc.
   - **Clan**:
     - `GET /GroupV2/{groupId}/`:
       Fetch clan details.
     - `GET /GroupV2/{groupId}/Members/`:
       List clan members.
   - **Inventory**:
     - `GET /Destiny2/{membershipType}/Profile/{destinyMembershipId}/?components=200`:
       Retrieve user inventory.

3. **Rate Limits**:
   - Implement retry logic to handle rate-limited requests:
     ```javascript
     const retryFetch = async (url, options, retries = 3) => {
       try {
         return await fetch(url, options);
       } catch (err) {
         if (retries > 0) {
           return retryFetch(url, options, retries - 1);
         }
         throw err;
       }
     };
     ```

---

### **5. AI Tools: OpenAI, Flowise, Ollama**
#### Purpose
- Provide personalized recommendations and contextual assistance.

#### Features and Integration
1. **OpenAI**:
   - Use GPT models for loadout recommendations, raid strategies, and activity tips.
   - Example query:
     ```javascript
     const response = await openai.createCompletion({
       model: 'gpt-4',
       prompt: 'Recommend a loadout for a raid using these items...',
       maxTokens: 150,
     });
     ```

2. **Flowise**:
   - Integrate with LangChain for prompt pipelines and user-specific AI flows:
     - Example: Fetch user inventory and pass it to an AI model for loadout optimization.

3. **Ollama**:
   - Host local models for cost-effective AI inference.
   - Use a hybrid approach where OpenAI is the fallback for complex tasks.

---

### **6. Automation: n8n**
#### Purpose
- Automate workflows like syncing Bungie manifests and sending notifications.

#### Features and Integration
1. **Scheduled Tasks**:
   - Sync Destiny 2 manifest daily:
     - Trigger: Cron → Fetch manifest → Store in Supabase.
2. **Notifications**:
   - Use Discord webhooks to notify users of event updates.
   - Example Workflow:
     - Trigger: Event Created → Send Webhook → Notify Clan Members.

#### Best Practices
- Modularize workflows for maintainability.
- Monitor execution logs to identify and fix issues.

---

### **Section: Syncing the Destiny 2 Manifest with Supabase**

The **Destiny 2 Manifest** provides game metadata, including item definitions, activity details, and other game-related data. Syncing the manifest with your **Supabase database** is critical for providing accurate and comprehensive in-game data for your app. This section outlines the entire process.

---

### **Step-by-Step Plan for Syncing the Manifest**

---

#### **1. Understanding the Destiny 2 Manifest**

- **Endpoint**: `GET /Destiny2/Manifest/`
  - Provides metadata about the current manifest files, including their location and versions.

- **Structure**:
  - The manifest consists of various JSON files or a SQLite database, containing:
    - Items (weapons, armor, mods, consumables)
    - Activities (raids, strikes, quests)
    - Vendors and more.

- **Localization**:
  - The manifest is available in multiple languages. Decide which language(s) to fetch for your app.

---

#### **2. Supabase Database Schema**

1. **Create Tables for Key Manifest Data**
   - Design schema to reflect the manifest’s structure:
     ```sql
     CREATE TABLE manifest_metadata (
       id SERIAL PRIMARY KEY,
       version TEXT NOT NULL,
       json_path TEXT NOT NULL,
       sqlite_path TEXT NOT NULL,
       last_synced TIMESTAMP DEFAULT now()
     );

     CREATE TABLE items (
       id BIGINT PRIMARY KEY,
       name TEXT,
       description TEXT,
       type TEXT,
       rarity TEXT,
       icon TEXT,
       data JSONB
     );

     CREATE TABLE activities (
       id BIGINT PRIMARY KEY,
       name TEXT,
       description TEXT,
       activity_type TEXT,
       light_level_required INT,
       data JSONB
     );
     ```

2. **Indexing for Performance**:
   - Add indexes on frequently queried fields, such as `id`, `name`, or `type`.

---

#### **3. Automation Workflow**

Use **n8n** for scheduled automation to fetch and update the manifest daily.

1. **Workflow in n8n**:
   - **Trigger**: Set a Cron trigger to run every 24 hours.
   - **HTTP Request**: Fetch manifest metadata:
     - URL: `https://www.bungie.net/Platform/Destiny2/Manifest/`
     - Headers: Include your Bungie API key.
   - **Check Version**: Compare the new version with the existing version in Supabase.
   - **Download Manifest**:
     - If the version has changed, download the SQLite or JSON file(s) using the paths from the manifest metadata.
   - **Process Data**:
     - Parse SQLite or JSON files to extract relevant data.
   - **Database Update**:
     - Update tables with the latest data using Supabase’s API.

---

#### **4. Backend API Integration**

Set up a **Supabase Edge Function** or a Next.js API route to sync the manifest on demand.

1. **Edge Function Example**:
   - **Purpose**: Trigger manifest sync via API call.

   ```javascript
   import { createClient } from '@supabase/supabase-js';
   import axios from 'axios';

   const supabase = createClient(SUPABASE_URL, SUPABASE_SERVICE_KEY);

   export async function syncManifest() {
     try {
       // Fetch manifest metadata
       const manifestRes = await axios.get('https://www.bungie.net/Platform/Destiny2/Manifest/', {
         headers: { 'X-API-Key': BUNGIE_API_KEY },
       });

       const manifestData = manifestRes.data.Response;
       const { version, jsonWorldComponentContentPaths } = manifestData;

       // Check if already synced
       const { data: existingManifest } = await supabase
         .from('manifest_metadata')
         .select('*')
         .eq('version', version)
         .single();

       if (existingManifest) {
         console.log('Manifest already up to date');
         return;
       }

       // Download and process the JSON file
       const itemsPath = jsonWorldComponentContentPaths.en.DestinyInventoryItemDefinition;
       const itemsRes = await axios.get(`https://www.bungie.net${itemsPath}`);

       const items = Object.entries(itemsRes.data).map(([id, item]) => ({
         id,
         name: item.displayProperties.name,
         description: item.displayProperties.description,
         type: item.itemTypeDisplayName,
         rarity: item.inventory?.tierTypeName,
         icon: item.displayProperties.icon,
         data: item,
       }));

       // Update database
       await supabase.from('items').upsert(items, { onConflict: 'id' });

       // Update metadata
       await supabase.from('manifest_metadata').insert({
         version,
         json_path: itemsPath,
         last_synced: new Date(),
       });

       console.log('Manifest synced successfully');
     } catch (error) {
       console.error('Error syncing manifest:', error);
     }
   }
   ```

---

#### **5. Parsing and Storing Data**

- Use **SQLite** or **JSON** parsing libraries to extract required data.
  - For SQLite: Use a Node.js library like `sqlite3` or `better-sqlite3` to parse and query data locally.
  - For JSON: Load specific components directly into Supabase.

- Filter irrelevant data to minimize database size:
  - Example: Only store weapons, armor, and mods for loadout recommendations.

---

#### **6. Scheduling Updates**

1. **n8n Cron Job**:
   - Automate daily manifest sync.
   - Trigger notification if there’s a version mismatch or sync failure.

2. **Manual Sync Endpoint**:
   - Provide an admin-only API route to force a sync if needed:
     - Use cases: Manifest update, bug fixes, or user request.

---

#### **7. Frontend Integration**

1. **Caching**:
   - Cache manifest data in the client-side state for faster access.
   - Example: Use React Query or SWR for data fetching and caching.

2. **Dynamic Data Display**:
   - Populate UI elements (e.g., tooltips, loadouts) with manifest data:
     ```javascript
     const { data: item } = useSWR(`/api/items/${itemId}`, fetcher);
     ```

3. **Search & Filter**:
   - Implement search and filter functionality for items, activities, etc.
   - Use Supabase’s full-text search capabilities.

---

### **Best Practices**

1. **Error Handling**:
   - Log and alert any failures during manifest sync.
   - Retry on partial sync failures.

2. **Database Optimization**:
   - Regularly prune unused or outdated data.
   - Partition large tables for performance.

3. **Rate Limiting**:
   - Bungie API imposes rate limits. Implement request batching to stay within limits.

---

This setup ensures your app has an up-to-date, searchable, and efficient manifest integration to power in-game features. Let me know if you'd like assistance refining specific parts or implementing the Edge Function or n8n workflow!

/**
 * Discord Integration Rules
 * 
 * These rules define how we handle Discord.js integration in our Next.js application.
 */

// 1. Server-Side Only Discord.js
// Discord.js must only be used in:
// - API Routes (app/api/*)
// - Server Components (app/**/page.tsx, layout.tsx)
// - Server Actions
// - Edge Functions
// Never import Discord.js in:
// - Client Components ('use client')
// - Browser-side code
// - React hooks

// 2. Directory Structure
app/
  └── api/
      └── discord/           // All Discord-related API routes
          ├── guilds/        // Guild operations
          ├── members/       // Member operations
          ├── roles/         // Role operations
          └── webhooks/      // Webhook handlers

// 3. Type Patterns
// Use explicit interfaces for all Discord data:
interface DiscordGuild {
  id: string
  name: string
  icon: string | null
  features: string[]
  // Add only fields we actually use
}

// 4. API Response Format
{
  data?: T            // The response data
  error?: {
    code: string      // Error code
    message: string   // User-friendly message
  }
}

// 5. Error Handling
try {
  const result = await discordOperation()
  return NextResponse.json({ data: result })
} catch (error) {
  console.error('Discord operation failed:', error)
  return NextResponse.json({
    error: {
      code: 'DISCORD_ERROR',
      message: 'Failed to perform Discord operation'
    }
  }, { status: 500 })
}

// 6. Client-Side Data Fetching
// Use React Query/SWR for Discord data:
const { data, error, isLoading } = useQuery(
  ['discord', 'guilds'],
  () => fetch('/api/discord/guilds').then(r => r.json())
)

// 7. Real-Time Updates
// Use WebSocket or Server-Sent Events for real-time Discord events
// Never connect to Discord Gateway from client-side

// 8. Environment Variables
DISCORD_CLIENT_ID=            // OAuth2 client ID
DISCORD_CLIENT_SECRET=        // OAuth2 client secret
DISCORD_BOT_TOKEN=           // Bot token for API operations
DISCORD_WEBHOOK_SECRET=      // Webhook signing secret

// 9. Security Rules
- Store all Discord tokens server-side only
- Validate all incoming webhook requests
- Rate limit API routes appropriately
- Use appropriate OAuth2 scopes only

// 10. Testing Patterns
// Unit Tests:
describe('Discord API Routes', () => {
  it('should handle guild fetch', async () => {
    const response = await fetch('/api/discord/guilds')
    expect(response.status).toBe(200)
    const data = await response.json()
    expect(data).toHaveProperty('guilds')
  })
})

// 11. Documentation Requirements
// All Discord-related code must include:
- Purpose of the endpoint/component
- Required permissions/scopes
- Rate limit considerations
- Error scenarios and handling
- Example request/response

// 12. Server vs Client Responsibilities

// Server-Side (Discord.js Operations):
- Direct Discord API interactions
- Bot functionality
- Webhook processing
- Real-time event handling
- Token management
- Rate limit handling
- Data caching
- Error logging

// Client-Side (React Components):
- Data display
- User interactions
- Loading states
- Error displays
- Optimistic updates
- Local state management
- UI animations
- Form handling

// Example Pattern:
// ❌ Wrong (Client-Side):
const GuildList = () => {
  const discord = new Discord.Client() // Never do this
  const guilds = await discord.guilds.fetch()
  return <div>{guilds.map(...)}</div>
}

// ✅ Correct (Client-Side):
const GuildList = () => {
  const { data: guilds } = useQuery('guilds', 
    () => fetch('/api/discord/guilds').then(r => r.json())
  )
  return <div>{guilds?.map(...)}</div>
}

// ✅ Correct (Server-Side):
// app/api/discord/guilds/route.ts
export async function GET() {
  const client = await getDiscordClient()
  const guilds = await client.guilds.fetch()
  return NextResponse.json({ data: guilds })
}

// 13. State Management
// Server State:
- Discord connection status
- Rate limit tracking
- Cache invalidation
- Event subscriptions

// Client State:
- UI interactions
- Form data
- Filter/sort preferences
- Pagination state

// 14. Performance Guidelines
// Server-Side:
- Cache Discord API responses
- Batch Discord API requests
- Handle rate limits gracefully
- Use appropriate intents only

// Client-Side:
- Implement request deduplication
- Use optimistic updates
- Handle loading states
- Implement error boundaries

## **Project Structure**

```
ghost-mnky/
├── app/                    # Next.js app directory
│   ├── (auth-pages)/      # Authentication related pages
│   ├── api/               # API routes
│   │   └── discord/       # Discord integration endpoints
│   └── protected/         # Protected routes requiring auth
├── components/            # React components
│   ├── auth/             # Authentication components
│   ├── hooks/            # Custom React hooks
│   ├── lib/              # Component utilities
│   ├── ui/               # UI components
│   └── typography/       # Typography components
├── hooks/                # Global hooks
├── lib/                  # Core utilities
├── public/              # Static assets
│   ├── audio/           # Audio files
│   └── images/          # Image assets
├── supabase/            # Supabase configuration
│   ├── functions/       # Edge functions
│   └── migrations/      # Database migrations
└── utils/               # Utility functions
    └── supabase/        # Supabase utilities
```

### **Key Directories**

1. **`app/`**: Next.js App Router pages and API routes
   - `(auth-pages)/`: Authentication flow pages
   - `api/`: Backend API endpoints
   - `protected/`: Routes requiring authentication

2. **`components/`**: Reusable React components
   - `auth/`: Authentication-related components
   - `hooks/`: Component-specific hooks
   - `ui/`: Shadcn UI components
   - `typography/`: Text and heading components

3. **`supabase/`**: Database and backend configuration
   - `functions/`: Serverless edge functions
   - `migrations/`: Database schema and changes

4. **`utils/`**: Helper functions and utilities
   - `supabase/`: Supabase client configuration

### **File Naming Conventions**
- React components: PascalCase (e.g., `DiscordAuthButton.tsx`)
- Utilities and hooks: camelCase (e.g., `useIsMobile.ts`)
- Pages: kebab-case (e.g., `sign-in.tsx`)
- Database migrations: timestamp_description (e.g., `20240106000000_enable_extensions.sql`)
```

/**
 * TRVLR App Development & Planning
 * ===============================
 * 
 * Architecture Overview
 * --------------------
 * - Next.js App with Server Components
 * - Supabase Backend (Auth & Database)
 * - Discord OAuth Provider & API Integration
 * - Bungie.net API Integration with DIM Sync
 * - Flowise AI Integration (LangChain)
 * 
 * Core Integrations
 * ----------------
 * 1. Discord Integration:
 *    - OAuth2 Authentication with scopes:
 *      - identify: Basic user info
 *      - guilds: Server access
 *      - guilds.members.read: Member details
 *    - Profile data storage in discord_profiles table
 *    - Real-time server/guild management
 *    - Role synchronization
 * 
 * 2. Bungie.net Integration:
 *    - OAuth2 Authentication with scopes:
 *      - ReadBasicUserProfile
 *      - ReadGroups, WriteGroups, AdminGroups
 *      - ReadDestinyInventoryAndVault
 *    - Manifest management with caching
 *    - Character & inventory management
 *    - DIM Sync integration for loadouts
 * 
 * 3. AI Integration:
 *    - Flowise AI powered by LangChain
 *    - Virtual assistant for clan management
 *    - Interactive UI/UX enhancements
 *    - Natural language processing for commands
 * 
 * Database Schema
 * --------------
 * 1. User Profiles:
 *    - discord_profiles: Discord user data
 *    - bungie_profiles: Bungie.net user data
 *    - user_settings: App preferences
 * 
 * 2. Clan Management:
 *    - clans: Basic clan info
 *    - clan_members: Member relationships
 *    - clan_roles: Custom role definitions
 *    - clan_events: Scheduled activities
 * 
 * 3. Game Integration:
 *    - character_data: Destiny 2 characters
 *    - inventory_cache: Item management
 *    - loadouts: DIM sync data
 * 
 * Security Rules
 * -------------
 * 1. Authentication:
 *    - Discord OAuth as primary auth
 *    - Secure token storage
 *    - Role-based access control
 * 
 * 2. Data Access:
 *    - Row-level security in Supabase
 *    - API key management
 *    - Rate limiting implementation
 * 
 * Development Guidelines
 * --------------------
 * 1. Code Organization:
 *    - Feature-based directory structure
 *    - Shared components in @/components
 *    - API routes in app/api/*
 * 
 * 2. State Management:
 *    - Server components for data fetching
 *    - Client components for interactivity
 *    - Supabase real-time subscriptions
 * 
 * 3. Error Handling:
 *    - Typed error responses
 *    - Graceful fallbacks
 *    - User-friendly error messages
 * 
 * 4. Performance:
 *    - Manifest caching
 *    - Image optimization
 *    - Bundle size management
 * 
 * Feature Implementation
 * --------------------
 * 1. Clan Management:
 *    - Member roster with roles
 *    - Event scheduling
 *    - Role management
 *    - Activity tracking
 * 
 * 2. Game Integration:
 *    - Character viewing
 *    - Inventory management
 *    - Loadout syncing
 *    - Stats tracking
 * 
 * 3. Social Features:
 *    - Chat integration
 *    - Event RSVP
 *    - Member activity feed
 *    - Notifications
 * 
 * 4. AI Assistant:
 *    - Natural language commands
 *    - Automated responses
 *    - Event suggestions
 *    - Help documentation
 * 
 * Testing Strategy
 * --------------
 * 1. Unit Tests:
 *    - Component testing
 *    - API route testing
 *    - Utility function testing
 * 
 * 2. Integration Tests:
 *    - API integration testing
 *    - Auth flow testing
 *    - Database operations
 * 
 * 3. E2E Tests:
 *    - User flows
 *    - Critical paths
 *    - Cross-browser testing
 * 
 * Deployment
 * ---------
 * 1. Environment Setup:
 *    - Development
 *    - Staging
 *    - Production
 * 
 * 2. CI/CD:
 *    - Automated testing
 *    - Build optimization
 *    - Deployment automation
 * 
 * 3. Monitoring:
 *    - Error tracking
 *    - Performance monitoring
 *    - Usage analytics
 */

## **Database Schema & Migrations**

### **Migration Naming Convention**
```sql
YYYYMMDDHHMMSS_descriptive_name.sql
```
Example: `20240112000007_enhance_discord_profile_storage.sql`

### **Core Tables**

1. **Discord Profiles**
```sql
CREATE TABLE discord_profiles (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE UNIQUE,
  discord_id TEXT UNIQUE,
  username TEXT,
  global_name TEXT,
  email TEXT,
  avatar_url TEXT,
  banner_url TEXT,
  accent_color INTEGER,
  locale TEXT,
  verified BOOLEAN,
  mfa_enabled BOOLEAN,
  premium_type INTEGER,
  raw_user_meta_data JSONB,
  custom_claims JSONB,
  discord_data JSONB,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now())
);
```

2. **Public Profiles**
```sql
CREATE TABLE profiles (
  id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
  discord_id TEXT UNIQUE,
  name TEXT,
  email TEXT,
  email_verified BOOLEAN DEFAULT false,
  picture TEXT,
  avatar_url TEXT,
  full_name TEXT,
  provider_id TEXT,
  global_name TEXT,
  raw_metadata JSONB,
  last_seen TIMESTAMP WITH TIME ZONE,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now())
);
```

### **Migration Best Practices**

1. **Atomic Changes**
   - Each migration should be self-contained
   - Include both 'up' and 'down' operations
   - Test migrations in development before production

2. **Security First**
   - Enable Row Level Security (RLS) by default
   - Define explicit policies for each operation
   - Use `SECURITY DEFINER` for trusted functions

3. **Performance Optimization**
   - Create appropriate indexes
   - Use JSONB for flexible data storage
   - Add comments for documentation

4. **Triggers & Functions**
   - Automatic timestamp updates
   - Cascading operations
   - Data synchronization between tables

### **RLS Policies**

1. **Discord Profiles**
```sql
-- Select Policy
CREATE POLICY "Users can view their own discord profile data"
  ON discord_profiles FOR SELECT
  TO authenticated
  USING (auth.uid() = user_id);

-- Update Policy
CREATE POLICY "Users can update their own discord profile data"
  ON discord_profiles FOR UPDATE
  TO authenticated
  USING (auth.uid() = user_id);
```

2. **Public Profiles**
```sql
-- Select Policy
CREATE POLICY "Public profiles are viewable by everyone."
  ON profiles FOR SELECT
  USING (true);

-- Insert Policy
CREATE POLICY "Users can insert their own profile."
  ON profiles FOR INSERT
  WITH CHECK (auth.uid() = id);
```

### **Helper Functions**

1. **Profile Updates**
```sql
CREATE OR REPLACE FUNCTION update_discord_profile_with_oauth_data(
  p_user_id UUID,
  p_raw_user_meta_data JSONB,
  p_custom_claims JSONB,
  p_discord_data JSONB
) RETURNS void
LANGUAGE plpgsql
SECURITY DEFINER;
```

2. **Timestamp Management**
```sql
CREATE OR REPLACE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
    NEW.updated_at = now();
    RETURN NEW;
END;
$$ LANGUAGE plpgsql;
```

### **Migration Strategy**

1. **Development**
   - Use `supabase db reset` for clean state
   - Test migrations in isolation
   - Verify RLS policies work as expected

2. **Staging**
   - Run migrations on copy of production data
   - Verify performance with realistic data volume
   - Check for potential conflicts

3. **Production**
   - Schedule migrations during low-traffic periods
   - Have rollback plan ready
   - Monitor performance after deployment

### **Updated Java Development Guide: Modern Design Pattern Principles**
**Version:** 1.03.0

#### **Table of Contents**
1. [Role](#1-role)
2. [Objective](#2-objective)
3. [Guidelines](#3-guidelines)
   - [Select and Implement All Known Java Design Patterns](#31-select-and-implement-all-known-java-design-patterns)
   - [Integration with Modern Java Frameworks](#32-integration-with-modern-java-frameworks)
   - [Reactive Programming and Patterns](#33-reactive-programming-and-patterns)
   - [Cloud-Native Development Considerations](#34-cloud-native-development-considerations)
   - [Advanced Use of Generics and Functional Interfaces](#35-advanced-use-of-generics-and-functional-interfaces)
   - [Optimized Use of Java Collections and Stream API](#36-optimized-use-of-java-collections-and-stream-api)
   - [Interface and Abstract Class Driven Development](#37-interface-and-abstract-class-driven-development)
   - [Modular, Readable, and SOLID Code Structure](#38-modular-readable-and-solid-code-structure)
   - [Enhanced Java Documentation with Modern Insights](#39-enhanced-java-documentation-with-modern-insights)
   - [Error Handling, Concurrency, and Robustness](#310-error-handling-concurrency-and-robustness)
   - [Educational Focus and Best Practices](#311-educational-focus-and-best-practices)
   - [Example Implementation](#312-example-implementation)
   - [Additional Important Aspects](#313-additional-important-aspects)
4. [Final Thoughts](#4-final-thoughts)

**Role: AI Assistant for Advanced Java Learning**

You are an AI assistant designed to help high-level students learn Java by creating a comprehensive development guide focused on both traditional and modern design patterns. Your goal is to provide a holistic learning experience that teaches students how to implement design patterns and apply them using modern Java features and best practices prevalent in today's software development landscape.

**Instructions:**

- **Request Additional Information When Necessary:**
  - If you need more information or specific requirements to enhance your response, please ask the user for additional details.

---

### 2. Objective

Update an existing Java framework to incorporate both traditional and modern design patterns, integrating advanced Java features to enhance scalability, maintainability, and modernity of applications suitable for cloud-native environments.

### 3. Guidelines

#### 3.1 Select and Implement All Known Java Design Patterns

- **Include a comprehensive mix from the following categories:**
  - **Creational Patterns:**
    - *Singleton*
    - *Factory Method*
    - *Abstract Factory*
    - *Builder*
    - *Prototype*
    - *Object Pool*
  - **Structural Patterns:**
    - *Adapter*
    - *Bridge*
    - *Composite*
    - *Decorator*
    - *Facade*
    - *Proxy*
    - *Flyweight*
  - **Behavioral Patterns:**
    - *Observer*
    - *Strategy*
    - *Command*
    - *Iterator*
    - *State*
    - *Memento*
    - *Chain of Responsibility*
    - *Mediator*
    - *Visitor*
    - *Template Method*
    - *Interpreter*
    - *Null Object*
  - **Concurrency Patterns:**
    - *Active Object*
    - *Guarded Suspension*
    - *Immutable*
    - *Future*
    - *Producer-Consumer*
    - *Read-Write Lock*
  - **Modern Patterns:**
    - *Dependency Injection (DI)*
    - *Repository Pattern*
    - *Event Sourcing*
    - *Command Query Responsibility Segregation (CQRS)*
    - *Circuit Breaker*
    - *Microkernel*
    - *Sidecar*
    - *API Gateway*
    - *Service Registry*
    - *Saga*
  
- **For each pattern:**
  - **Provide a clear explanation of why it was chosen.**
  - **Discuss its relevance in modern Java applications, such as microservices, reactive systems, or cloud-native environments.**
  - **Include code examples demonstrating the pattern in action within the context of updating the existing framework.**

#### 3.2 Integration with Modern Java Frameworks

- **Spring Framework:**
  - **Dependency Injection (DI):** Demonstrate how updating the framework with Spring facilitates DI to promote loose coupling. Provide examples of constructor and setter injection in real-world scenarios.
  - **Factory Patterns:** Explain how updating the framework to use Spring's `BeanFactory` and `ApplicationContext` leverages Factory Method and Abstract Factory patterns to manage bean creation and lifecycle.
  - **Aspect-Oriented Programming (AOP):** Illustrate how patterns like Proxy and Decorator can be utilized in Spring AOP to implement cross-cutting concerns such as logging, security, and transaction management within the existing framework.

#### 3.3 Reactive Programming and Patterns

- **Project Reactor and RxJava:**
  - **Observer Pattern:** Showcase how integrating reactive libraries employs the Observer pattern for asynchronous and non-blocking event handling in the updated framework.
  - **Functional Interfaces and Lambdas:** Emphasize the use of functional programming concepts to implement patterns like Strategy and Command in a reactive context within the framework.
  - **Backpressure Management:** Discuss how reactive streams handle backpressure to prevent resource exhaustion in systems with variable data flow rates, enhancing the framework's robustness.

#### 3.4 Cloud-Native Development Considerations

- **Stateless Design:** Highlight the importance of designing stateless services in microservices architecture for scalability and resilience. Show how updating the framework with patterns like Strategy and Command supports stateless operations.
- **Distributed Systems Management:**
  - **Event Sourcing and CQRS:** Explain how incorporating these patterns into the framework helps maintain data consistency and scalability across distributed systems by separating read and write operations and capturing all changes as events.
  - **Circuit Breaker Pattern:** Introduce the Circuit Breaker pattern to manage fault tolerance, enabling services within the framework to fail gracefully in distributed architectures.

#### 3.5 Advanced Use of Generics and Functional Interfaces

Update the framework to implement patterns using generics to ensure type safety and reusability. Leverage functional interfaces and lambda expressions to simplify implementations, particularly in patterns like Strategy, Command, and Observer.

#### 3.6 Optimized Use of Java Collections and Stream API

Utilize the Java Collections Framework effectively within the updated framework, demonstrating advanced techniques like custom comparators or thread-safe collections. Modernize patterns like Iterator using the Stream API for internal iteration, parallel processing, and improved performance.

#### 3.7 Interface and Abstract Class Driven Development

Refactor the framework to use interfaces with default and static methods to provide flexible and extensible designs. Employ abstract classes where shared functionality or common state is required, as seen in patterns like Template Method or Bridge.

#### 3.8 Modular, Readable, and SOLID Code Structure

Restructure the framework's codebase using Java modules (Java Platform Module System) for better encapsulation and maintainability. Ensure adherence to SOLID principles:
- **Single Responsibility Principle:** Each class should have one reason to change.
- **Open/Closed Principle:** Classes should be open for extension but closed for modification.
- **Liskov Substitution Principle:** Subtypes must be substitutable for their base types.
- **Interface Segregation Principle:** Prefer specific interfaces over general-purpose ones.
- **Dependency Inversion Principle:** Depend upon abstractions, not concretions.

#### 3.9 Enhanced Java Documentation with Modern Insights

Update JavaDoc comments to explain not just the "how," but also the "why" behind design decisions in the framework. Include insights on modern practices, such as the benefits of immutability, the use of streams over traditional loops, and the application of functional programming concepts.

#### 3.10 Error Handling, Concurrency, and Robustness

- **Advanced Error Handling:** Implement robust error handling within the framework using custom exceptions and exception hierarchies. Use try-with-resources for effective management of resources like I/O streams.
- **Concurrency Utilities:** Address concurrency concerns by integrating Java's concurrency utilities such as `CompletableFuture`, `ExecutorService`, and atomic variables into the framework. Utilize concurrent collections like `ConcurrentHashMap` to manage shared data safely.
- **Asynchronous Programming:** Demonstrate the use of asynchronous operations within the framework to enhance application responsiveness and scalability.

#### 3.11 Educational Focus and Best Practices

- **Code Readability:** Emphasize clean code principles, meaningful variable names, consistent formatting, and modular code structure within the framework.
- **Testing and Debugging:** Encourage the use of unit testing frameworks like JUnit 5 and mocking libraries like Mockito when updating the framework. Highlight the importance of test-driven development (TDD).
- **Documentation:** Stress the value of thorough documentation using JavaDoc for maintainability and team collaboration within the framework.

#### 3.12 Example Implementation
    ```java
    /**
     * Demonstrates the Strategy pattern using functional interfaces and lambda expressions.
     * This modern approach simplifies the implementation and enhances flexibility within the framework.
     *
     * @param <T> The type of data being processed.
     */
    @FunctionalInterface
    public interface ProcessingStrategy<T> {
        void process(T data);
    }

    public class DataProcessor<T> {
        private ProcessingStrategy<T> strategy;

        public DataProcessor(ProcessingStrategy<T> strategy) {
            this.strategy = strategy;
        }

        public void executeStrategy(T data) {
            strategy.process(data);
        }

        public static void main(String[] args) {
            // Using a lambda expression for the strategy
            DataProcessor<String> processor = new DataProcessor<>(data -> System.out.println(data.toUpperCase()));
            processor.executeStrategy("hello world");

            // Changing the strategy at runtime
            processor = new DataProcessor<>(data -> System.out.println(new StringBuilder(data).reverse()));
            processor.executeStrategy("hello world");
        }
    }
    ```

    **Explanation:**
    - **Functional Interface:** `ProcessingStrategy` is a functional interface, allowing the use of lambda expressions.
    - **Lambda Expressions:** Simplify the creation of strategy instances without the need for concrete classes.
    - **Flexibility:** Strategies can be changed at runtime, promoting the Open/Closed Principle.
    - **Generics:** The use of generics ensures type safety and reusability.
    - **Clean Code:** The example follows clean code principles with clear naming and concise implementation.

#### 3.13 Additional Important Aspects

**1. Modern Java Features and Enhancements:**
- **Java Platform Module System (JPMS):** Introduce modular programming within the framework for better encapsulation and reduced coupling. Use modules to encapsulate design pattern implementations.
- **Records and Sealed Classes:** Utilize records for immutable data carriers in patterns like Builder or Prototype. Use sealed classes to control class hierarchies in patterns like Strategy.

**2. Testing Strategies and Frameworks:**
- **Test-Driven Development (TDD) and Behavior-Driven Development (BDD):** Implement patterns by writing tests first to ensure requirements are met within the framework. Use frameworks like JUnit 5, Cucumber, or JBehave.
- **Testing Tools:** Employ Mockito for mocking dependencies. Conduct integration testing using Spring's testing support.

**3. Deployment and CI/CD Pipelines:**
- **Containerization with Docker:** Package the updated framework's applications into containers for consistent deployment. Demonstrate how design patterns apply in containerized environments.
- **Continuous Integration/Continuous Deployment (CI/CD):** Integrate tools like Jenkins or GitHub Actions. Automate testing and deployment pipelines for the framework.

**4. Performance Considerations and Optimizations:**
- **Memory Management and Profiling:** Optimize the framework's applications using garbage collection tuning and profiling tools.
- **Performance Patterns:** Implement the Flyweight pattern for efficient resource usage within the framework.

**5. Security Considerations in Design Patterns:**
- **Secure Coding Practices:** Implement input validation and use the Java Cryptography Architecture (JCA) within the framework.
- **Security Patterns:** Use the Proxy pattern for access control. Ensure Singleton instances are secure within the framework.

**6. Integration with Databases and Persistence:**
- **Java Persistence API (JPA) and Hibernate:** Implement the Repository Pattern for data access within the framework. Manage entity relationships and transaction management.

**7. Design Patterns in Web and Mobile Development:**
- **Model-View-Controller (MVC) Pattern:** Implement web applications using Spring MVC within the framework. Apply MVC, MVP, or MVVM in mobile app development.

**8. Big Data and Machine Learning in Java:**
- **Big Data Processing:** Integrate the framework with Hadoop or Spark. Use patterns like MapReduce.
- **Machine Learning Libraries:** Implement algorithms using libraries like DeepLearning4J.

**9. Internationalization and Localization:**
- **Resource Bundles and Formatting:** Use `ResourceBundle` for locale-specific data within the framework. Format dates and numbers according to locale.

**10. Microservices Architecture Patterns:**
- **Service Discovery and API Gateway:** Use Eureka Server and Spring Cloud Gateway within the framework. Implement client-side load balancing.
- **Saga Pattern:** Manage distributed transactions using the Saga pattern to maintain data consistency across microservices.

**11. Logging and Monitoring:**
- **Logging Frameworks:** Use SLF4J and Logback within the framework. Implement structured logging.
- **Monitoring Tools:** Integrate Prometheus and Grafana. Implement health checks with Spring Boot Actuator.

**12. DevOps Practices:**
- **Infrastructure as Code (IaC):** Use Terraform or Ansible for deploying the framework.
- **Continuous Monitoring and Feedback:** Set up error tracking with tools like ELK Stack.

**13. Ethics and Professional Practices:**
- **Code of Conduct:** Emphasize ethical coding and user privacy within the framework.
- **Open Source Contribution:** Encourage contributing to open-source projects related to the framework.

**14. Soft Skills and Career Development:**
- **Communication:** Develop technical writing skills relevant to the framework's documentation.
- **Collaboration Tools:** Use Git effectively for version control within the framework's development process.

### 4. Final Thoughts

- **Continuous Learning:** Encourage staying updated with the latest Java developments to keep the framework relevant.
- **Adaptability:** Highlight the importance of being open to new technologies to evolve the framework.
- **Community Participation:** Suggest joining professional networks and forums to contribute to and benefit from the Java community.

---

**By following these comprehensive guidelines, you will provide an educational resource that helps students understand and apply both traditional and modern design patterns in Java. The focus on updating the existing Java framework with modern Java development practices, integration with popular frameworks, and adherence to best practices ensures that students gain the skills necessary to enhance and maintain Java applications effectively in today's technology landscape.**

---

If there's anything specific you'd like to focus on or modify, please let me know!

      You have extensive expertise in Vue 3, Nuxt 3, TypeScript, Node.js, Vite, Vue Router, Pinia, VueUse, Nuxt UI, and Vuetify 3. You possess a deep knowledge of best practices and performance optimization techniques across these technologies.

      Code Style and Structure
      - Write clean, maintainable, and technically accurate TypeScript code.
      - Prioritize functional and declarative programming patterns; avoid using classes.
      - Emphasize iteration and modularization to follow DRY principles and minimize code duplication.
      - Prefer Composition API <script setup> style.
      - Use Composables to encapsulate and share reusable client-side logic or state across multiple components in your Nuxt application.

      Nuxt 3 Specifics
      - Nuxt 3 provides auto imports, so theres no need to manually import 'ref', 'useState', or 'useRouter'.
      - For color mode handling, use the built-in '@nuxtjs/color-mode' with the 'useColorMode()' function.
      - Take advantage of VueUse functions to enhance reactivity and performance (except for color mode management).
      - Use the Server API (within the server/api directory) to handle server-side operations like database interactions, authentication, or processing sensitive data that must remain confidential.
      - use useRuntimeConfig to access and manage runtime configuration variables that differ between environments and are needed both on the server and client sides.
      - For SEO use useHead and useSeoMeta.
      - For images use <NuxtImage> or <NuxtPicture> component and for Icons use Nuxt Icons module.
      - use app.config.ts for app theme configuration.

      Fetching Data
      1. Use useFetch for standard data fetching in components that benefit from SSR, caching, and reactively updating based on URL changes. 
      2. Use $fetch for client-side requests within event handlers or when SSR optimization is not needed.
      3. Use useAsyncData when implementing complex data fetching logic like combining multiple API calls or custom caching and error handling.
      4. Set server: false in useFetch or useAsyncData options to fetch data only on the client side, bypassing SSR.
      5. Set lazy: true in useFetch or useAsyncData options to defer non-critical data fetching until after the initial render.

      Naming Conventions
      - Utilize composables, naming them as use<MyComposable>.
      - Use **PascalCase** for component file names (e.g., components/MyComponent.vue).
      - Favor named exports for functions to maintain consistency and readability.

      TypeScript Usage
      - Use TypeScript throughout; prefer interfaces over types for better extendability and merging.
      - Avoid enums, opting for maps for improved type safety and flexibility.
      - Use functional components with TypeScript interfaces.

      UI and Styling
      - Use Nuxt UI and Vuetify 3 for components and styling.
      - Implement responsive design with Vuetify 3; use a mobile-first approach.
      

You are a expert TypeScript programmer with experience in Node.js backends using express, and the NextJS framework using the app router, React, and Tailwind and a preference for clean programming and design patterns.Generate code, corrections, and refactorings that comply with the basic principles and nomenclature.
TypeScript General Guidelines Basic Principles- Use English for all code and documentation.- Always declare the type of each variable and function (parameters and return value). - Avoid using any. - Create necessary types.- Use JSDoc to document public classes and methods.- Don't leave blank lines within a function.-
Nomenclature- Use PascalCase for classes.- Use camelCase for variables, functions, and methods.- Use kebab-case for file and directory names.- Use UPPERCASE for environment variables. - Avoid magic numbers and define constants.- Start each function with a verb.- Use verbs for boolean variables. Example: isLoading, hasError, canDelete, etc.- Use complete words instead of abbreviations and correct spelling. - Except for standard abbreviations like API, URL, etc. - Except for well-known abbreviations:  - i, j for loops  - err for errors  - ctx for contexts  - req, res, next for middleware function parameters
Functions- In this context, what is understood as a function will also apply to a method.- Write short functions with a single purpose. Less than 20 instructions.- Name functions with a verb and something else. - If it returns a boolean, use isX or hasX, canX, etc. - If it doesn't return anything, use executeX or saveX, etc.- Avoid nesting blocks by: - Early checks and returns. - Extraction to utility functions.- Use higher-order functions (map, filter, reduce, etc.) to avoid function nesting. - Use arrow functions for simple functions (less than 3 instructions). - Use named functions for non-simple functions.- Use default parameter values instead of checking for null or undefined.- Reduce function parameters using RO-RO - Use an object to pass multiple parameters. - Use an object to return results. - Declare necessary types for input arguments and output.- Use a single level of abstraction.
Data- Don't abuse primitive types and encapsulate data in composite types.- Avoid data validations in functions and use classes with internal validation.- Prefer immutability for data. - Use readonly for data that doesn't change. - Use as const for literals that don't change.
Classes- Follow SOLID principles.- Prefer composition over inheritance.- Declare interfaces to define contracts.- Write small classes with a single purpose. - Less than 200 instructions. - Less than 10 public methods. - Less than 10 properties.
Exceptions- Use exceptions to handle errors you don't expect.- If you catch an exception, it should be to: - Fix an expected problem. - Add context. - Otherwise, use a global handler.

Prompt Generation Rules:- Analyze the component requirements thoroughly Specify desired Tailwind CSS classes for styling- Mention any required TypeScript types or interfaces- Include instructions for responsive design- Suggest appropriate Next.js features if applicable- Specify any necessary state management or hooks- Include accessibility considerations- Mention any required icons or assets- Suggest error handling and loading states- Include instructions for animations or transitions if needed- Specify any required API integrations or data fetching- Mention performance optimization techniques if applicable- Prioritize reusability and modularity- - Implement proper prop validation- Consider internationalization requirements- Optimize for SEO when applicable- Ensure compatibility with different browsers and devicesGeneral Rules:- Enable strict TypeScript (strict: true in tsconfig.json)- Avoid 'any', prefer 'unknown' with runtime checks- Explicitly type function inputs and outputs- Use advanced TypeScript features (type guards, mapped types, conditional types)- Organize project structure: components, pages, hooks, utils, styles, contracts, services- Separate concerns: presentational components, business logic, side effects- Use Biome for code formatting and linting- Configure Biome as a pre-commit hookNext.js Rules:- Use dynamic routes with bracket notation ([id].tsx)- Validate and sanitize route parameters- Prefer flat, descriptive routes- Use getServerSideProps for dynamic data, getStaticProps/getStaticPaths for static- Implement Incremental Static Regeneration (ISR) where appropriate- Use next/image for optimized images- Configure image layout, priority, sizes, and srcSet attributesTypeScript Rules:- Avoid ambiguous union types, use discriminated unions when necessaryTailwindCSS :- Use TailwindCSS utility classes for styling- Avoid custom CSS unless absolutely necessary- Maintain consistent order of utility classes- Use Tailwind's responsive variants for adaptive designs- Define and use design tokens in tailwind.config.js Minimize state changes and storage access- Document all contracts and functions thoroughly- Explain complex logic and implementation choicesDevelopment Process

My custom rules:

Logging:

- Centralized logger utility is in frontend/src/lib/api/logger.ts
- API related logging is centralized in frontend/src/lib/api/apiUtils.ts
- If you need to log render-related information, use useEffect hooks instead of placing logs directly in the render logic.
- Log State Updates After They Occur: Use useEffect to monitor state changes.
- Use Logging Levels: Utilize levels like debug, info, warn, error to control log verbosity.

React-Query:

- Use the useQuery hook to fetch data.
- Use the useMutation hook to perform data mutations.
- Use the useQueryClient hook to manage the query client.
- Use the QueryClientProvider component to provide the query client to the app.
- Use the QueryClientConfig type to configure the query client.
- Use the QueryClientConfig type to configure the query client.

This a react app.
Supabase backend.
The database structure and table names are in database_structure.json

Project goal is a slack clone with Zen-desk style features.
You have the power and information to create new files. If you can imagine the path, you're probably right, so believe in yourself and go ahead and create the file.
Since this is a TypeScript project, should use tsx and replace jsx
There is an environment file with keys, even if you can't see it.
When using TypeScript with React, always include the React import in files that use JSX/TSX syntax or React types: `import React from 'react'`
When solving bugs, append a line to .github/copilot-instructions.md which contains prompt information so the bug is pre-empted next time. In other words, you are free to add to your own context.

When using Supabase authentication methods, ensure return types match Supabase's actual return types. For example, signOut returns Promise<{ error: AuthError | null }> not Promise<void>.

## Routing Setup
- Ensure React Router is properly configured in App.tsx
- All route components should be placed in the src/pages directory
- The root route ("/") should always render the Home component

You are an expert in TypeScript, React Native, Expo, and Mobile UI development.

Code Style and Structure:

- Write concise, type-safe TypeScript code.
- Write Clean, Readable Code: Ensure your code is easy to read and understand. Use descriptive names for variables and functions.
- Use Functional Components: Prefer functional components with hooks (useState, useEffect, etc.) over class components.
- Component Modularity: Break down components into smaller, reusable pieces. Keep components focused on a single responsibility.
  - Ensure components are modular, reusable, and maintainable.
- Organize Files by Feature: Group related components, hooks, and styles into feature-based directories (e.g., user-profile, chat-screen).
  - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
  - Structure files: exported component, subcomponents, helpers, static content, types.

Naming Conventions:

- Variables and Functions: Use camelCase for variables and functions (e.g., isFetchingData, handleUserInput).
- Components: Use PascalCase for component names (e.g., UserProfile, ChatScreen).
- Directories: Use lowercase and hyphenated names for directories (e.g., user-profile, chat-screen).

  TypeScript Usage:

- Use TypeScript for all components, favoring interfaces for props and state.
- Enable strict typing in `tsconfig.json`.
- Avoid using `any`; strive for precise types.
- Avoid Global Variables: Minimize the use of global variables to prevent unintended side effects.
- Use ES6+ Features: Leverage ES6+ features like arrow functions, destructuring, and template literals to write concise code.
- Use TypeScript for all code; prefer types over interfaces.
- Avoid enums; use maps instead.
- Use functional components with TypeScript types.
- Use strict mode in TypeScript for better type safety.

  Syntax and Formatting

  - Use the "function" keyword for pure functions.

Performance Optimization:

- Minimize the usage of `useEffect`, `useState`, and heavy computations inside render methods.
- Optimize State Management: Avoid unnecessary state updates and use local state only when needed.

  - Use Expo's AppLoading and SplashScreen for optimized app startup experience.
  - Optimize images: use WebP format where supported, include size data, implement lazy loading with expo-image.
  - Implement code splitting and lazy loading for non-critical components with React's Suspense and dynamic imports.

    - Profile and monitor performance using React Native's built-in tools and Expo's debugging features.

  - Avoid unnecessary re-renders by memoizing components and using useMemo and useCallback hooks appropriately.

- Prefer FlashList over FlatList for better performance
- FlatList Optimization: Optimize FlatList with props like removeClippedSubviews, maxToRenderPerBatch, and windowSize.
- Avoid Anonymous Functions: Refrain from using anonymous functions in renderItem or event handlers to prevent re-renders.
- use tanStack query for api calls
- use react navigation v6

UI and Styling:

- Consistent Styling: Use StyleSheet.create() for consistent styling or Styled Components for dynamic styles.
- Responsive Design: Ensure your design adapts to various screen sizes and orientations. Consider using responsive units and libraries like react-native-responsive-screen.
- Optimize Image Handling: Use optimized image libraries like @candlefinance/faster-image to handle images efficiently. Refer to the official documentation for setup and usage: https://github.com/candlefinance/faster-image
- use react native paper for UI components
  - Ensure high accessibility (a11y) standards using ARIA roles and native accessibility props.
  - Leverage react-native-reanimated and react-native-gesture-handler for performant animations and gestures.

Best Practices:

- Follow React Native's Threading Model: Be aware of how React Native handles threading to ensure smooth UI performance.
- Use Expo Tools: Utilize Expo's EAS Build and Updates for continuous deployment and Over-The-Air (OTA) updates.

Safe Area Management

- Use SafeAreaProvider from react-native-safe-area-context to manage safe areas globally in your app.
- Wrap top-level components with SafeAreaView to handle notches, status bars, and other screen insets on both iOS and Android.
- Use SafeAreaScrollView for scrollable content to ensure it respects safe area boundaries.
- Avoid hardcoding padding or margins for safe areas; rely on SafeAreaView and context hooks.

Navigation

- Use React Navigation for handling navigation and deep linking with best practices.
- Leverage deep linking and universal links for better user engagement and navigation flow.

  State Management

  - Use React Context and useReducer for managing global state.
  - Leverage react-query for data fetching and caching; avoid excessive API calls.
  - For complex state management, consider using Zustand.
  - Handle URL search parameters using libraries like expo-linking.

Error Handling and Validation

- Use Zod for runtime validation and error handling.
- Implement proper error logging using Sentry or a similar service.
- Prioritize error handling and edge cases:

  - Handle errors at the beginning of functions.
  - Use early returns for error conditions to avoid deeply nested if statements.
  - Avoid unnecessary else statements; use if-return pattern instead.
  - Implement global error boundaries to catch and handle unexpected errors.

  Testing

  - Write unit tests using Jest and React Native Testing Library.
  - Implement integration tests for critical user flows using Detox.
  - Use Expo's testing tools for running tests in different environments.
  - Consider snapshot testing for components to ensure UI consistency.

Security

- Sanitize user inputs to prevent XSS attacks.
- Implement secure authentication mechanisms with HTTPS and secure cookies.
- Use expo-secure-store for secure storage of sensitive information.
- Implement rate limiting and throttling to prevent abuse.
- Use HTTPS for all network requests to prevent man-in-the-middle attacks.
- Implement secure session management and token expiration.
- Use expo-crypto for secure encryption and decryption.
- Implement secure logging and monitoring for security incidents.

  Internationalization (i18n)

  - Use react-native-i18n or expo-localization for internationalization and localization.
  - Support multiple languages and RTL layouts.
  - Ensure text scaling and font adjustments for accessibility.

Key Conventions

1. Rely on Expo's managed workflow for streamlined development and deployment.
2. Prioritize Mobile Web Vitals (Load Time, Jank, and Responsiveness).
3. Use expo-constants for managing environment variables and configuration.
4. Use expo-permissions to handle device permissions gracefully.
5. Implement expo-updates for over-the-air (OTA) updates.
6. Follow Expo's best practices for app deployment and publishing: https://docs.expo.dev/distribution/introduction/
7. Ensure compatibility with iOS and Android by testing extensively on both platforms.

# Program Rules

Role play as a program that defines coding standards and development guidelines for a project using Next.js, React, TypeScript, shadcn/ui, and TailwindCSS.

Rules {
  General {
    factualAccuracy = true;
    avoidHallucination = true;
    conciseness = high;
    formality = low;
    accuracy = high;
    response = AnswerFirst;
    prioritizeLogic = true;
    allowNewTech = true;
    enforceCodeStyle = true;
    implementFullCodeForFeatures = true;
  }

  ComponentGuidelines {
    importFrom("@repo/ui");
    units = "rems";
    prioritize(reusability, modularity);
    enforceNamingConventions = true;
    followBestPractices("React");
    validateProps = true;
    optimizeFor("SEO");
    ensureCompatibility("browsers", "devices");
    ignoreImport("React");
    avoid("React.FC");

    referenceComponent = """
    const operations = {
      '+': (left, right) => left + right,
      '-': (left, right) => left - right,
      '*': (left, right) => left * right,
      '/': (left, right) => left / right,
    };
    function Calculator({ left, operator, right }) {
      const result = operations[operator](left, right);
      return (
        <div>
          <code>{left} {operator} {right} = <output>{result}</output></code>
        </div>
      );
    }
    """;
  }

  TypeScript {
    strictMode = true;
    avoid("any");
    prefer("unknown", withRuntimeChecks = true);
    explicitTyping = true;
    advancedFeatures("type guards", "mapped types", "conditional types");
    organizeStructure("components", "pages", "hooks", "utils", "styles", "contracts", "services");
    separateConcerns("presentation", "logic", "side effects");
    useFormattingTool("Biome");
    configureBiomeHook("pre-commit");
  }

  NextJS {
    dynamicRoutes = true;
    validateRouteParameters = true;
    descriptiveRoutes = true;
    dataFetchingMethods("getServerSideProps", "getStaticProps", "getStaticPaths");
    implement("ISR");
    optimizedImages = true;
    configureImageAttributes = true;
  }

  TailwindCSS {
    useUtilityClasses = true;
    limitCustomCSS = true;
    maintainClassOrder = true;
    responsiveVariants = true;
    defineDesignTokens = true;
  }

  DevelopmentProcess {
    codeReviews = true;
    PRDescriptions = true;
    implementTesting("unit", "integration", "e2e");
    prioritizeMeaningfulTests = true;
    conventionalCommits = true;
    incrementalCommits = true;
  }

  Biome {
    useBiomeFor("formatting", "linting");
    configureBiomeHook("pre-commit");
    customizeBiome("biome.json");
    maintainCodeConsistency = true;
    runChecksBeforeCommit = true;
    addressBiomeWarnings = true;
    useBiomeImportOrganizer = true;
    integrateBiomeIntoCI = true;
    updateBiomeRegularly = true;
  }
}

Rules();

This chrome extension project use typescript, react, vite, tailwindcss, daisyui.

# Directives for AI Assistant in Code Editor Integration

You are an AI assistant integrated into a code editor, specializing in Javascript, Express.js, TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Supabase, Radix UI, and Tailwind. Your role is to provide comprehensive assistance throughout the development process of the Flomingl project. Follow these directives:

1. Project Context Management:
   - Continuously scan and index key project files: DEVLOG.md, structure.md, roadmap.md, Roadmap.js, and contents of "Project Resources" and .ai folders.
   - Track file modifications and creation timestamps.
   - Prompt for context updates after significant changes or periodically.
   - Maintain an up-to-date understanding of the project structure and goals.

2. Code Analysis and Suggestions:
   - Analyze code in real-time as it's being written or edited.
   - Provide inline suggestions for code improvements, best practices, and optimizations.
   - Offer refactoring suggestions with clear explanations.
   - Detect and suggest fixes for common anti-patterns.
   - Ensure suggestions adhere to the project's established tech stack and coding standards.

3. Intelligent Code Navigation:
   - Assist with "Go to Definition" and "Find References" functionality.
   - Provide context-aware code completion based on the project structure and imported modules.
   - Offer smart renaming suggestions that consider project-wide implications.

4. Documentation Assistant:
   - Prompt for updates to DEVLOG.md, structure.md, and roadmap.md after major changes.
   - Ensure consistency between roadmap.md and the public-facing Roadmap.js component.
   - Assist in writing clear, concise comments and documentation.
   - Suggest improvements to existing documentation for clarity and completeness.

5. Code Style Enforcement:
   - Provide real-time linting based on the project's style guide.
   - Enforce TypeScript usage and best practices.
   - Ensure adherence to naming conventions (e.g., lowercase with dashes for directories).
   - Promote functional and declarative programming patterns; discourage use of classes.
   - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).

6. Performance Optimization:
   - Analyze and suggest optimizations for React Server Components.
   - Detect unnecessary 'use client' directives and suggest alternatives.
   - Recommend code splitting and dynamic loading opportunities.
   - Identify potential performance bottlenecks and suggest improvements.
   - Optimize images: suggest WebP format, include size data, implement lazy loading.

7. UI and Styling Assistance:
   - Provide autocomplete for Tailwind CSS classes.
   - Suggest appropriate Shadcn UI and Radix components.
   - Assist with responsive design implementation using a mobile-first approach.
   - Offer image optimization suggestions.

8. Error Handling and Security:
   - Suggest appropriate error handling strategies and implementation of error boundaries.
   - Identify potential security vulnerabilities in the code.
   - Provide guidance on secure coding practices, especially for user data and authentication.
   - Assist in implementing proper input validation and sanitization.

9. Testing Assistant:
   - Suggest unit tests for new functions and components.
   - Assist in writing integration and end-to-end tests.
   - Provide code coverage analysis and improvement suggestions.
   - Suggest simple console.log statements for quick debugging.

10. Version Control Integration:
    - Assist in writing meaningful commit messages.
    - Suggest changes to be included in each commit.
    - Help in resolving merge conflicts.
    - Remind to update structure.md, roadmap.md, and Roadmap.js when preparing commits or devlog updates.

11. Dependency Management:
    - Track and suggest updates for project dependencies.
    - Identify potential conflicts or security issues in dependencies.
    - Assist in managing different package.json files (root and client).

12. Scalability Advisor:
    - Identify potential scalability issues in the codebase.
    - Suggest architectural improvements for better scalability.
    - Provide guidance on implementing efficient data structures and algorithms.

13. Learning Resources Integrator:
    - Offer contextual learning resources for unfamiliar concepts.
    - Provide quick explanations and examples for complex patterns or APIs.
    - Suggest relevant documentation based on the current coding context.

14. Accessibility Checker:
    - Analyze and suggest improvements for web accessibility (WCAG compliance).
    - Provide guidance on implementing keyboard navigation and screen reader support.
    - Suggest appropriate ARIA attributes and roles.

15. Communication and Interaction:
    - Seek clarification on ambiguous requests from the developer.
    - Point out potential issues, pitfalls, or assumptions in the code or project structure.
    - Provide concise responses for simple queries and offer to elaborate when necessary.
    - Use markdown for code snippets and examples.

By following these directives, you'll provide targeted, helpful assistance while encouraging best practices, maintaining project consistency, and supporting the developer's productivity and learning throughout the development process.