[ 11 ]
OmniShop.
Multi-channel commerce showcase. Storefront, admin, analytics — postavené end-to-end ako frontend referencia pre prospects, ktorí chcú vidieť pattern predtým, než pošlú brief.
Prečo multi-channel, prečo tento stack
Väčšina rastúcich commerce brandov narazí okolo druhého roku na rovnakú stenu. Začínajú na Shopify. Pridajú Amazon kvôli dosahu. Nahodia pár SKU na eBay, lebo im niekto povedal, že by mali. Kým do mixu vstúpi marketplace kanál ako Allegro alebo eMag, prepínajú medzi štyrmi dashboardmi, reconcilujú sklad v spreadsheete a všímajú si, že konverzné pomery sú naprieč kanálmi úplne rozdielne, ale nemajú jedno miesto, kde ich porovnať.
OmniShop je referenčný build pre túto stenu. Demonštruje surface area, ktorú jednotná commerce ops platforma potrebuje pokryť — bez toho, aby predstieral, že je SaaS produkt, ktorý predávam. Pointa nie je "tu je Shopify alternatíva." Pointa je takto by som architektoval storefront-a-admin systém, ak by si prišiel do discovery s týmto problémom.
Customer-facing surface
Storefront je konverzná strana buildu. Light theme, štedrý whitespace, AI-generovaná produktová fotografia pre vizuálnu konzistenciu, kategóriami riadený katalóg artisan tovaru (sviečky, keramika, koža, skincare).
Galéria nižšie kráča UI cestou: homepage → product detail → cart → checkout.
Brand identita
Rovnaká token chrbtica ako UI: faceted mark, navy shelf, electric blue akcent na digitále. Tu zobrazené ako fyzické + tablet — zámerná pauza pred dark ops povrchom.
Identita zostáva tichá, aby produktové UI zostalo hrdinom — farebná disciplína nesie z tlače na obrazovku.
Operator-facing surface
Dashboard je ops strana. Dark theme — nie preto, že dark mode je trendy, ale preto, že operátori naň hľadia osem hodín denne a biele pozadie storefrontu by ich vyčerpalo. Channel-specific farby (Shopify zelená, Amazon oranžová, eBay červená, Direct modrá) udržiavajú multi-channel dáta čitateľné na prvý pohľad.
Overview je "good morning" pohľad: KPIs, revenue trend, channel mix, recent orders, top products. Analytics ide hlbšie: growth, akvizičný náklad, lifetime value, return rate — čísla, podľa ktorých commerce operátor reálne kormidluje — plus revenue-by-channel a category mix.
Stack & architektonické rozhodnutia
Frontend Next.js 14 (App Router) · TypeScript · React 18
Styling Tailwind v4 · Radix UI primitives · custom design tokens
State React Context (cart) · Zustand (app) · React Query (server)
Forms React Hook Form + Zod
Charts Recharts
Icons Lucide (290+ icons)
Animations Framer Motion + Tailwind keyframes
Build Turborepo monorepo
Deploy Vercel (Edge functions where they help)
Quality ESLint · Prettier · Husky · Commitlint
Imagery Seedream 4.5 (BytePlus) for product photography1. App Router pre storefront, nie Pages Router. Server components pre kategórie a produktové stránky znamenajú, že SEO-kritický povrch shippuje server-rendered HTML. Cart a admin sú client components tam, kde potrebujú byť — checkout flow, dashboard interakcie. Miešanie render stratégií v rámci jednej Next.js apky je dnes rutina, ale rozhodnutie stále záleží: storefront, ktorý shippuje ako SPA, stráca organickú návštevnosť.
2. Tri state knižnice, nie jedna. Cart state žije v React Context — malý, session-scoped, žiadny global store. App-wide UI state (sidebar, theme, profile shell) žije v Zustand — minimálne API, žiadna provider polievka. Server state (catalog, orders, analytics fixtures) žije v React Query — caching, background refetch, optimistic updates tam, kde sa oplatia. Každý nástroj je dimenzovaný na svoj problém.
3. Dual theme ako produktové rozhodnutie, nie toggle. Storefront a admin majú odlišné publiká a odlišný time-on-page. Dark-mode toggle na storefronte by bol distrakcia. Light-mode admin by vyčerpal operátorov do obeda. Témy sú scopnuté na kontext: zákazníci vždy vidia light, operátori vždy vidia dark. Tokeny sú zdieľané; resolved theme je hard-coded per surface.
Čo to demonštruje
Pre prospects, ktorí hodnotia commerce prácu, tento build pokrýva:
— Storefront remeslo. Hero, katalóg, product detail, cart, checkout a confirmation — celá konverzná cesta.
— Admin remeslo. Multi-page dashboard, KPI karty, charty, tabuľky, settings povrchy — celá operations cesta.
— Design system disciplína. Desiatky reusable komponentov, dve témy zo zdieľaných tokenov, motion vocabulary, responsive až do 320px.
— Information architecture. Storefront a admin stromy, sidebar navigácia, breadcrumbs tam, kde objasňujú hierarchiu.
— Stack judgment. Viaceré state vrstvy použité zámerne, server vs. client split tam, kde to SEO a interaktivita vyžadujú, monorepo štruktúra pripravená rásť.
Codebase je len dummy-data. Ak ma briefneš s reálnym commerce problémom, začal by som Discovery Sprintom, aby som pochopil doménu — B2B vs B2C, single-channel vs multi-channel, headless vs platforma, EU compliance — nie zdvihnutím tohto scaffoldu.
Storefront cesta → checkout. Potom admin.
Kategórie, vyhľadávanie a free-shipping threshold vedú fold, takže nakupujúci sa zorientujú rýchlo; Seedream 4.5 udržiava produktové shoty konzistentné bez týždňa v štúdiu.
Galéria vľavo a pravý stack povrchu cenu, hodnotenie, vendora a množstvo bez scrollovania; accordions skrývajú care a shipping noise, kým sa nerozbalia.
Rozdeľuje položky od summary, takže checkout CTA zostáva viditeľná, keď nakupujúci menia množstvá — najmä na úzkych breakpointoch.
Single-page checkout beží contact, address a payment v jednom scrolle; summary zostáva pinned vpravo s Continue shopping vľavo hore ako lacný exit.
KPIs, sparklines, revenue trend, channel mix bar, recent orders a top products landujú v jednom scane pre pondelňajší ranný ops check-in.
Pridáva steering metriky — growth, CAC, LTV, returns — a páruje ich s revenue-by-channel, category mix, traffic a funnel blokmi.
Briefni ma na niečo podobné
Multi-channel commerce, headless storefronty, ops dashboardy, design systémy pre product tímy — toto je core teritórium. Pošli brief alebo si rezervuj 30-min call. Discovery Sprint najprv, fixed-price build potom.
Pošli brief