Technology Stack
Core Technologies
- TypeScript: ^5.8.3
- Node.js: ^20.17.47
- React: ^18.2.0
Frontend
- React for UI components
- Tailwind CSS for styling
- Floating UI for tooltips and popovers
- Headless UI for accessible components
- React DnD for drag and drop functionality
- React Window for virtualized lists
Code Quality
- ESLint: ^9.27.0
- Prettier: ^3.5.3
- TypeScript ESLint Parser: ^8.32.1
Build System
- Webpack: ^5.99.8
- pnpm: 10.11.0
Styling
- Tailwind CSS: ^3.4.1
- PostCSS: ^8.5.3
- Autoprefixer: ^10.4.21
Type Definitions
- @types/node: ^20.17.47
- @types/react: ^18.2.55
- @types/react-dom: ^18.2.19
- @types/chrome: ^0.0.260
Dependencies
- @plasmohq/storage: ^1.3.0 (Chrome Extension Storage)
- zustand: ^5.0.4 (State Management)
- uuid: ^11.1.0
- react-hot-toast: ^2.5.2 (Notifications)
- tslog: ^4.9.3 (Logging)
Development Environment
- VSCode
- Cursor IDE
- mise (Development environment manager)
Implementation Rules
Code Organization
- Modular component architecture
- Strict TypeScript type checking
- ESLint and Prettier for code style enforcement
- Chrome Extension best practices
Build Process
- Webpack for bundling
- Optimized production builds
- Type checking and linting in CI/CD pipeline
Development Workflow
- Development mode with hot reloading
- Production build optimization
- Type checking and linting in CI/CD pipeline