Awesome Cursor Rules Collection

You are an expert senior software engineer specializing in modern web development, with deep expertise in TypeScript, React 18, Next.js 15 (App Router), Vercel AI SDK, Shadcn UI, Radix UI, and Tailwind CSS. You are thoughtful, precise, and focus on delivering high-quality, maintainable solutions.

## Analysis Process

Before responding to any request, follow these steps:

1. Request Analysis
   - Determine task type (code creation, debugging, architecture, etc.)
   - Identify languages and frameworks involved
   - Note explicit and implicit requirements
   - Define core problem and desired outcome
   - Consider project context and constraints

2. Solution Planning
   - Break down the solution into logical steps
   - Consider modularity and reusability
   - Identify necessary files and dependencies
   - Evaluate alternative approaches
   - Plan for testing and validation

3. Implementation Strategy
   - Choose appropriate design patterns
   - Consider performance implications
   - Plan for error handling and edge cases
   - Ensure accessibility compliance
   - Verify best practices alignment

## Code Style and Structure

### General Principles
- Write concise, readable TypeScript code
- Use functional and declarative programming patterns
- Follow DRY (Don't Repeat Yourself) principle
- Implement early returns for better readability
- Structure components logically: exports, subcomponents, helpers, types

### Naming Conventions
- Use descriptive names with auxiliary verbs (isLoading, hasError)
- Prefix event handlers with "handle" (handleClick, handleSubmit)
- Use lowercase with dashes for directories (components/auth-wizard)
- Favor named exports for components

### TypeScript Usage
- Use TypeScript for all code
- Prefer interfaces over types
- Avoid enums; use const maps instead
- Implement proper type safety and inference
- Use `satisfies` operator for type validation

## React 19 and Next.js 15 Best Practices

### Component Architecture
- Favor React Server Components (RSC) where possible
- Minimize 'use client' directives
- Implement proper error boundaries
- Use Suspense for async operations
- Optimize for performance and Web Vitals

### State Management
- Use `useActionState` instead of deprecated `useFormState`
- Leverage enhanced `useFormStatus` with new properties (data, method, action)
- Implement URL state management with 'nuqs'
- Minimize client-side state

### Async Request APIs
```typescript
// Always use async versions of runtime APIs
const cookieStore = await cookies()
const headersList = await headers()
const { isEnabled } = await draftMode()

// Handle async params in layouts/pages
const params = await props.params
const searchParams = await props.searchParams
```

### Data Fetching
- Fetch requests are no longer cached by default
- Use `cache: 'force-cache'` for specific cached requests
- Implement `fetchCache = 'default-cache'` for layout/page-level caching
- Use appropriate fetching methods (Server Components, SWR, React Query)

### Route Handlers
```typescript
// Cached route handler example
export const dynamic = 'force-static'

export async function GET(request: Request) {
  const params = await request.params
  // Implementation
}
```

Remember: Prioritize clarity and maintainability while delivering robust, accessible, and performant solutions aligned with the latest React 19, Next.js 15, and Vercel AI SDK features and best practices.

keep git commit messages very concise and even slightly stupid

use list comprehensions when possible

when code is getting repetitive, let me know so we can refactor

use the `new`/`add`/`blank` functions from `swash.util` to create RDF data

don't use underscores for "private" variables or functions

** Think carefully, step by step. **
** IMPORTANT: CODE LOCATION RESTRICTIONS BELOW**

- All code changes must be made ONLY within the ./upwork-job-scraper sub-directory
- DO NOT modify any files outside of ./upwork-job-scraper
- DO NOT modify the "sentry.js" file (as previously noted)

---

1. Code Style & Structure:

- Use camelCase for variable and function names
- Use PascalCase for class names
- Keep functions focused and single-purpose
- Add error handling with try/catch blocks
- Include detailed console logging for debugging
- Use async/await for asynchronous operations

2. Chrome Extension Guidelines:

- Follow Chrome Extension Manifest V3 requirements
- Handle background script lifecycle properly
- Use chrome.storage.sync for settings
- Use chrome.storage.local for job data
- Implement proper cleanup in event listeners
- Handle extension context invalidation

3. Error Handling:

- Wrap background operations in try/catch
- Log errors to console and activity log
- Use Sentry for error reporting
- Include contextual information in error messages
- Handle network failures gracefully
- Implement fallback behaviors

4. Job Scraping Rules:

- Respect Upwork's rate limits
- Handle logged-out scenarios
- Validate scraped data structure
- Implement retry logic for failed scrapes
- Store only essential job data
- Limit stored jobs to prevent memory issues

5. Webhook Integration:

- Validate webhook URLs
- Handle webhook failures gracefully
- Implement retry logic for failed webhooks
- Include relevant job data in payload
- Add timeout for webhook requests
- Log webhook success/failure

6. UI/UX Guidelines:

- Follow dark theme color scheme
- Use consistent spacing (em-based)
- Implement responsive design patterns
- Show loading states during operations
- Provide clear feedback for user actions
- Keep interface clean and minimal

7. Performance:

- Minimize DOM operations
- Use efficient selectors
- Implement proper cleanup
- Cache frequently accessed data
- Use debounce for frequent operations
- Clear unused data periodically

8. Security:

- Sanitize user inputs
- Validate webhook URLs
- Handle sensitive data carefully
- Use secure communication
- Implement proper CORS handling
- Follow content security policies

9. Testing:

- Test login detection logic
- Verify webhook functionality
- Test job scraping accuracy
- Validate storage operations
- Check notification system
- Test error handling paths

10. Documentation:

- Add JSDoc comments for functions
- Document complex logic
- Include usage examples
- Maintain README updates
- Document configuration options
- Add inline comments for clarity

Code Style and Structure:
- Write concise, technical TypeScript code with accurate examples
- Use functional and declarative programming patterns; avoid classes
- Prefer iteration and modularization over code duplication
- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)

Naming Conventions:
- Use PascalCase for Directory and File names
- Favor named exports for components
- Use PascalCase for component names
- Use camelCase for variable names

TypeScript Usage:
- Use TypeScript for all code; prefer types over interfaces
- Avoid enums; use maps instead
- Use functional components with TypeScript interfaces

Syntax and Formatting:
- Use the "function" keyword for pure functions
- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements
- Use declarative JSX

Error Handling and Validation:
- Prioritize error handling: handle errors and edge cases early
- Use early returns and guard clauses
- Implement proper error logging and user-friendly messages
- Model expected errors as return values in Server Actions
- Use error boundaries for unexpected errors

UI and Styling:
- Use Shadcn UI, Radix, and Tailwind for components and styling
- Implement responsive design with Tailwind CSS; use a mobile-first approach

Performance Optimization:
- Minimize 'use client', 'useEffect', and 'setState'; favor Remix style
- Use dynamic loading for non-critical components

Key Conventions:
- Optimize Web Vitals (LCP, CLS, FID)

Follow Remix documentation and examples for best practices.

patterns:
  - name: 'No Comments'
    pattern: "(?://|/\\*)[^\n]*"
    message: 'Comments are not allowed in this codebase'
    files:
      - '**/*.ts'
      - '**/*.tsx'
    type: 'error'

rules:
  # Core Firebase Configuration
  - name: 'Firebase Config Rules'
    files:
      - lib/firebase/firebase-config.ts
    provides:
      - auth
      - db
      - storage
    dependencies: []

  # Firebase Storage Operations
  - name: 'Firebase Storage Rules'
    files:
      - lib/firebase/firebase-storage.ts
    provides:
      - uploadFile
      - getDownloadUrl
    dependencies:
      - lib/firebase/firebase-config.ts
      - lib/firebase/firebase-rtdb-server.ts

  # Firebase RTDB Operations
  - name: 'Firebase RTDB Rules'
    files:
      - lib/firebase/firebase-rtdb-server.ts
    provides:
      - getInfoFromAccount
      - getDetailsFromAccount
      - getTableFromAccount
      - getStepFromAccount
      - getTaskFromAccount
      - getUser
    dependencies:
      - lib/firebase/firebase-config.ts
      - lib/types/global.ts

  # Type Definitions
  - name: 'Global Types'
    files:
      - lib/types/global.ts
    provides:
      - User
    dependencies: []

  # Constants
  - name: 'Constants'
    files:
      - lib/consts.ts
    provides:
      - RETRYABLE_ERROR_PATTERNS
    dependencies: []

  # API Endpoint
  - name: 'DE Franchise Tax API'
    files:
      - app/api/submit/de-franchise-tax.ts
    provides:
      - handler
    dependencies:
      - lib/firebase/firebase-rtdb-server.ts
      - lib/firebase/firebase-storage.ts
      - lib/types/global.ts
      - lib/consts.ts

suggestions:
  - when: editing app/api/submit/de-franchise-tax.ts
    suggest:
      - lib/firebase/firebase-rtdb-server.ts
      - lib/firebase/firebase-storage.ts
      - lib/types/global.ts

  - when: editing lib/firebase/firebase-rtdb-server.ts
    suggest:
      - lib/firebase/firebase-config.ts
      - lib/types/global.ts

  - when: editing lib/firebase/firebase-storage.ts
    suggest:
      - lib/firebase/firebase-config.ts
      - lib/firebase/firebase-rtdb-server.ts

contexts:
  - name: 'Firebase Operations'
    files:
      - lib/firebase/firebase-config.ts
      - lib/firebase/firebase-rtdb-server.ts
      - lib/firebase/firebase-storage.ts

  - name: 'Type System'
    files:
      - lib/types/global.ts
      - lib/consts.ts

  - name: 'API Implementation'
    files:
      - app/api/submit/de-franchise-tax.ts
      - lib/firebase/firebase-rt

# Role
你是一名专注于 Node.js 全栈开发的高级工程师，特别擅长使用 Hono.js 和 Drizzle ORM 技术栈。你需要用通俗易懂的方式帮助用户完成开发工作。

# 技术栈规范
## 后端框架
- 使用 Hono.js 作为 Web 框架
- 采用 TypeScript 进行开发
- 使用 Drizzle ORM 作为数据库 ORM
- 使用 REST Client (.http 文件) 进行 API 测试

## 代码规范
- 所有代码必须使用 TypeScript 编写
- API 端点需要在 src/test/*.http 文件中编写对应的测试用例
- 数据库模型定义在 src/db/schema.ts 中
- 数据库配置和连接在 src/db/index.ts 中管理
- 主要的应用逻辑在 src/index.ts 中实现

# 开发流程
## 需求分析阶段
1. 理解用户需求
2. 设计 API 接口规范
3. 规划数据库模型

## 开发阶段
1. 在 schema.ts 中定义数据模型
2. 在 index.ts 中实现 API 路由和业务逻辑
3. 在 .http 文件中编写对应的测试用例
4. 使用 ws 在 ws.test.ts 中编写对应的测试用例

## 测试阶段
1. 使用 REST Client 运行 .http 文件进行接口测试
2. 确保所有 API 返回预期的结果
3. 验证数据库操作的正确性
4. 使用 ws 在 ws.test.ts 中编写对应的测试用例
# 文档规范
- API 文档需要包含：
  - 接口路径
  - 请求方法
  - 请求参数说明
  - 返回值格式
  - 示例请求和响应
- 数据库模型文档需要包含：
  - 表结构说明
  - 字段类型和约束
  - 关联关系说明

# 错误处理
- 使用 Hono 的错误处理中间件
- 统一的错误响应格式
- 详细的错误日志记录

# 最佳实践
- 使用环境变量管理配置
- 实现请求参数验证
- 使用适当的 HTTP 状态码
- 遵循 RESTful API 设计原则

# 本规则适用于基于 Hono.js + Drizzle ORM 的后端开发项目
版权所有，引用请注明出处

# Secure Data Management System Development Guide

## Project Overview
Building a secure data management system with frontend and backend components, focusing on risk data handling and visualization.

## Development Phases

### Backend Development
- Phase 1: Basic Infrastructure (Current)
  * TypeScript + Express setup
  * Tencent Cloud MySQL connection
  * Security middleware
  * Base configurations

- Phase 2: Core API Development
  * Authentication endpoints
  * Data management endpoints
  * Logging system

- Phase 3: Security & Processing
  * Data validation
  * Risk processing
  * Audit system

### Frontend Development
- Phase 1: UI Framework
  * React + TypeScript
  * Routing setup
  * State management
  * Component library

- Phase 2: Core Pages
  * Auth pages
  * Data management
  * Dashboard views

- Phase 3: Advanced Features
  * Real-time updates
  * Data visualization
  * User preferences

## Technical Requirements
- Backend: Node.js, TypeScript, Express, Tencent Cloud MySQL
- Frontend: React, TypeScript, UI Framework
- Security: JWT, encryption, access control
- Quality: TypeScript types, error handling, logging

## Development Standards
1. Use TypeScript strictly
2. Implement security best practices
3. Follow proper error handling
4. Use environment variables for sensitive data
5. Maintain clear documentation 

gz-cdb-bh19rij3.sql.tencentcdb.com

username: root
password: AB8Vyft3koyn9x**h4PAw

协议端口: TCP:3306
源地址: 您的公网 IP 或 0.0.0.0/0 (允许所有外部 IP)


只需要这个功能: 前端设计界面获得对方提供的下面字段, 后段数据库进行储存, 并且可以随时提取和查看数据
一、基本交易信息字段
1.mc_create_trade_ip: 商户端创建订单的外网IP地址（IPv4/IPv6）
2.mcCreateTradeTime: 交易创单时间
3.mcCreateTradeChannelType: 交易商品分类（实物/虚拟）
4.mcCreateTradeChannel: 交易商品分类渠道或内容（如账户充值、虚拟币购买、卡券购买等）
5.tradeChannelRiskLevel: 交易商品分类渠道的风险等级（high, mid, low, rel）
6.isFundFreezeBiz: 是否资金保证金业务（Y/N）
二、外部账户（被充值账户）信息字段
1.extraAccountRegTime: 外部账户注册时间
2.extraAccountName: 外部账户姓名（部分脱敏）
3.extraAccountCertno: 外部账户证件号（可加密）
4.extraAccountCertnoLastSix: 外部账户证件号后6位（明文）
5.extraAccountPhone: 外部账户手机号（建议先实名认证）
6.extraAccountPhoneLastFour: 外部账户手机号后4位（明文）
7.extraAccountPhoneRegTime: 外部账户手机号账户绑定时间
8.loginDeviceQuantity: 外部账户近30天登录设备数量
9.alipayUserCustomerId: 外部账户关联支付宝买家ID
10.desensitizedUid: 外部账户ID（保持唯一性）
11.extraAccountRiskLevel: 外部账户风险等级（high, mid, low, rel）
12.extraAccountBusinessLevel: 外部账户业务等级（1, 2, 3等）
13.extraAccountBusinessLevelReason: 外部账户业务等级判定原因
三、被充值外部账号信息字段
1.chargedCardNumber: 被充值外部账号ID（保持唯一性）
2.chargedCardNumberRiskLevel: 被充值外部账号ID风险等级（high, mid, low, rel）
四、二级商户信息字段
1.extraMerchantId or secondaryMerchantNo: 订单收款外部商户ID（保持唯一性）
2.extraMerchantRiskLevel: 外部商户风险等级（high, mid, low, rel）
五、其他信息字段
1.extraCreateTradeRiskLevel: 交易风险等级（high, mid, low, rel）
2.extraCreateTradeControlMethod: 交易管控商户建议方式（交易拦截、交易校验、交易放行）
3.LoanType: 借款类型（如消费贷、现金贷、企业贷款等）
4.Instalments: 分期数（如1, 3, 6, 9, 12等）
5.RepaymentTimes: 已还期数（需与Instalments字段组合使用）
六、脱敏与数据安全处理
涉及个人敏感数据的字段应采用单向哈希函数进行脱敏，以确保数据的不可还原性，仅用于风险管控，不用于其他用途。

# RyanRoga.com

A portfolio website for Ryan Roga.

## Purpose

This project is a portfolio website for Ryan Roga. It is built with Astro 4 and TypeScript. The purpose of this project is to showcase my skills as a developer and to provide a platform for potential employers to learn more about me and my work. The website is designed to be a single-page application with a focus on showcasing my work and providing a way for visitors to get in touch with me. Content for the website should be written in a way that is engaging and informative, while also being visually appealing and easy to navigate. It should be a good representation of my skills and abilities as a developer, and convey a tone of professionalism and enthusiasm for the work I do.

## Astro 4

This project is built with Astro 4. You can find the docs for Astro at https://docs.astro.build/en/getting-started/

## TypeScript

All script should be written in TypeScript whenever possible, unless there is a specific reason not to.

## Coding Best Practices

- All new components should be written in the src/components directory.
- All new pages should be written in the src/pages directory.
- All new utilities should be written in the src/utils directory.
- All new types should be written in the src/types directory.
- All new assets should be written in the public directory.
- All new layouts should be written in the src/layouts directory.

## The README

I fully expect potential employers to look at the README file to learn about me. Therefore, it should be well-written and engaging. As we add packages, update dependencies, and add new features, the README should be updated to reflect the current state of the project. Use markdown formatting and be sure to make the README as readable as possible. Ensure it is well structured, such that a potential employer could quickly jump to sections that are most relevant to them.

## All About Ryan...

About Me
🌐 I am web developer specializing in full-stack web application development. Over the years, I have successfully developed software solutions that address complex business needs. As a full-stack web developer, I have collaborated with diverse clients, translating their requirements into functional and scalable applications.

🚀 My expertise includes creating innovative solutions for business operations and logistics management, task automation, customer relationship enhancements, AI integration, and educational tools. I prioritize user-centered design, ensuring streamlined interfaces and robust backend architectures that enhance overall performance. Proficient in frameworks like Nuxt 3, Vue 3, TypeScript, and TailwindCSS, I consistently adhere to coding best practices.

🔍 I am currently seeking a full-time position within a collaborative team where I can leverage my skills and contribute to impactful projects. I am committed to continuous growth and eager to tackle new challenges that drive innovation and success.

📬 Feel free to reach out: Email | LinkedIn Profile

Languages:
TypeScript JavaScript HTML HTML

Familiar Tools:
Vue.js Nuxt.js Svelte Node.js Express Tailwind CSS Prisma Supabase OpenAI API Vitest Jest Git GitHub npm pnpm yarn PostgreSQL

Additional Technologies:
I have practical experience with a variety of other technologies, which I am capable of using effectively in projects and am actively enhancing my skills in:

React Next.js Astro AWS GCP Python Docker JWT OAuth Firebase MongoDB Puppeteer Cypress Mocha IoT Microcontrollers

Featured Projects
CarEvo Logistics Web Application
Client

Nuxt.js Vue.js TypeScript TailwindCSS Prisma Supabase

The Carevo Auto Solutions Web Application optimizes the logistics and management of used vehicles for Carevo, a premier online used car dealership in Eastern Canada. This comprehensive tool enhances operational efficiency by facilitating vehicle handling across multiple lots, tracking services, and providing timely updates for both logistics and sales teams. Seamlessly integrating vendor portal features, real-time vehicle tracking, request management, and QR code functionality, this application ensures smooth operations and enhanced customer experiences. Built with Nuxt 3, Vue 3, TypeScript, and TailwindCSS, this project exemplifies my expertise in creating scalable and user-friendly web solutions tailored to specific industry needs.

VIU Career Outlooks Web Application
Live Repo

Data Collection
JavaScript Node.js Express Puppeteer

Proof of Concept
TypeScript Vue.js Nuxt.js

Final Project
TypeScript Svelte Node.js Prisma Tailwind CSS Vite Fuse.js node-cache

The VIU Career Outlooks Web Application represents a pivotal collaboration between myself and Vancouver Island University, conceived during my 2022 summer internship as part of the ITAS Web and Mobile Development Diploma program. Aimed at aiding prospective students in making informed decisions regarding their educational and professional paths, this innovative tool seamlessly connects VIU programs and credentials with real-world employment opportunities. By integrating data scraping techniques and database management with Prisma, I ensured the accuracy and relevance of employment outlooks presented to users. Currently live on VIU's website, the application provides detailed insights into career pathways, job prospects, and industry trends across British Columbia. As I continue to evolve this project, I'm enhancing its functionality with features such as user authentication and personalized price sheets, while transitioning to modern technologies like Nuxt, TypeScript, and Tailwind CSS for improved performance and usability.

Granny Go Go Trip Tracker (Capstone Project)
Client Repo

Vue.js Nuxt.js TypeScript Tailwind CSS Prisma Supabase Google Maps API OpenAI API Zod Vitest Tailwind Forms Tailwind Typography Nuxt Icon Chalk eslint DaisyUI Nanoid Consola Superjson

The Granny Go Go Trip Tracker project offers a comprehensive solution for modernizing trip scheduling and management within the medical transportation sector. Developed with a focus on enhancing driver efficiency and passenger communication, this intuitive web application simplifies trip planning and execution. Leveraging a tech stack comprised of TypeScript, Vue 3, Nuxt 3, and Tailwind CSS, I designed a robust frontend interface that provides drivers with essential trip details at a glance. The integration of OpenAI's Chat Completion API with GPT-3.5-Turbo streamlines schedule generation, allowing drivers to create optimized driving routes from email dispatches effortlessly. Additionally, the application features AI-powered conflict detection and route optimization functionalities, ensuring smooth and timely transportation experiences for passengers. By prioritizing usability and functionality, the Granny Go Go Trip Tracker project demonstrates my proficiency in developing innovative solutions that address real-world logistical challenges within the medical transportation industry.

Additional Projects
MossAway Victoria, CMS Website
Client Live Repo

Astro Svelte TailwindCSS

As a part of my ITAS268 Final Project, I created the Victoria MossAway Portfolio using Astro, a modern frontend framework. Departing from traditional CMS platforms like Drupal or WordPress, I crafted a custom CMS solution tailored to my needs. Leveraging AI technology, I generated unique moss monster images and optimized text to enhance SEO and engage visitors effectively. Despite its short-lived duration due to the sale of MossAway, this portfolio site proved highly effective, ranking organically on Google and competently representing my work without conflicting with the SEO of the original MossAway site.

Password Generator
Live Repo

Vue.js TypeScript TailwindCSS

This basic Password Generator is a simple yet effective tool for generating secure passwords quickly and easily. Built in just a couple of hours, this lightweight application allows users to customize their passwords by choosing whether to include special characters, uppercase and/or lowercase letters, and numbers. With a click, users can save their generated password to the clipboard for convenience. Leveraging Vue.js for frontend functionality and TypeScript for robust type-checking, the RogaDev Password Generator demonstrates my proficiency in crafting responsive and visually appealing interfaces. Despite its simplicity, this project underscores my commitment to delivering effective solutions that meet user needs in a straightforward manner.

Window Cleaning Project Evaluation Tool
Live Repo

HTML CSS JavaScript

Initially developed during my first year of school, the Window Cleaning Project Evaluation Tool originated from a need within my previous business, which specialized in exterior cleaning services. Faced with the challenge of generating accurate window cleaning quotes efficiently, I identified a gap in available tools and decided to create a solution myself. Leveraging vanilla HTML, CSS, and JavaScript, I crafted a mobile-friendly application that prioritized simplicity, speed, and effectiveness. This initial version proved highly successful in streamlining the quotation process. Currently, I'm actively enhancing the tool for a future version. This new iteration incorporates advanced features such as user authentication, personalized price sheets with save functionality, and a complete rewrite using modern technologies including Nuxt, TypeScript, and Tailwind CSS. Through this ongoing development, I aim to further improve the tool's functionality and usability, catering to the evolving needs of window cleaning professionals.

Experience
Freelance Web Developer
Freelancing post-graduation, developing custom web solutions for various clients including CarEvo and educational tools for VIU.
Web Developer, VIU Web Department
Developed key projects like the VIU Career Outlooks web app, enhancing the student interface for career planning.
Education
Diploma in Web and Mobile Application Development
Vancouver Island University, Top of my class
Let's Connect!
Feel free to follow me on GitHub to stay updated on my projects.

# INSTRUCTIONS
- BUILD IN A TDD FASHION -> WRITE THE TESTS FIRST -> THEN WRITE THE CODE
- THIS IS A FULL STACK APP which means that we can leverage Node.js within the ./app/api folder

# TECK STACK
- EXPO.IO, to build the app
- EXPO ROUTER with Server Actions and API routes
- NATIVEWIND, styling native with TailwindCSS
- PRISMA ORM, to handle database operations
- tRPC, to handle API requests
- TYPESCRIPT 
- THIRDWEB SDK (thirdweb.com)
- BUN, to run the app

# TESTING
- JEST, to run tests
- REACT NATIVE TESTING LIBRARY, to run tests
- MAESTRO E2E, to run tests

# CODING STYLE
- FUNCTIONAL PROGRAMMING
- READABILITY OVER CONCISE
- KISS PRINCIPLE
- COMMENT AT TOP OF FILE EXPLAINING WHAT THE FILE IS FOR
- USE TYPESCRIPT TO THE MAX
#CURRENT FILE STRUCTURE
tree -I 'node_modules|scripts|migrations|generated|demo.gif|e2e|assets|api|build|.git|.cxx|.gitignore |ios|android|.*' -a -L 4
├── app
│   ├── (tabs)
│   │   ├── (chat)
│   │   │   ├── Chat.tsx
│   │   │   └── _layout.tsx
│   │   ├── (discover)
│   │   │   ├── _layout.tsx
│   │   │   ├── discoverList.tsx
│   │   │   └── discoverMap.tsx
│   │   ├── (home)
│   │   │   ├── _layout.tsx
│   │   │   └── homeIndex.tsx
│   │   ├── (settings)
│   │   │   ├── _layout.tsx
│   │   │   ├── settings.tsx
│   │   │   └── settingsProfile.tsx
│   │   ├── _layout.tsx
│   │   └── scanAddress.tsx
│   ├── _layout.tsx
│   ├── gettingStarted.tsx
│   ├── index.tsx
│   ├── profiles
│   │   └── [address].tsx
│   ├── wrongAccount.tsx
│   └── wsegue.tsx
├── app.json
├── babel.config.js
├── bun.lockb
├── codegen.ts
├── codegen.yml
├── components.json
├── compose.yaml
├── dockerfile
├── eas.json
├── entrypoint.sh
├── env.d.ts
├── expo-env.d.ts
├── global.css
├── graphql.schema.json
├── index.js
├── lib
│   ├── components
│   │   ├── AttestationItem.tsx
│   │   ├── ConnectButtonThirdweb.tsx
│   │   ├── ErrorBoudary.tsx
│   │   ├── GetStartedCard.tsx
│   │   ├── InputWithButton.tsx
│   │   ├── MainButton.tsx
│   │   ├── MapView.tsx
│   │   ├── MySegmentedControl.tsx
│   │   ├── ProfileListItem.tsx
│   │   ├── Rating.tsx
│   │   ├── ReviewListItem.tsx
│   │   ├── SuspenseFallback.tsx
│   │   ├── Toast.tsx
│   │   ├── WebNotImplemented.tsx
│   │   ├── connect-modal-v5
│   │   │   ├── ConnectWithPhoneNumber.tsx
│   │   │   ├── ConnectWithSocial.tsx
│   │   │   ├── Connected.tsx
│   │   │   ├── ExternalWallets.tsx
│   │   │   └── index.tsx
│   │   ├── nativeWindInterop.tsx
│   │   ├── primitives
│   │   │   ├── label
│   │   │   ├── slot.tsx
│   │   │   ├── switch
│   │   │   └── types.ts
│   │   └── ui
│   │       ├── avatar.tsx
│   │       ├── button.tsx
│   │       ├── card.tsx
│   │       ├── input.tsx
│   │       ├── label.tsx
│   │       ├── switch.tsx
│   │       ├── text.tsx
│   │       ├── textarea.tsx
│   │       ├── tooltip.tsx
│   │       └── typography.tsx
│   ├── constants.ts
│   ├── graphql
│   │   ├── client.ts
│   │   └── index.graphql
│   ├── screens
│   │   ├── coinbase-redirect
│   │   │   ├── CoinbaseRedirect.tsx
│   │   │   └── CoinbaseRedirect.web.tsx
│   │   ├── discover-layout
│   │   │   ├── DiscoverLayout.tsx
│   │   │   └── DiscoverLayout.web.tsx
│   │   ├── discover-list
│   │   │   ├── DiscoverList.tsx
│   │   │   └── DiscoverList.web.tsx
│   │   ├── discover-map
│   │   │   ├── DiscoverMap.tsx
│   │   │   └── DiscoverMap.web.tsx
│   │   ├── getting-started
│   │   │   ├── GettingStarted.tsx
│   │   │   └── GettingStarted.web.tsx
│   │   ├── home-index
│   │   │   ├── HomeIndex.tsx
│   │   │   └── HomeIndex.web.tsx
│   │   ├── home-layout
│   │   │   ├── HomeLayout.tsx
│   │   │   └── HomeLayout.web.tsx
│   │   ├── index-layout
│   │   │   ├── Header.tsx
│   │   │   ├── IndexLayout.tsx
│   │   │   ├── IndexLayout.web.tsx
│   │   │   ├── ThirdwebProvider.tsx
│   │   │   └── useRedirectAuth.tsx
│   │   ├── login
│   │   │   ├── Login.tsx
│   │   │   └── Login.web.tsx
│   │   ├── profile
│   │   │   ├── Profile.tsx
│   │   │   └── Profile.web.tsx
│   │   ├── scan-address
│   │   │   ├── ScanAddress.tsx
│   │   │   └── ScanAddress.web.tsx
│   │   ├── settings-layout
│   │   │   ├── SettingsLayout.tsx
│   │   │   ├── SettingsLayout.web.tsx
│   │   │   ├── profile
│   │   │   └── settings
│   │   ├── tabs-layout
│   │   │   ├── LayoutTabs.tsx
│   │   │   └── LayoutTabs.web.tsx
│   │   └── wrong-account
│   │       ├── WrongAccount.tsx
│   │       └── WrongAccount.web.tsx
│   ├── services
│   │   ├── db
│   │   │   ├── dev.db
│   │   │   ├── functions.ts
│   │   │   ├── importCSV.js
│   │   │   ├── prismaClient.ts
│   │   │   ├── profiles_rows.csv
│   │   │   └── schema.prisma
│   │   ├── storage.client.ts
│   │   ├── supabase.ts
│   │   ├── thirdwebAuth.ts
│   │   └── thirdwebClient.ts
│   ├── trpc-server
│   │   ├── context.ts
│   │   ├── routers
│   │   │   ├── _app.ts
│   │   │   └── zod.ts
│   │   └── trpc.ts
│   ├── useColorScheme.tsx
│   └── utils
│       ├── attestations.ts
│       ├── constants.tsx
│       ├── eas.tsx
│       ├── hooks.tsx
│       ├── index.ts
│       ├── tRPCProvider.tsx
│       ├── trpc.ts
│       ├── types.tsx
│       └── uploading.ts
├── metro.config.js
├── nativewind-env.d.ts
├── package.json
├── roadmap.md
├── server.js
├── tailwind.config.js
├── tsconfig.json

# LanFile_PC

## Project Overview

LanFile_PC is a cross-platform desktop application built with React and Electron, designed for efficient file transfers within a local network. The application supports file upload, download, and automatic device discovery, offering a simple and intuitive user experience for file sharing.

---

## Coding Standards

### Language

- Use TypeScript for all new code.

### Component Design

- Prefer functional components and React Hooks over class components.
- Define appropriate TypeScript types for all variables and functions.

---

## Style Guidelines

- Follow the [Airbnb React/JSX Style Guide](https://github.com/airbnb/javascript/tree/master/react).
- Use 2 spaces for indentation.
- Limit maximum line length to 100 characters.

---

## Best Practices

1. **Responsive Design**:

   - Use Tailwind CSS for implementing responsive UI designs.

2. **Performance Optimization**:

   - Use `React.memo()` when applicable to improve component performance.

3. **Asynchronous Operations**:
   - Prefer `async/await` over `.then()` for handling promises.

---

## Testing Requirements

- Write unit tests for all new components and utility functions.
- Aim for a minimum of 80% code coverage in tests.

---

## Documentation Standards

- Use JSDoc comments for all functions and components.
- Keep the `README.md` file updated with project setup instructions and contribution guidelines.

---

## Key Considerations

- Always consider **accessibility** (a11y) and **performance** when implementing new features.
- All code must pass review to ensure adherence to coding standards and style guidelines.

---

---

## Development Tools

- **Frameworks**: React, Electron
- **Styling**: Tailwind CSS
- **Testing Framework**: Jest
- **Build Tool**: Webpack
- **Packaging Tool**: Electron-builder

---

When anwsering, always provide the full updated answer again. Always use the existing codebase in your context as a reference and don't make up new code when possible. always use the latest ts best practices, prefer types to interfaces.

MONKEY STRON TOGETHER, SIMPLE WORDS, NOT BIG.
YOU MAKE CODE FOR WEB APP.
NO REPEAT CODE, BAD FOR MONKE.

USE TYPINGS, MONKE LOVE TYPINGS.

USE WINDOWS, WE LOVE WINDOWS.
ASTRAL UV SIMPLE, GOOD ASTRAL UV, GOOD FOR PYTHON.
PNPM FOR NODE, PNPM IS LOVE.

WE USE FASTAPI FOR BACKEND, BEANIE FOR DATABASE, AND TANSTACK FOR FRONTEND, TANSTACK ROUTER, TANSTACK QUERY, TANSTACK REACT QUERY!!!!
WE LOVE FULLSTACK, AND ALSO TAILWIND.

MONKE LOVE, MONKE STRONK TOGETHER.

WE NOT USE POETRY. WE USE UV.