Problém
Kadeřnický salon v Liberci chtěl kromě webu s informacemi o službách také:
- prodávat profesionální vlasovou kosmetiku online,
- umožnit zákazníkům registraci a správu objednávek,
- mít spolehlivý backend pro správu katalogu, objednávek a zákazníků,
- a zachovat přitom jednoduchost pro majitelku.
Původní web byl statický Astro web s PHP formulářem — 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 │
│ BRAND → Světlý layout, indigo akcent #4d4dff, CZ/EN │
│ HOST → VPS, systemd (web:3500 + medusa:3501) │
└──────────────────────────────────────────────────────────────────────────┘Architektura
Stejný model jako OpravnaBicyklu — osvědčená architektura, rozdíl v brandu a katalogu:
┌────────────────────────────────────────────────────┐
│ apps/web → Next.js 16 │
│ – Homepage + marketing: služby, ceník, galerie │
│ – E-shop route group: /shop, /cart, /checkout │
│ – Klientská zóna: /account, /orders, /addresses │
│ – CZ/EN přepínač, Sticky CTA s telefonem │
└────────────┬───────────────────────────────────────┘
│ proxy /api/medusa/*
┌────────────▼───────────────────────────────────────┐
│ apps/medusa → Medusa.js v2 │
│ – Region ČR v CZK, doprava Zásilkovna │
│ – Seed: salónní katalog produktů │
│ – Admin UI na /app │
└────────────────────────────────────────────────────┘Řešení
- Produkty + služby — katalog salónní kosmetiky přes Medusa backend, majitelka spravuje přes admin panel.
- CZ/EN — dvojjazyčný web i e-shop. Copy ve slovnících, runtime bez i18n knihovny.
- Rezervace — sticky CTA lišta s telefonem, formulář posílá booking intent emailem. Žádný kalendář, žádný chaos.
- Admin UI — přístupný na localhost:3501/app, majitelka vidí objednávky, produkty, zákazníky a stav skladu.
- Sticky CTA — na každé stránce viditelné tlačítko “Objednat se”, primárně tel: link, sekundárně formulář.
Výsledky
- Živý e-shop s profesionální kosmetikou — košík, checkout, klientská zóna
- +180 % organických návštěv z Google oproti původnímu statickému webu
- 1 monorepo, 2 systemd služby, 0 SaaS kromě Stripe
- Majitelka spravuje katalog i objednávky sama
Ponaučení
- Stejná architektura, jiný brand — Opravna a Sarah sdílejí 80 % kódu, liší se vzhled, katalog a akcent. Frameworková šablona se vyplatila.
- Systemd vs PM2 — obě fungují, systemd je čistší pro menší projekty, PM2 pro projekty s vlastním clusterem.
- Indigo akcent — pro kosmetický brand funguje líp než oranžová. Barva dělá víc, než se zdá.