1. Stack technologiczny
Frontend (Web Components)
| Projekt | Technologie | Namespace | Pakiet NPM |
|---|---|---|---|
| color-selector (Palette) | StencilJS, TypeScript, SASS, Swiper | pallete | @ppg_pl/pallete |
| color-selector-tinting (Tinting) | StencilJS, TypeScript, SASS, chroma-js, Swiper | tinting | @ppg_pl/tinting |
- Framework: StencilJS (kompilacja do Web Components)
- Stylowanie: SASS (globalne + scoped)
- API: Directus SDK (
@directus/sdk), fetch z tokenem - Inne: GTM (Google Tag Manager), Helmet
Dystrybucja NPM
- Palette:
@ppg_pl/pallete - Tinting:
@ppg_pl/tinting
Backend / CMS
Oba back-endy używają Directus (Headless CMS):
| Projekt | Wersja Directus | Port | Baza danych |
|---|---|---|---|
| color-selector-backend | 10.10.4 | 8055 | PostgreSQL (PostGIS) |
| color-tinting-backend | latest | 8056 (mapowany na 8055 wewnątrz) | PostgreSQL (PostGIS) |
- Cache: Redis 6
- Serwer: Docker (docker-compose)
- Dodatki: n8n (color-selector-backend), rozszerzenia importu CSV (color-tinting-backend)
Baza danych
- PostgreSQL z rozszerzeniem PostGIS
- Każdy backend ma osobną instancję Directusa i bazę danych
Serwer
- color-selector-backend: Directus na porcie 8055
- color-tinting-backend: Directus na porcie 8056 (host)
- Produkcja:
https://color-selector.pl(Palette),https://color-selector.pl/tinting(Tinting)