Kenso Grimm
216a972fef
- Add .gitignore to exclude node_modules, dist, logs, and system files - Add comprehensive project documentation including README, deployment guide, and development setup - Add .kiro project specifications for amazon-product-bar-extension, appwrite-cloud-storage, appwrite-userid-repair, blacklist-feature, and enhanced-item-management - Add .kiro steering documents for product, structure, styling, and tech guidelines - Add VSCode settings configuration for consistent development environment - Add manifest.json and babel/vite configuration for extension build setup - Add complete source code implementation including AppWrite integration, storage managers, UI components, and services - Add comprehensive test suite with Jest configuration and 30+ test files covering all major modules - Add test HTML files for integration testing and validation - Add coverage reports and build validation scripts - Add AppWrite setup and repair documentation for database schema management - Add migration guides and responsive accessibility implementation documentation - Establish foundation for Amazon product bar extension with full feature set including blacklist management, enhanced item workflows, and real-time synchronization
3.0 KiB
3.0 KiB
Project Structure & Architecture
Directory Organization
├── src/ # Source code
│ ├── content.jsx # Main entry point & content script
│ ├── StaggeredMenu.jsx # React menu component
│ ├── StaggeredMenu.css # Menu styles
│ ├── *Manager.js # Manager classes (storage, panels, etc.)
│ ├── *Extractor.js # Data extraction utilities
│ ├── *Service.js # External service integrations
│ ├── Enhanced*.js # Enhanced feature implementations
│ ├── *.css # Component-specific styles
│ └── __tests__/ # Test files
├── dist/ # Build output (generated)
├── .kiro/ # Kiro configuration
│ ├── steering/ # Project steering rules
│ └── specs/ # Feature specifications
├── test-*.html # Manual testing pages
└── manifest.json # Chrome extension manifest
Architecture Patterns
Manager Pattern
- Purpose: Encapsulate complex functionality into focused managers
- Examples:
EnhancedStorageManager,ItemsPanelManager,BlacklistPanelManager - Responsibilities: State management, UI coordination, data persistence
Event-Driven Communication
- Global Event Bus:
window.amazonExtEventBusfor cross-component communication - Event Types:
product:saved,blacklist:updated,enhanced:item:saved - Pattern: Emit events for state changes, listen for updates
Error Handling Strategy
- Centralized:
ErrorHandlerclass with retry logic and fallbacks - User-Friendly: Localized error messages (German/English)
- Graceful Degradation: Fallback data when services fail
File Naming Conventions
- Managers:
*Manager.js(e.g.,EnhancedStorageManager.js) - Services:
*Service.js(e.g.,MistralAIService.js) - Extractors:
*Extractor.js(e.g.,ProductExtractor.js) - Components: PascalCase for React components (e.g.,
StaggeredMenu.jsx) - Tests:
*.test.jsin__tests__/directory - Styles: Component-specific CSS files matching component names
Code Organization Principles
Class-Based Architecture
- ES6 classes for managers and services
- Constructor dependency injection
- Public/private method distinction with JSDoc
React Integration
- Functional components with hooks
- React only for UI components (menu, panels)
- DOM manipulation handled by vanilla JS managers
Storage Strategy
- localStorage: Primary storage for extension data
- Keys: Prefixed with
amazon-ext-oramazon_ext_ - Cross-tab sync: Storage event listeners for real-time updates
Testing Structure
- Unit tests: Individual component testing
- Integration tests: Manager interaction testing
- Property-based tests: Using fast-check for robust validation
- Mocks: localStorage, DOM APIs, external services