O projektu
Pro agenturu burda.design jsem realizoval technickou část webu GINA Software, české technologické firmy, která vyvíjí systémy pro záchranné složky a krizové řízení.
Z dodaného návrhu ve Figmě jsem postavil vlastní WordPress šablonu na míru, napojenou na Mailchimp a Pipedrive, s asynchronním zpracováním požadavků na pozadí.
Vše od návrhu po nasazení funguje hladce a odpovídá standardu, který GINA Software drží i ve svých vlastních řešeních.
Zadání
Agentura burda.design připravila kompletní návrh a vizuální podklady, mým úkolem bylo dodat technické řešení, které bude spolehlivé, výkonné a dlouhodobě udržitelné.
Cílem bylo vytvořit web, který se rychle načítá, zvládá pokročilé integrace a zůstává snadno spravovatelný i bez zásahů vývojáře.
Požadavkem byla přesná implementace návrhu z Figmy, bez builderů a přebytečných pluginů – čisté řešení, které obstojí i při větším provozu.
Moje řešení
Vytvořil jsem vlastní WordPress šablonu, která věrně odpovídá návrhu z Figmy a stojí na moderním technickém základu, který je udržitelný. Základem kódu je Timber a Twig, které dávají WordPressu jasnou strukturu a přehlednost. Díky nim je logika oddělená od šablon, kód zůstává čistý a práce s daty je efektivní.
Frontend běží na Bootstrapu 5, který jsem upravil pomocí Sass na míru pro tuto šablonu – využívá jen to, co je skutečně potřeba, což zrychlilo vývoj a snížilo velikost kódu. Celý frontendový build proces zajišťuje Webpack, který kompiluje, slučuje a optimalizuje všechny skripty i styly. Pomocí PurgeCSS se automaticky odstraňují nepoužívané CSS třídy, takže je výsledný kód plně optimalizovaný a web se načítá rychle i při větším objemu obsahu.
Pro správu obsahu jsem nasadil ACF (Advanced Custom Fields) a připravil sadu bloků, které agentura i klient mohou jednoduše spravovat přímo z administrace. Web je propojený s Mailchimpem pro newslettery a Pipedrivem pro sběr a správu obchodních kontaktů.
Veškeré formuláře a datové požadavky běží asynchronně na pozadí, takže frontend zůstává rychlý a nezávislý na externích voláních.
Výzvy a jak jsem je řešil
Nejsložitější částí byla kombinace více integrací s důrazem na výkon a bezpečnost.
Mailchimp, Pipedrive i interní API mají odlišné způsoby komunikace – všechny bylo nutné sladit tak, aby běžely spolehlivě a nebrzdily uživatelský provoz.
Zároveň jsem musel zachovat vysokou přesnost vůči návrhu z Figmy – včetně všech drobných detailů, přechodů a typografie.
Návrh obsahoval mnoho prvků mimo klasické gridy a containery, s různými offsety a vizuálními přesahy. Ty jsem řešil pomocí flexibilního layoutu v CSS a úprav v Bootstrapu, aby se design choval konzistentně napříč zařízeními a přitom zůstal věrný originálu.
Výsledek
Vznikl reprezentativní web, který prezentuje GINA Software jako silnou technologickou firmu.
Web je rychlý, bezpečný a technicky precizní – zvládá integrace s externími nástroji, odesílání požadavků i automatizované procesy na pozadí.
Klient má jednoduchou správu obsahu, web běží stabilně a je připravený na další rozvoj.
Technologie a detaily řešení
Stabilní základ pro prezentaci, postavený jako šablona na míru bez builderů.
Knihovna Timber odděluje logiku od šablon a dává WordPressu jasnou architekturu. V kombinaci s jazykem Twig umožňuje psát přehledný, udržitelný a bezpečný kód s čistým HTML, podobně jako v moderních frameworcích.
Administrace je postavená na míru pomocí ACF Pro – každý obsah má jasně definovaná pole a strukturu. Klient tak může web pohodlně spravovat bez rizika rozbití rozvržení.
Frontend framework upravený na míru pomocí Sass. Používají se jen potřebné komponenty, takže web zůstává optimalizovaný, rychlý a přehledný.