2026·web applive

DayFlow

Screenshot DayFlow
Next.js 14TypeScriptTailwind CSSSupabaseReact Hook FormZodOpenWeatherMap API

— tentang project

Personal dashboard untuk catatan harian bergaya editorial: kalender interaktif, cuaca hari ini, quote harian, to-do list, mood tracker, dan catatan per tanggal dengan upload gambar — dibangun di atas Next.js App Router dengan Supabase sebagai backend.

tantangan

Menyatukan widget-widget yang sifatnya berbeda (data real-time cuaca dari API eksternal, catatan panjang per tanggal, state kalender, dan file upload) ke dalam satu dashboard yang konsisten, tanpa membuat client penuh sesak logika dan rahasia API.

solusi

Supabase dipakai sebagai backend terpadu: auth email/password plus Google OAuth lewat @supabase/ssr agar session bekerja mulus di App Router, database untuk catatan dan aktivitas harian, Storage untuk lampiran gambar. Cuaca diambil lewat route handler server-side sehingga pemanggilan OpenWeatherMap tidak dilakukan langsung dari browser, form divalidasi Zod + React Hook Form, dan tema light/dark dikonsistenkan lewat next-themes.

— highlights

  • Dashboard all-in-one: kalender interaktif, cuaca, quote harian, to-do list, mood tracker, dan catatan per tanggal
  • Auth ganda Supabase — email/password dan Google OAuth dengan session SSR-safe di App Router
  • Catatan harian rich text dengan upload gambar via Supabase Storage
  • Cuaca OpenWeatherMap diambil melalui route handler server-side, bukan langsung dari klien
  • Light/dark mode dengan palet warna custom via next-themes