Živić Elektro – Headless E-commerce Platform

Živić Elektro is a headless e-commerce platform developed using Next.js 16 (App Router) with a WordPress + WooCommerce backend, connected through WPGraphQL and Apollo Client.

The goal of the project was to create a fast, scalable, and SEO-optimized web store while maintaining the reliability of WooCommerce for product and order management. By separating the frontend and backend layers, the application provides full control over the user experience and performance optimization.

⸻

Technical Architecture

Frontend • Next.js 16 (App Router) • React 19 • TypeScript • TailwindCSS • Motion animations • Zustand (state management for cart) • Apollo Client (GraphQL integration) • Sharp (image optimization)

Backend • WordPress • WooCommerce • WPGraphQL

⸻

Key Implementations

Headless Architecture

The frontend and backend are completely decoupled. WordPress is used solely as a CMS and e-commerce engine, while the Next.js application manages routing, rendering, and the entire user interface.

This approach allows significantly better performance and flexibility compared to traditional WordPress themes.

⸻

Custom Cart System

A custom cart state management system was implemented using Zustand, enabling: • Efficient client-side cart management • Minimal re-renders • Flexible checkout flow control • Seamless integration with WooCommerce APIs

⸻

GraphQL Data Layer

Communication with the backend is handled via WPGraphQL and Apollo Client, allowing: • Precise data querying • Reduced over-fetching • Efficient caching strategies • Clean separation between UI and data layer

⸻

SEO Optimization

The platform includes several SEO-focused features: • Automatic sitemap generation using next-sitemap • Dynamic metadata generation • Server-side rendering for improved indexing • Image optimization using Sharp

⸻

UI and User Experience

The interface was designed with a focus on speed and clarity using TailwindCSS, enhanced with: • Motion-based UI animations • Lottie animations for interactive elements • Marquee sections for dynamic content presentation

The result is a modern, responsive, and performant user interface.

⸻

Deployment

The application is deployed on a VPS environment using: • PM2 process management • Nginx configuration • SSL certificates • Optimized production builds

⸻

Result • Fast and scalable e-commerce platform • High Lighthouse performance scores • Flexible architecture combining WooCommerce reliability with modern React frontend development • Full control over frontend UX without the limitations of traditional WordPress themes