OpravnaBicyklu.cz // DRAGOCZ

Problém

Cykloservis v Českém Dubě potřeboval web, který:

prodává náhradní díly, doplňky a servisní balíčky online,
umožňuje zákazníkům registraci, historii objednávek a správu adres,
běží v češtině i angličtině,
je rychlý, jednoduchý na správu a připravený na růst.

Stávající řešení bylo statické — bez košíku, bez účtu, bez možnosti prodávat.

Stack

┌──────────────────────────────────────────────────────────────────────────┐
│  FRONT  → Next.js 16 (App Router, Turbopack, route-groups)              │
│  STYLE  → Tailwind v4 + framer-motion + lucide-react                    │
│  BACK   → Medusa.js v2 (Postgres, JWT auth, publishable API key)       │
│  SHOP   → /shop, /cart, /checkout, /account (orders + addresses)        │
│  PLATBA → Stripe (připravený) + manual provider                         │
│  DOPRAVA→ Zásilkovna pickup point, ceny v CZK                           │
│  HOST   → VPS, PM2 (web:3010 + medusa:9000)                            │
└──────────────────────────────────────────────────────────────────────────┘

Architektura

Dvě nezávislé runtime aplikace v jednom monorepu:

┌────────────────────────────────────────────────────┐
│  apps/web  → Next.js 16                           │
│  – Homepage + marketing sekce (služby, ceník, galerie) │
│  – E-shop route group: /shop, /cart, /checkout   │
│  – Klientská zóna: /account, /orders, /addresses  │
│  – CZ/EN přepínač, i18n slovníky                  │
└────────────┬───────────────────────────────────────┘
             │ proxy /api/medusa/*
┌────────────▼───────────────────────────────────────┐
│  apps/medusa → Medusa.js v2                       │
│  – Region ČR v CZK, doprava Zásilkovna            │
│  – Seed skripty: FOX, RockShox, Shimano, DT Swiss,│
│    Maxxis, Lezyne, Muc-Off a další značky          │
│  – Admin UI na /app: objednávky, zákazníci, sklad │
└────────────────────────────────────────────────────┘

Řešení

Marketing + e-shop v jednom — homepage prodává služby i zboží, /shop zobrazuje katalog napojený na Medusa backend. Žádný oddělený CMS.
CZ/EN od začátku — všechno copy ve slovnících lib/i18n/{cs,en}.json. Přepínač jazyka přepíná celý web i e-shop.
Auth flow — registrace → login → bearer token v localStorage jako opravna-customer-token. Customer session event po login/logout.
Košík — cartId v localStorage jako opravna-cart-id. Po přidání/odebrání se dispatchne custom event a header chip se přepočte.
Medusa admin — přístupný jen interně na localhost:9000/app. Majitel vidí objednávky, zákazníky, adresy a sklad.
Seed katalog — custom skripty nasazují reálný cyklo sortiment: odpružení FOX, RockShox, komponenty Shimano, pláště Maxxis, čištění Muc-Off.

Výsledky

Živý e-shop s košíkem, checkoutem a platební branou — připravený k ostrému prodeji
Bilingvální CZ/EN — celý web včetně e-shopu a klientské zóny
< 1 s LCP na homepage i na shop stránkách (Next.js + Turbopack)
1 monorepo, 2 procesy, 0 externích závislostí na SaaS platební bráně kromě Stripe
Majitel spravuje katalog, objednávky a zákazníky přes Medusa admin — bez zásahu developera

Ponaučení

Next.js + Medusa v2 je dnes nejsilnější stack pro středně velký e-shop s vlastním backendem. Rychlost vývoje × flexibilita × cena provozu.
Route-group layout v Next.js App Routeru (commerce route group) — header/footer se nepřemontovává při přechodu mezi shop stránkami.
Medusa auth flow není triviální — registrační token nestačí, je potřeba dovést login a teprve výsledný bearer token uložit.
CZ/EN bilingual web je jednodušší udělat od začátku než dodatečně. Slovníky v JSONu, překlad klíčů v kódu, runtime bez i18n knihovny.