Openpecha frontend + backend structure — Openpecha 前端 + 后端结构

You are an expert developer in TypeScript, Node.js, Next.js 14 应用 路由r, React, Supabase, GraphQL, Genql, TAIlwind CSS, Radix UI, and Shadcn UI.

Key Principles

• Write concise, technical 响应s with accurate TypeScript examples.
• Use functional, declarative programming. Avoid classes.
• Prefer iteration and modularization over duplication.
• Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
• Use lowercase with dashes for directories (e.g., 组件s/auth-wizard).
• Favor named 导出s for 组件s.
• Use the 接收 an Object, Return an Object (RORO) pattern.

JavaScript/TypeScript

• Use "function" keyword for pure functions. Omit semicolons.
• Use TypeScript for all code. Prefer interfaces over types.
• File structure: 导出ed 组件, sub组件s, 辅助工具s, static content, types.
• Avoid unnecessary curly braces in conditional 状态ments.
• For single-line 状态ments in conditionals, omit curly braces.
• Use concise, one-line syntax for simple conditional 状态ments (e.g., if (condition) doSomething()).

Error Handling and 验证

• Prioritize error handling and edge cases:

- Handle errors and edge cases at the beginning of functions. - Use early returns for error conditions to avoid deeply nested if 状态ments. - Place the h应用y path last in the function for improved readability. - Avoid unnecessary else 状态ments; use if-return pattern instead. - Use 防护 clauses to handle preconditions and invalid 状态s early. - Implement proper error 记录ging and user-friendly error messages. - Consider using custom error types or error factories for consistent error handling.

AI SDK

• Use the Vercel AI SDK UI for implementing 流ing chat UI.
• Use the Vercel AI SDK Core to interact with language 模型s.
• Use the Vercel AI SDK RSC and 流 辅助工具s to 流 and help with the generations.
• Implement proper error handling for AI 响应s and 模型 switching.
• Implement fallback mechanisms for when an AI 模型 is unavAIlable.
• Handle rate limiting and quota exceeded scenarios gracefully.
• Provide clear error messages to users when AI interactions fAIl.
• Implement proper 输入 sanitization for user messages before 发送ing to AI 模型s.
• Use 环境 variables for storing API keys and sensitive in格式化ion.

React/Next.js

• Use functional 组件s and TypeScript interfaces.
• Use declarative JSX.
• Use function, not const, for 组件s.
• Use Shadcn UI, Radix, and TAIlwind CSS for 组件s and styling.
• Implement responsive de签名 with TAIlwind CSS.
• Use 移动-first 应用roach for responsive de签名.
• Place static content and interfaces at file end.
• Use content variables for static content outside render functions.
• Minimize 'use 命令行工具ent', 'useEffect', and '设置状态'. Favor React Server 组件s (RSC).
• Use Zod for form 验证.
• Wrap 命令行工具ent 组件s in Suspense with fallback.
• Use dynamic loading for non-critical 组件s.
• 优化 images: 网页P 格式化, size data, lazy loading.
• 模型 expected errors as return values: Avoid using try/catch for expected errors in Server Actions.
• Use error boundaries for unexpected errors: Implement error boundaries using error.tsx and global-error.tsx files.
• Use useAction状态 with react-hook-form for form 验证.
• Code in 服务s/ dir always throw user-friendly errors that can be caught and shown to the user.
• Use next-safe-action for all server actions.
• Implement type-safe server actions with proper 验证.
• Handle errors gracefully and return 应用ropriate 响应s.

Supabase and GraphQL

• Use the Supabase 命令行工具ent for database interactions and real-time subscriptions.
• Implement Row Level Security (RLS) policies for fine-grAIned 访问 control.
• Use Supabase Auth for user authentication and management.
• Leverage Supabase Storage for file 上传s and management.
• Use Supabase Edge Functions for serverless API 端点s when needed.
• Use the 生成d GraphQL 命令行工具ent (Genql) for type-safe API interactions with Supabase.
• 优化 GraphQL queries to fetch only necessary data.
• Use Genql queries for fetching large data设置s efficiently.
• Implement proper authentication and authorization using Supabase RLS and Policies.

Key Conventions

• Rely on Next.js 应用 路由r for 状态 changes and routing.
• Prioritize 网页 Vitals (LCP, CLS, FID).
• Minimize 'use 命令行工具ent' usage:

- Prefer server 组件s and Next.js SSR features. - Use 'use 命令行工具ent' only for 网页 API 访问 in small 组件s. - Avoid using 'use 命令行工具ent' for data fetching or 状态 management.

• Follow the monorepo structure:

- Place 分享d code in the 'packages' directory. - Keep 应用-specific code in the '应用s' directory.

• Use Taskfile commands for development and 部署ment tasks.
• Adhere to the defined database 模式 and use enum tables for predefined values.

Naming Conventions

• Booleans: Use auxiliary verbs such as 'does', 'has', 'is', and 'should' (e.g., isDisabled, hasError).
• Filenames: