Skip to content
Daniel Aiyon
All projects

Ripple

Asisten pengambilan keputusan harian berbasis AI yang membantu pengguna memahami konsekuensi dari setiap tindakan sebelum mengambilnya.

Visit ripple.run.app
Published
Stack
  • React
  • TypeScript
  • Tailwind CSS
  • Express.js
  • Google Gemini AI
  • Firebase Firestore
  • Firebase Authentication
  • Vite
Live at
ripple.run.app
Screenshot 1 / 6

Ripple adalah asisten pengambilan keputusan harian yang membantu pengguna memahami konsekuensi dari setiap tindakan sebelum mereka mengambilnya. Bukan todolist, bukan scheduler. Ripple adalah decision companion yang hadir tepat saat kamu berdiri di persimpangan kecil kehidupan sehari-hari.

Fitur Utama

  • Analisis Konsekuensi AI: Input dilema harianmu, dapatkan analisis dampak dalam 4 dimensi: Kesehatan, Produktivitas, Energi, dan Waktu
  • Streaming Response: Lihat AI berpikir secara real-time dengan Server-Sent Events
  • Auto-Fallback Model: Gemini 3.5 Flash ke 3.1 Flash Lite ke 3 Flash ke 2.5 Flash ke 2.5 Flash Lite ke 2 Flash secara otomatis saat model sedang sibuk
  • Google Calendar Integration: Ambil agenda hari ini sebagai konteks tambahan analisis (read-only)
  • Radar Chart: Visualisasi dampak keputusan dalam bentuk spider chart interaktif
  • Tren Performa: Grafik garis 4 dimensi berdasarkan histori keputusan
  • Reflective Loop: Refleksi singkat beberapa jam setelah keputusan, untuk membuat saran berikutnya lebih personal
  • Dark Mode: Tema gelap/terang dengan toggle dan persistence
  • Export Data: Unduh histori keputusan dalam format CSV atau XLSX
  • Notifikasi Pengingat: Push notification sebelum aktivitas dimulai
  • Responsive: Dioptimalkan untuk mobile, tablet, dan desktop

Tech Stack

  • Frontend: React 19, TypeScript, Tailwind CSS v4, Motion, Recharts
  • Backend: Express.js, Google Gemini AI (streaming)
  • Database: Firebase Firestore
  • Auth: Firebase Authentication (Google Sign-in)
  • Build: Vite

Design System

Ripple menggunakan design system berbasis CSS custom properties:

  • Typography: DM Serif Display (heading) + DM Sans (body)
  • Colors: Warm off-white canvas, terra cotta accent, 4 dimension colors
  • Motion: Spring physics via Motion, staggered reveals
  • Dark Mode: Full variable override via .dark class

Struktur Proyek

File tree
src/
pages/
LandingPage.tsxLanding page dengan scroll animations
Onboarding.tsx2-step onboarding dengan drag reorder
Dashboard.tsxHalaman utama via /dashboard /profile /settings
NotFound.tsx404 page
components/
FAQ.tsxAccordion pertanyaan umum
ImpactRadar.tsxSVG radar chart dengan spring animation
firebase.ts
googleToken.ts
App.tsx
index.cssDesign system tokens + dark mode
server.tsExpress + Gemini streaming API

Dibuat Untuk

Google Juara Vibe Coding 2026