ZenFlow App — NuroLab Companion PWA

Companion aplikacija za ZenFlow™ protokol — dnevni habit tracker, alati za fokus i sistem koji čuva niz i podstiče ponovnu kupovinu.

Mentalne performanse za ljude koji ne mogu da priušte sebi loš dan. — nurolab.rs

Hostuje se na app.nurolab.rs. Standalone Next.js aplikacija koju dobijaju ZenFlow kupci. Glavni sajt (nurolab.rs) je odvojen WordPress/WooCommerce projekat.

---

Zašto postoji

ZenFlow nije „pre i posle" proizvod — efekat se gradi iz dana u dan i nestaje kad se protokol prekine. Zato aplikacija nije dodatak nego retencioni motor: svaka funkcionalnost služi jednom od tri cilja.

1. Doslednost protokola — da korisnik svaki dan popije obe doze (streak mehanika).
2. Doživljaj vrednosti — da vidi napredak i oseti da app vredi (kriva fokusa, bedževi).
3. Ponovna kupovina — da na vreme dokupi refill i ne prekine niz (supply alerti + CTA).

---

Tech stack

Sloj	Izbor
Framework	Next.js (App Router) + TypeScript + React 19
Stilizovanje	Tailwind CSS v4 (brend tokeni u configu)
UI	shadcn/ui (Radix)
Baza	Neon Postgres
ORM	Drizzle
Auth + role	Clerk
PWA	Serwist
Grafike	Recharts
Email	Resend
Push	Web Push (VAPID) + Vercel Cron
Hosting	Vercel
Plaćanje (Faza 2)	Stripe (zahteva US entitet)

Ključne odluke: Supabase je odbačen u korist Neon + Clerk (kad je Clerk izabran za auth, glavna prednost Supabase-a je nestala; Neon izbegava 7-dnevnu inactivity pauzu). Detalji u CLAUDE.md.

---

Model pristupa

Dve role: Admin (NuroLab tim) i User (krajnji korisnik). Pristup se verifikuje preko WooCommerce porudžbine.

access_status	Uslov	Pristup
VIP	Porudžbina u poslednjih 60 dana	Pun pristup, besplatno
Inactive	Nema porudžbine 60+ dana	Ograničen; poziv na dokup
Subscriber F2	Plaća pretplatu (Stripe)	Pun pristup bez kupovine

Registracija je dozvoljena samo ako mejl postoji među WooCommerce porudžbinama. access_status se računa iz datuma poslednje porudžbine i osvežava pri svakom sync-u.

---

Početak rada

Preduslovi

• Node.js 20+ (testirano na 24)
• npm
• Neon Postgres baza (neon.tech — free tier je dovoljan za MVP)

Setup

# 1. Instaliraj zavisnosti
npm install

# 2. Napravi .env.local iz šablona i popuni vrednosti
cp .env.example .env.local

.env.local (vidi .env.example za pun spisak):

# Neon pooled connection string (Neon Console → Connection Details)
DATABASE_URL="postgresql://<user>:<password>@<host>.neon.tech/<db>?sslmode=require"

# Clerk (Clerk Dashboard → API Keys)
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_test_..."
CLERK_SECRET_KEY="sk_test_..."
CLERK_WEBHOOK_SIGNING_SECRET="whsec_..."   # Clerk Dashboard → Webhooks

# 3. Primeni migracije na bazu
npm run db:migrate

# 4. Pokreni dev server
npm run dev

App radi na http://localhost:3000. Style guide / design sistem je na /style-guide.

Clerk auth — dodatna podešavanja

Pored env varijabli, u Clerk Dashboard-u uradi:

1. Sessions → Customize session token → dodaj claim da role stigne u session:

   { "metadata": "{{user.public_metadata}}" }
   

   Middleware (middleware.ts) čita sessionClaims.metadata.role za gating /admin ruta.
2. Webhooks → napravi endpoint ka https://<tvoj-domen>/api/webhooks/clerk, subscribe na user.created, user.updated, user.deleted. Signing secret ide u CLERK_WEBHOOK_SIGNING_SECRET.
   • Lokalni test: Clerk Dashboard "Send test event" ili ngrok tunel ka localhost:3000.
3. Bootstrap prvog admina: Users → izaberi korisnika → Metadata → Public → postavi:

   { "role": "admin" }
   

   Promena važi nakon sledećeg refresha session tokena (re-login). Ostali korisnici default-no dobijaju role: "user" preko webhook-a.

Rute: javne (/, /sign-in, /sign-up, /style-guide, /api/webhooks/*, /manifest.webmanifest, /~offline); zaštićene login-om (/dashboard); zaštićene rolom admin (/admin, /api/admin/*).

---

Env varijable (Vercel launch lista)

Svih 23 varijable koje kod čita. Obavezno = bez nje feature pada ili se tiho gasi.

This is the beginning of the README. Read the rest at the original. Read the full README ↗