Dokumentacja techniczna: PPG Palette & Tinting
Dokumentacja obejmuje cztery powiązane projekty tworzące system wyboru kolorów PPG:
| Projekt | Opis | Repozytorium |
|---|---|---|
| color-selector | Web Component: Palette (gotowe kolory) | @ppg_pl/pallete |
| color-selector-tinting | Web Component: Tinting (mieszalnik) | @ppg_pl/tinting |
| color-selector-backend | Backend CMS dla Palette | Directus + PostgreSQL |
| color-tinting-backend | Backend CMS dla Tinting | Directus + PostgreSQL |
Architektura systemu
┌─────────────────────────────────────────────────────────────────┐
│ FRONTEND (NPM) │
│ ┌─────────────────────┐ ┌─────────────────────┐ │
│ │ @ppg_pl/pallete │ │ @ppg_pl/tinting │ │
│ │ (color-selector) │ │ (color-selector- │ │
│ │ Stencil/WebComp │ │ tinting) Stencil │ │
│ └──────────┬──────────┘ └──────────┬──────────┘ │
└─────────────┼───────────────────────────┼───────────────────────┘
│ │
▼ ▼
┌─────────────────────────┐ ┌─────────────────────────┐
│ color-selector-backend │ │ color-tinting-backend │
│ Directus (port 8055) │ │ Directus (port 8056) │
│ PostgreSQL + Redis │ │ PostgreSQL + Redis │
└─────────────────────────┘ └─────────────────────────┘
Szybki start
- Palette (gotowe kolory) –
npm install @ppg_pl/pallete - Tinting (mieszalnik) –
npm install @ppg_pl/tinting - Komponenty działają w dowolnym środowisku (Vanilla JS, React, Vue, Angular)
Przejdź do Stack technologiczny po szczegóły.