Case study
Obalero
Webový editor, ve kterém designéři nahrají grafiku a hned ji vidí na 3D modelu obalu. Z modelu vznikají packshoty a tým připomínkuje návrh přímo na něm. Na projektu dlouhodobě pracuji jako hlavní vývojář a je stále ve vývoji.
- Next.js
- Three.js
- Symfony
- Node.js
- Na čem jsem pracoval
- Celý front-end včetně 3D vizualizace v prohlížeči
- Velká část backendu
- Plugin pro Adobe Illustrator
- Render server pro packshoty
- Mikroslužby, např. image scaler a WebSocket server
- Napojení na platební bránu Stripe
- Technologie
- Next.js
- Three.js
- Symfony
- Node.js
- Python
- MEL
- REST API
01
Výzva
Designéři obalů potřebují vidět grafiku na skutečném tvaru obalu dřív, než jde do výroby nebo do fotostudia. Plochý náhled v Illustratoru neukáže, jak se motiv ohne kolem plechovky.
02
Řešení
Editor v prohlížeči, který grafiku nanese na 3D model obalu v reálném čase. Jako hlavní vývojář jsem postavil celý front-end včetně 3D vizualizace v Three.js, velkou část backendu a plugin pro Adobe Illustrator, který posílá grafiku do editoru bez ručního nahrávání. Packshoty vznikají na render serveru, který jsem také postavil, stejně jako další mikroslužby, například image scaler nebo WebSocket server, a napojení na platební bránu Stripe.
03
Výsledek
Platforma je v provozu na app.obalero.com. Designéři v ní pracují od prvního návrhu po hotové packshoty a projekt dál rozvíjíme.