Skip to content

anderboski/SECCEWLMMS-analytics

Repository files navigation

SECCEWLMMS

A small React web app for visualizing a personal daily-habit scoring system tracked in a Google Sheet.

SECCEWLMMS is an acronym for the ten things scored each day — Sleep, Eat, Clean, Curtail (internet), Exercise, Work, Laugh, Meditate, Music, Socialize. Each gets a 0–10 score with a weight, producing a single weighted daily percentage. The sheet also records which sports/exercises were done that day.

Goal

Turn a habit-tracking spreadsheet into a browsable dashboard:

  • See every day's raw scores in a sortable / filterable table.
  • Watch trends over time (day / week / month / year) for the overall score and any individual metric.
  • See which sports you do most, sliceable by date range and weekday.

The Google Sheet stays the single source of truth — the app only reads from it.

Features

  • /rawdata — the full SCORES table. Click any header to sort; filter the text columns (date, weekday, sports, comment).
  • /analytics
    • Score timegraph — a thick black line for the overall score (plotted on a 0–10 scale), with optional dotted colored lines per metric. Switch the x-axis between day/week/month/year, filter by date range and weekday/weekend.
    • Sport barchart — one bar per sport, ordered most→least frequent. Filter by date range and toggle specific weekdays (e.g. "all Mondays and Tuesdays in a range").
  • /definitions — the list of sport categories plus the ten scoring metrics and their weights.
  • Pastel / retro styling; current page highlighted in blue.

Screenshots

Raw data

Raw data table

Score timegraph

Score timegraph

Sport barchart

Sport barchart

Definitions

Definitions

How it works

Browser (React + Vite)  →  GET /api/scores , /api/selector  →  Local Node API (Vite middleware)
                                                                  │ Sheets API v4 + service account (JWT, read-only)
                                                                  ▼
                                                        Google Sheet (PRIVATE)

Google service accounts authenticate by signing a JWT with a private key. That must happen server-side, so a tiny Vite middleware plugin (vite.config.js + server/sheets.mjs) does the auth and proxies read-only sheet data to the frontend. The private key never reaches the browser, and the sheet can stay fully private (shared only with the service account). The auth is dependency-free — it uses Node's built-in crypto and fetch.

Reuse it with your own sheet

1. Set up the sheet

Create a Google Sheet with two tabs:

  • SCORES — columns in this order: Date, Wkd (weekday abbreviation like Mon), then the 10 metric scores, then % (weighted total like 82.14%), then X1, X2, X3 (sports done that day), and an optional Comment. See example.txt and explanation.txt.
  • Selector — a single column with header VALUES listing the valid sport names. See selector_eaxmples.txt.

If your layout differs, adjust the column mapping in src/lib/transform.js and the metric list in src/lib/metrics.js.

2. Create a service account

  1. In the Google Cloud Console, create (or pick) a project.
  2. Enable the Google Sheets API.
  3. Create a service account, then create a JSON key for it and download it.
  4. Save that file as useraccount.json in the project root. (It is git-ignored — see useraccount.example.json for its shape.)
  5. Share your Google Sheet with the service account's email (the client_email field in the JSON) as a Viewer. The sheet does not need to be public.

3. Configure environment

cp .env.example .env
# edit .env and set SHEET_URL to your sheet's URL

4. Run

npm install
npm run dev

Open http://localhost:5173. Vite serves the app and the /api/* endpoints together — one process, no separate backend to run.

Project structure

server/sheets.mjs        # zero-dep service-account auth + Sheets read helper
vite.config.js           # Vite config + local /api middleware plugin
src/
  App.jsx                # routes + data loading
  lib/
    useData.js           # fetches + parses both tabs
    transform.js         # parsing, filtering, time-bucketing, sport counts
    metrics.js           # metric definitions, weights, colors
  pages/                 # RawData, Analytics, Definitions
  charts/                # ScoreTimeGraph, SportBarChart
  components/            # Nav, FilterControls

Tech stack

React, Vite, React Router, Recharts, date-fns. Node 18+ recommended (uses global fetch).

Privacy & security

  • useraccount.json (your private key) and .env (your sheet URL) are git-ignored — never commit them.
  • The sample data in example.txt, explanation.txt, and selector_eaxmples.txt is illustrative; replace it with your own or remove it.
  • The app is read-only and intended to run locally.

License

MIT — do whatever you like.

About

Life habit tracking. Trying to improve my lifestyle day by day, as well as tracking sports. Raw data and analytics.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors