Kávé és kreativitás | A TUTTI.hu megújulása

A TUTTI díjnyertes jegeskávéját szerintem senkinek nem kell bemutatnom. A kávéporok mellett a cég rengeteg más terméket is gyárt, azonban nem csak saját, de más cégek részére is, bérgyártás jelleggel.

A gyártástechnológiai eszközök fejlesztésével és a cég növekedésével megszületett az igény egy modernebb és átláthatóbb weboldalra, a tartalom újragondolásával együtt.

Kötött flexibilitás

Jelen esetben egy kész tervvel dolgozhattunk. A weboldalra megálmodott elemeket, azok designjait valamit az általános arculathoz kapcsolódó részeket egy Figma fájl formájában továbbították részünkre. Ezek többszöri revízión átesett tervekként már kész oldalakként kerültek a kezünkbe és minimális egyeztetést követően el is kezdhettünk azon gondolkozni, hogy milyen megoldásokat és stacket választunk.

Mivel a technikai része teljesen ránk volt hagyva, ezért bármilyen újdonságot kipróbálhattunk és akár végleges eszközként is alkalmazhattunk a webes implementációhoz. A designer rugalmasan kezelte az elképzeléseinket: mivel a mobil nézetek csak bizonyos oldalakhoz és komponensekhez készültek el, ezért a reszponzivitás megoldása nem volt pixelekhez kötve.

Ami szép az szép... de jó is?

Mivel nem előre kidolgozott templatet kellett átalakítani, felmerült a kérdés, hogyan lehetne a komponenseket akár egyesével megépíteni egy olyan környezetben, ahol egy komponens libraryként, izoláltan tudunk példákat létrehozni, majd azt céges körökben és a desingerrel is validálva lehessen kipróbálni, tesztelni.

Csak egy példát hozva, ha van egy kék hátteres buborékom aminek a közepén van egy kép, illetve a jobb oldalán szöveg, miért ne lehetne ebből egy balos verzió, vagy egy olyan verzió aminek nem kék a háttere? Ha ezt dinamikusan összerakjuk, hogy tudjuk úgy a desingernek odaadni, hogy ő is ki tudja próbálni mindegyik verziót, végignézni a reszponzív nézeteket is?

Mivel minden komponenst elemi szintre szerveztünk, ezt akár külön-külön fájlokban is meg lehetett volna adni egy egyszerű copy-paste-el és minimális átalakítással, azonban ennél találtunk jobb megoldást, amit direkt ilyen jellegű felhasználásra találtak ki: a Storybook.js-t.

Egy katt és a piros, zöld

Ha a legrövidebben akarnám leírni a Storybook lényegét, akkor a fenti mondatot használnám. A framework lényege, hogy egy dinamikus komponenshez írhatunk "sztorikat", ami konkrét helyzeteket akár egy kattintással tud prezentálni.

Például, építek egy webshop kártyát, ami egy terméket jelenít meg. Ez a termék lehet raktáron, vagy akár el is fogyhatott. Ennek a technikai oldala kb. úgy néz ki, hogy van egy true|false változóm, ami megmondja a termék elérhetőségét, illetve az adott státuszhoz tartozó designt, ahol az egyik verzióban a megveszem gomb zöld, a másik meg piros és elfogyott felirattal díszeleg.

A designer, product owner vagy bárki illetékes elé ezt többféle módon is lerakhatom az asztalra. A Storybook megoldása az, hogy az általam megadott komponens listából az illető kiválasztja a kártyámat, a Storbyook megjeleníti azt egy default státuszban, alatta pedig ott van egy switcher, amivel egy kattintással lehet a verziókat kapcsolni. Így egy helyen lehet látni, real-time ahogy a gomb átváltozik pirosról zöldre.

Fúzió

Mivel a szép külső mellé kellett egy szép belső is a Strapi nevezetű, headless CMS-re esett a választásunk. Ez bizonyos limitációk mellett rendkívül rugalmas felületet adott a kezünkbe, amit a visszajelzések alapján a "túloldalon" is nagyon szeretnek. A kiszolgálásért pedig a NextJS a felelős ami összeköti a látogatóknak szánt látványt az adminok által létrehozott tartalommal.

Itt egy ponton eljutottunk oda, ahol a Storybookot elengedtük. Bár a library tökéletesen használható lenne egy másik projekthez, a komponenseket újra feldolgozva, ennél a munkánál nem ez volt a cél, mivel egyedi designnal dolgoztunk, adott feladathoz.

A komponenseket átemeltük egy NextJS projektbe, ahol bizonyos pontokon át lettek dolgozva, ezzel az extra (és felesleges) importálási és buildelési problémákat kikerülve. A storyk és a komponens core-ok a mai napig léteznek a projektben, de inkább csak referencia szinten vannak használva és nem tényleges megjelenítésre.

Az első fázis lezárása

Bár a TUTTIval megkezdett közös munkának még nincs vége, az első fázist sikeresen zártuk. A marketing csapat kapott egy előre beállított admin felületet, ahol a megalkotott komponenseket blokkonként lehet lerakni, ezzel kész oldalakat alkotva. A designnal, igazításokkal, térközökkel pedig nekik már nem kell bajlódniuk, hiszen ezeket az első lépésként, a design alapján lefektettük és beállítgattuk komponens illetve layout szinten.

Ezt tetézve az oldal támogat egy bizonyos szintű nyelvesítést, SEO optimalizálást, blogok létrehozását, egy külön a csomagolástípusoknak létrehozott oldaltípust és listázót valamint egy kereshető és szűrhető tudástárat.

Záró gondolatok

A Storybookkal és a Tailwind CSS-el élmény volt dolgozni, a Strapival szintúgy, viszont a NextJS-el már nem annyira. Többször jutottunk arra a következtetésre, hogy ekkora projekthez a NextJS overkill és bizonyos esetekben szabályosan hátráltatta a fejlesztés előrehaladását.

A designt egy igazi kihívás volt összerakni, mert a szabványos design elemeken kívül (tipográfia, kártyák, gombok) nagyon sok olyan elemet tartalmazott, amihez többszörös overflow, abszolút-relatív pozícionálás illetve a z-indexek megfelelő sorrendje kellett.

strapi nextjs storybook tailwindcss

Olvasnék még ...