TUTTI — B2B vállalati jelenlét és arculat

Kávé, kreativitás és „kötött flexibilitás"

A TUTTI Élelmiszeripari Kft. neve fogalom a piacon — a jegeskávéjukat senkinek nem kell bemutatni. Amikor elkezdtünk dolgozni a vállalati weboldaluk megújításán, a feladatunk az volt, hogy ezt a több évtizedes szakmai múltat és a modern bérgyártási képességeket egyetlen, vizuálisan is lenyűgöző felületen fogjuk össze. Ahogy a blogunkban is írtuk: a cél egy modernebb, átláthatóbb és technológiailag kompromisszummentes megoldás volt.

A kihívás: pixel-precíz tervek és technológiai szabadság

A projektet a „kötött flexibilitás" jellemezte. Kész Figma-terveket kaptunk külsős designerektől, amik többszöri revízión átesett, fix layoutok voltak. Ugyanakkor a technológiai stack kiválasztásában teljes szabadságot kaptunk — így olyan eszközökhöz nyúlhattunk, amik valódi mérnöki élménnyé tették a fejlesztést.

A legnagyobb kihívást a design komplexitása jelentette: a látványos overflow elemek, az egyedi pozicionálások és a rétegek (z-indexek) precíz kezelése igazi „CSS-csatává" tette a megvalósítást, de a végeredmény magáért beszél.

Amit alkottunk: moduláris építőkészlet

1. Izolált fejlesztés Storybook-kal

Hogy a bonyolult komponenstervet (kártyák, gombok, buborékok) hatékonyan tudjuk validálni, a Storybook.js-t hívtuk segítségül. Ez lehetővé tette, hogy minden elemet izoláltan, a weboldaltól függetlenül építsünk meg és teszteljünk.

• Valós idejű kontroll: a designer és a product owner egyetlen kattintással ellenőrizhette a komponensek különböző állapotait (pl. raktáron lévő vs. elfogyott termék kártyája) és a reszponzivitást, mielőtt azok a végleges helyükre kerültek volna.

2. Strapi + Next.js: a „szép külsőhöz szép belső"

A tartalomkezeléshez a Strapi headless CMS-t választottuk, a megjelenítésért pedig a Next.js felel. Ez a fúzió biztosítja a villámgyors betöltést és a kiváló SEO-t, ami a nemzetközi B2B partnerek eléréséhez elengedhetetlen.

• Tudástár és kereső: implementáltunk egy szűrhető tudástárat és egy speciális listázót a csomagolástípusokhoz, segítve a bérgyártás iránt érdeklődőket.

3. Szabadság a marketingnek, biztonság a brandnek

A fejlesztés végén nem csak egy oldalt adtunk át, hanem egy komponens-alapú admin felületet. A TUTTI marketingesei ma már blokkokból építhetik fel az új aloldalakat:

• A térközök, színek és stílusok előre rögzítettek, így a csapat szabadon alkothat anélkül, hogy „szétesne" a brand-azonos megjelenés.

Mérnöki őszinteség: tanulságok a kód mögött

Nem félünk kimondani: egy ekkora projekthez a Next.js néha „overkill" volt, és bizonyos pontokon inkább hátráltatta a haladást, mint segítette. Ugyanakkor a Tailwind CSS-szel és a Storybook-kal való munka minden percét élveztük — ezek az eszközök segítettek abban, hogy a legvadabb design-elképzeléseket is stabil, fenntartható kóddá formáljuk.

Eredmények: az első fázis sikere

A megújult tutti.hu ma már a vállalat nemzetközi súlyának megfelelő profizmussal fogadja a látogatókat. A marketingcsapat fejlesztői segítség nélkül menedzseli a blogokat, a termékdokumentációkat és a híreket, miközben a technikai háttér Docker-konténerekben, stabilan szolgálja ki a forgalmat.

Ez a projekt bizonyította: ha megkapjuk a bizalmat a technológia kiválasztásához, a legkötöttebb designból is egy jövőálló, rugalmas digitális terméket kovácsolunk.