Osobný fitness a life-optimization dashboard (BodyForge) postavený na Next.js 15 (App Router), TypeScript, Tailwind CSS a shadcn/ui.
Industrial Renaissance — tmavá monochromatická téma, vysoký kontrast, ostré hrany, jemná textúra pozadia.
| Modul | Popis |
|---|---|
| Daily Tracker | Checkbox systém: jedálne okno, hydratácia 3,5 L, tréning dnes |
| Google Calendar | Nadchádzajúce eventy, busy bloky, hint na jedlo |
| Progress Chart | 7-dňový graf konzistencie (% splnených úloh) |
| Notifikácie | Web Notification API: 12:00, 18:30, 19:00 |
src/
├── app/
│ ├── api/calendar/route.ts # Google Calendar API proxy
│ ├── auth/callback/route.ts # Supabase OAuth callback
│ ├── login/page.tsx # Prihlásenie / registrácia
│ ├── layout.tsx
│ ├── page.tsx # Hlavný dashboard
│ └── globals.css # Industrial Renaissance theme
├── components/
│ ├── ui/ # shadcn/ui komponenty
│ └── dashboard/ # Dashboard moduly
├── hooks/
│ ├── use-calendar.ts
│ ├── use-daily-tracker.tsx
│ └── use-notifications.ts
├── lib/
│ ├── supabase/ # Supabase client, server, middleware
│ ├── google-calendar.ts
│ ├── notifications.ts
│ └── types.ts
└── middleware.ts
supabase/schema.sql # DB schéma pre Supabase
docs/GOOGLE_CALENDAR_SETUP.md # Google Cloud inštrukcie
.env.example
npm install
cp .env.example .env.local- Vytvor projekt na supabase.com
- Skopíruj Project URL a anon key do
.env.local - V SQL Editori spusti
supabase/schema.sql - V Authentication → Providers povoľ Email a/alebo Google — návod: docs/SUPABASE_GOOGLE_AUTH.md
Postupuj podľa docs/GOOGLE_CALENDAR_SETUP.md
npm run devOtvor http://localhost:3000
Dashboard funguje aj bez prihlásenia (localStorage). Po prihlásení sa dáta synchronizujú cez Supabase.
- Next.js 15 · React 19 · TypeScript
- Tailwind CSS v4 · shadcn/ui
- Supabase (auth + daily_logs)
- Google Calendar API (googleapis)
- Recharts · Lucide React · date-fns