Life

Personal habit tracking for Japanese learning, nutrition, and sport.

About

Life is a personal tracking web application for monitoring daily habits across four domains. The app prioritizes fast data input and insightful statistics visualization with an offline-first architecture.

Performance Optimizations

This app is designed for perceived instant response times, especially on mobile PWA.

Local-First Architecture

All data is stored in IndexedDB (via Dexie.js) and accessed locally first. Network sync happens in the background, so the UI never waits for server responses.

Optimistic Updates

When adding or modifying data, the UI updates immediately via Zustand store before the database write completes. Users see instant feedback.

Cache-First Service Worker

Navigation requests use a CacheFirst strategy - the PWA loads instantly from cache without waiting for the network. Users can manually refresh via Settings when updates are available.

Debounced Background Sync

Data changes trigger a sync to Supabase with a 2-second debounce, batching rapid inputs and preventing excessive network requests.

Press-on-Down Interactions

Critical buttons use onPointerDown instead of onClick, eliminating the ~100ms delay on mobile touch events for instant tactile feedback.

Reduced Animation Durations

UI animations (sheets, dialogs) use shortened durations to minimize perceived latency while maintaining visual polish.

Features

Japanese Learning

Track flashcard sessions, reading, watching, and listening activities. View progress through heatmaps, streaks, and time statistics.

Nutrition

Manage a personal food database with macro tracking (calories, protein, carbs, fat). Log meals by type and quantity with daily and weekly summaries.

Sport

Log running, street workout, and biking sessions. Visualize activity through heatmaps and weekly distance graphs. Track duration, distance, and training types.

Weight

Record daily weight measurements with trend visualization over time.

Offline-First

All data is stored locally using IndexedDB for instant access. Syncs automatically with Supabase when online.

PWA

Installable on mobile devices. Works offline after initial load.

Tech Stack

Next.js 15 (App Router)
React 19
TypeScript
Tailwind CSS with Catppuccin theme
shadcn/ui
Dexie.js (IndexedDB wrapper)
Supabase (Authentication + Cloud Sync)
Recharts (Data visualization)
Serwist (PWA / Service Worker)

Getting Started

Prerequisites

Bun (or Node.js)
Supabase account

Installation

Clone the repository:

git clone https://github.com/YannickHerrero/life.git
cd life

Install dependencies:
```
bun install
```

Create .env.local with your Supabase credentials:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

Run the development server:
```
bun dev
```
Open http://localhost:3000

Build

bun run build

Project Structure

├── app/
│   ├── (auth)/          # Login and signup pages
│   ├── (main)/          # Dashboard, stats, history, settings
│   └── layout.tsx
├── components/
│   ├── ui/              # shadcn/ui components
│   ├── charts/          # Heatmaps, line charts, bar charts
│   ├── forms/           # Input forms for each domain
│   └── history/         # History view components
├── hooks/               # Custom hooks for each domain
├── lib/                 # Database, sync, utilities
└── types/               # TypeScript type definitions

License

MIT