•
5 min lukuaika
Personal Dashboard

Personal Dashboard

A single-screen personal dashboard (PWA) that consolidates workout logging, habit tracking, and everyday context into a unified interface. Built for daily personal use with zero ads, tracking, or data monetization.


Why

It started with a simple thought: why keep logging workouts in a phone’s notepad when I could build a tailored application around it and use the data to visualize strength progression and weight trends. I also wanted to explore AI coding agents in practice while creating something I use every day.


System Architecture

The dashboard aggregates direct user input stored in Supabase alongside automated background integrations from various public APIs:

┌─────────────────────────────────────────────────────────────────────────┐
│                      PERSONAL DASHBOARD (PWA)                           │
│             Next.js 15 · React 19 · Tailwind CSS · Vercel               │
└─────────────────────────────────────────────────────────────────────────┘
                     │                                   │
         [ Personal Logs & State ]              [ Automated APIs ]
                     │                                   │
      ┌──────────────┴──────────────┐     ┌──────────────┴──────────────┐
      │                             │     │                             │
┌─────▼────────┐              ┌─────▼───┐ ├─► Weather (Open-Meteo)
│ Workouts     │              │ Mood    │ │   Free weather API via browser location
│ (Gym / Run)  │              │ Books   │ ├─► Electricity Spot Prices (spot-hinta.fi)
│ Weight       │              └─────┬───┘ │   Finnish hourly spot pricing (incl. VAT)
└─────┬────────┘                    │     ├─► Flag Days (Ministry of the Interior)
      │                             │     │   Conditional display on official dates
      └──────────────┬──────────────┘     ├─► Music Stats (Spotify + Last.fm + Apple)
                     │                    │   Scrobbles, listening time, and genres
               ┌─────▼──────┐             └─► Homelab (HP EliteDesk)
               │  SUPABASE  │                 Host status over tunnel (offline)
               │ PostgreSQL │
               │ Auth + RLS │
               └────────────┘

Modules & Data Sources

Workouts & Strength Progression

  • Functionality: Replaces workout notebooks. Supports training splits (Push / Pull / Legs / Upper / Run) with automatic saving per set.
  • Data Source: Supabase PostgreSQL (workout_sessions, session_exercises, workout_logs).
  • Progression Metric: Tracks estimated 1-rep max (e1RM) using the Epley formula. Charts register progressive overload immediately when reps increase, even if the bar weight remains constant.

Weight & Composition Tracking

  • Functionality: Daily morning weight and calorie tracking.
  • Data Source: Supabase (health_logs).
  • Trend Analysis: Smooths out daily water weight fluctuations (1–2 kg) using a rolling calendar-week average to display a consistent weekly rate of change across the dashboard.

Music & Listening Analytics

  • Functionality: Shows top artists, tracks, total listening hours, and album art across 7 days, 1 month, 6 months, and 1 year.
  • Data Source: Spotify scrobbles background data to Last.fm. The dashboard queries the Last.fm API to compute exact listening duration, with genres matched via the Apple Music Search API.

Electricity Spot Pricing

  • Functionality: Displays Finnish hourly electricity spot prices with current-hour highlighting and dynamic threshold coloring (green $\le$ 10 c, orange < 20 c, red $\ge$ 20 c/kWh).
  • Data Source: spot-hinta.fi REST API.

Weather

  • Functionality: Local temperature, wind, precipitation, weather icons, and sunrise/sunset times.
  • Data Source: Open-Meteo API. Location is cached in localStorage for instant loads without repeated browser geolocation prompts.

Flag Days

  • Functionality: Explains the occasion whenever flags are flying in Finland.
  • Data Source: Official Finnish flag days implemented directly in client calendar logic (lib/flag-days.ts). Only rendered when today is an active flag day.

Mood Tracking

  • Functionality: Daily rating (1–5) visualized as a GitHub-style activity heatmap.
  • Data Source: Supabase (mood_logs).

Reading Log

  • Functionality: Tracks active and completed books alongside page counts.
  • Data Source: Supabase (books).

Homelab Telemetry

  • Functionality: Quick status glance at home server resources (CPU, RAM, storage, running containers like Home Assistant / Immich).
  • Data Source: Local HP EliteDesk mini-PC through a secure Tailscale / Cloudflare tunnel (falls back to “Offline” when the tunnel is down).

Tech Stack

AreaTechnologyRationale
FrontendNext.js 15 (App Router), React 19Responsive PWA, server and client components
StylingTailwind CSSFast dark mode UI
Data & ChartsTanStack Query, RechartsEfficient caching and progression charts
Backend & DatabaseSupabase (PostgreSQL, Auth, RLS)Relational storage with row-level security
DeploymentVercel (App) + Supabase (Data)Automated CD directly from GitHub
Running Cost0 € / monthFree tiers with no ads or third-party analytics

Security & Architecture Notes

This is a single-user personal application, not a multi-tenant production product. Security is enforced at the infrastructure level:

  • Authentication & Data Isolation: Supabase Auth with Row Level Security (RLS) policies applied to all personal tables.
  • Secrets: API keys and credentials are restricted to environment variables (.env.local).
  • Localization: Supports EN / FI language toggling with preference stored in localStorage.