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
71 lines
3.0 KiB
Markdown
71 lines
3.0 KiB
Markdown
# 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.amazonExtEventBus` for 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**: `ErrorHandler` class 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.js` in `__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-` or `amazon_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 |