Kontrakce — měření porodních kontrakcí

Klidná PWA na měření kontrakcí při porodu: délka, rozestupy (start-to-start), klouzavé průměry za poslední hodinu a upozornění podle pravidla 5-1-1. Minimalistické, soft-pink UX navržené tak, aby ho zvládla rodící žena.

• Fáze 1 (hotovo): plně funkční offline jádro — bez loginu, data jen v zařízení (localStorage). Instalovatelné na plochu, nezhasíná obrazovku (Wake Lock), čeština + angličtina.
• Fáze 2 (hotovo): účty (Google + email/heslo přes Auth.js) a záloha / synchronizace dat do Neon Postgres (Drizzle). Offline-first se synchronizací last-write-wins a tombstonami pro mazání.
• Další (hotovo): export dat do CSV (na /ucet), dark mode s přepínačem vzhledu (auto / světlý / tmavý, default dle systému), uvítací banner pro nové uživatele (nabídne přihlášení, neblokuje měření).
• Fáze 3 (zbývá): deploy na Vercel.

Stack

• Next.js 16 (App Router) + React 19 + TypeScript
• Tailwind CSS v4
• PWA (manifest + ikony), Wake Lock API
• Cíl deploye: Vercel, databáze: Neon Postgres (fáze 2)

Vývoj

npm install
npm run dev

Pozn.: porty 3000/3100 na tomto stroji obsazují jiné projekty — dev server běží na PORT=4321 npm run dev → http://localhost:4321

npm run build   # produkční build
npm run lint    # eslint

Struktura

src/
  app/
    layout.tsx        # metadata, viewport, I18nProvider
    page.tsx          # hlavní obrazovka
    manifest.ts       # PWA manifest
    icon.svg          # favicon
    apple-icon.tsx    # iOS home-screen ikona (generovaná)
    globals.css       # soft-pink design systém
  components/
    ContractionTracker.tsx  # hlavní stavová komponenta
    HistoryList.tsx
    LanguageToggle.tsx
    I18nProvider.tsx
  lib/
    stats.ts          # výpočty: délka, rozestup, průměry, pravidlo 5-1-1
    storage.ts        # localStorage repozitář
    format.ts         # formátování času (cs/en)
    i18n.ts           # slovníky cs/en
    useWakeLock.ts    # nezhasínání obrazovky
    useMounted.ts     # hydratačně bezpečné čtení client-only hodnot

Pravidlo 5-1-1

Kontrakce ~5 minut od sebe, každá ~1 minutu dlouhá, po dobu ~1 hodiny. Výpočet je v src/lib/stats.ts (fiveOneOne). Není to lékařská rada — appka jen zobrazuje vzor; rozhodující jsou pokyny porodnice / lékaře.

Účty + databáze (fáze 2)

Env proměnné (v .env.local, vzor v ENV.sample):

• DATABASE_URL — connection string z Neon
• AUTH_SECRET — npx auth secret
• GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET — Google Cloud Console (redirect URI http://localhost:4321/api/auth/callback/google pro vývoj, https://<doména>/api/auth/callback/google pro produkci)

Databázové schéma:

npx drizzle-kit push     # vytvoří / aktualizuje tabulky v Neonu

Klíčové soubory: src/auth.ts (Auth.js), src/db/schema.ts (Drizzle schéma), src/app/api/{auth,register,sync} (API), src/lib/sync.ts (klient sync). Přihlašovací stránka /prihlaseni, účet /ucet.

Deploy na Vercel (fáze 3)

Do Vercel projektu nastav stejné env proměnné, přidej produkční doménu do Google OAuth redirect URIs a nasaď. Databáze zůstává Neon.