Živić Elektro – Headless E-commerce Platform

Živić Elektro je headless e-commerce platforma razvijena u Next.js 16 (App Router) arhitekturi sa WordPress + WooCommerce backend-om, povezanom putem WPGraphQL i Apollo Client-a.

Cilj projekta bio je izgraditi performantnu, skalabilnu i SEO-optimizovanu web prodavnicu sa potpunom kontrolom nad frontend iskustvom, uz zadržavanje stabilnosti WooCommerce sistema za upravljanje proizvodima i narudžbinama.

⸻

Tehnička arhitektura

Frontend • Next.js 16 (App Router) • React 19 • TypeScript • TailwindCSS • Motion (animacije) • Zustand (cart state management) • Apollo Client (GraphQL integracija) • Sharp (image optimizacija)

Backend • WordPress • WooCommerce • WPGraphQL

⸻

Ključne implementacije

Headless arhitektura

Frontend i backend su potpuno odvojeni. WordPress služi isključivo kao CMS i e-commerce engine, dok Next.js aplikacija preuzima potpunu kontrolu nad UI, routing sistemom i performansama.

Custom Cart System

Implementiran je custom cart sistem korišćenjem Zustand state management-a, čime je omogućeno: • Brzo upravljanje stanjem korpe bez nepotrebnih re-rendera • Potpuna kontrola nad checkout tokom • Fleksibilna integracija sa WooCommerce API-jem

GraphQL integracija

Komunikacija sa backend-om se vrši putem WPGraphQL-a uz Apollo Client, čime je omogućeno: • Precizno definisanje query-ja • Smanjenje over-fetching-a • Bolja kontrola keširanja podataka

SEO optimizacija • next-sitemap za automatsko generisanje sitemap-a • Dinamičko generisanje metadata • SSR i optimizovan rendering za bolju indeksaciju • Optimizacija slika pomoću Sharp-a

UX & Animacije • Motion-based mikro interakcije • Lottie animacije • Marquee sekcije za dinamičniji prikaz sadržaja • Minimalistički, brz i responzivan dizajn

⸻

Produkcioni deploy

Aplikacija je deployana na VPS infrastrukturi uz: • PM2 process management • Nginx konfiguraciju • SSL sertifikate • Ručno optimizovan build i cache sistem

⸻

Rezultat • Visoke Lighthouse performanse • Brzo učitavanje proizvoda • Fleksibilan e-commerce sistem sa skalabilnom arhitekturom • Potpuna kontrola nad frontend UX-om bez ograničenja WooCommerce teme

⸻

Zašto je ovaj projekat bitan?

Ovo nije “WordPress shop”. Ovo je enterprise-ready headless commerce setup sa modernom React arhitekturom i custom state sistemom.