Temperatuuri ülevaade

Home Assistant temperature and humidity dashboard.

A Next.js static export dashboard that reads Home Assistant CSV exports of temperature and humidity data, processes them server-side, and persists snapshots to Vercel Blob storage. Filters, KPIs, charts, tables, and CSV export are password-protected and shareable across devices.

Purpose

A personal learning project to explore Home Assistant data export, CSV processing, server-side data handling, and stateless cloud-native architecture on Vercel. The dashboard makes temperature and humidity trends from a smart home easily queryable and shareable.

User problem

Home Assistant stores sensor readings in CSV exports, but raw data is hard to explore. Charts, filters, and KPIs are needed to spot trends, answer questions about comfort levels, and share findings.

Target user

Household members who want to explore temperature and humidity patterns without direct database access. Shared password protects the dashboard and allows cross-device access.

Version 1 outcome

CSV upload, real-time filtering, temperature and humidity charts, KPI summaries, entity-level tables, and CSV export all work behind a shared password. Data persists across sessions via Vercel Blob storage.

Architecture

The dashboard is a stateless Next.js static export running on Vercel. Home Assistant CSV data is processed server-side, boiled down to a summary JSON snapshot, and stored in Vercel Blob. The browser only holds the snapshot, never raw CSV. 

Browser (password-protected)
  -> Next.js App Router (Auth middleware)
      -> CSV upload via API route
      -> Server-side parse & process (PapaParse)
      -> Boil down to JSON snapshot
      -> Store snapshot in Vercel Blob
      -> Fetch snapshot on dashboard load
      -> Client-side filter & render (Recharts, Lucide, Tailwind)

Frontend

React + Next.js App Router. Login page with shared password, dashboard with upload form, KPI cards, temperature/humidity sparklines, interactive charts, entity tables, and CSV export button. All filtered client-side.

Backend

API routes for authentication (shared password + session cookies) and data upload. CSV is parsed server-side with PapaParse, deduplicated entities, invalid readings filtered out, and snapshot stored as JSON in Vercel Blob at datasets/current.json.

Storage

Vercel Blob holds only the latest processed dataset snapshot as JSON. No raw CSV files stored. Raw Home Assistant exports remain on the user's computer. Blob storage is read on dashboard load and written on upload.

Features

The dashboard covers the core workflow: secure upload, real-time filtering, exploratory charting, KPI summaries, data inspection, and export.

CSV upload

Home Assistant CSV with columns entity_id, state, last_changed. File is validated, deduplicated by hash, and processed server-side. Raw CSV is not stored; only the JSON snapshot persists.

Filters & presets

Real-time filters for entity selection and date range. Presets for common ranges (last 24h, 7d, 30d). Filtering happens client-side; no server query needed after initial load.

KPI cards

Min, max, and average temperature and humidity across filtered data. Live sparkline preview on each KPI. Updated instantly as filters change.

Charts

Time-series line charts for temperature and humidity. Built with Recharts. Zoom, pan, and hover tooltips supported. Automatic axis scaling based on filtered data range.

Entity tables

Sortable, paginated tables showing all readings for selected entity. Timestamps, raw state values, and data quality flags visible. Invalid (non-numeric) readings highlighted.

CSV export

Download filtered data as CSV. Includes all columns from the snapshot. Useful for sharing findings or external analysis.

Tech Stack

A modern, minimal stack focused on Next.js and React, with lightweight dependencies for charting, parsing, and UI.

Frontend

  • React 19
  • Next.js 16 (App Router, static export)
  • TypeScript 5
  • Tailwind CSS 4
  • Recharts 3.9 (charting)
  • Lucide React 1.23 (icons)

Backend

  • Next.js API routes
  • PapaParse 5 (CSV parsing)
  • Vercel Blob 2.5 (snapshot storage)
  • Sessions via HTTP-only cookies

Development & Testing

  • ESLint 9 (code quality)
  • Vitest 4.1 (unit tests)
  • Testing Library (component testing)
  • Coverage reporting via Vitest UI

Constraints & Assumptions

These design constraints keep the dashboard simple and secure. They reflect the learning-project scope and Home Assistant export format.

CSV format fixed

Expects exactly entity_id, state, last_changed columns. State must be numeric (temperature/humidity value) or marked invalid. Non-numeric values are logged but discarded.

No user management

Single shared password for all users. No user accounts, roles, or audit logs. All authenticated users see the same data.

No data history

Blob storage holds only the latest snapshot. Previous uploads are overwritten. No versioning or rollback. For multiple datasets, users must export and store locally.

Client-side filtering only

All filtering happens in the browser. Dashboard loads the entire snapshot, then filters in memory. Not suitable for massive datasets (>100k readings).

Static export on Vercel

Dashboard is a static export, but API routes still run on Vercel serverless functions. Upload and auth endpoints are stateless and cold-start tolerant.

No raw CSV backup

Raw CSV files are processed and discarded by default. Only the boiled-down JSON snapshot is kept. Users must retain originals for audit or re-processing.

Verification

The project uses standard Next.js and Vitest tooling to catch regressions and ensure quality. All checks pass before deployment.

Available commands

npm run dev          # Local dev server
npm run build        # Next.js static build
npm run lint         # ESLint
npm run test         # Vitest (all tests)
npm run coverage     # Coverage report

Test focus

  • Auth routes (login, logout, session validation)
  • CSV parsing and deduplication
  • API endpoint contracts and error responses
  • Vercel Blob read/write
  • Component rendering and filtering logic
  • Data quality (invalid readings excluded)

Build verification: npm run build must succeed before pushing to Vercel. The build generates a static export with API routes pre-compiled. Local API routes can be tested with npm run dev before deploy.

Next Work

The dashboard is a functional Phase 1 learning project. Future work is optional based on use case and learning goals.

  1. Data persistence: Implement version history or timestamped snapshots in Blob to allow comparing past uploads.
  2. Entity aliasing: Allow renaming entities for display (e.g., "living_room_temp" → "Living Room").
  3. Advanced analytics: Trend detection, anomaly flagging, or predictive models for comfort prediction.
  4. Multi-home support: Store and switch between multiple Home Assistant datasets (requires user identity or multi-password scheme).
  5. Scheduled jobs: Automatic CSV pulls from Home Assistant API instead of manual upload (requires longer-running backend like Google Cloud Run).