Tally

Click counters for anything worth counting — how many times you wore those pants, cups of coffee, whatever. Backed by Postgres (Neon) so your counts sync across devices, and installable as a PWA.

Features

• Boards — the home page lists your boards; create as many as you want, each with its own isolated set of tallies at /<board-slug>. Boards can be renamed, deleted, or dragged to reorder.
• Tallies — two types, picked when you create one:
  • Counter — click to count by a configurable step, edit name/color/step anytime, delete, or drag to reorder within a board.
  • Calendar — a month grid instead of a click counter; click a day to mark it, click again to unmark. The count is just how many days are marked, and a tally's type is fixed once created.
    • Navigate to any month or year with no limit on how far back; days from the adjacent month shown at the edges of the grid are clickable too, not just the current month's.
    • The grid-icon toggle switches to a full year heatmap (GitHub contribution-graph style, scrolls horizontally) as an alternative to the month view — marking and note-editing work the same in both.
    • "Note mode" (the pencil icon) makes tapping a day open a note editor instead of toggling its mark. Notes work independently of marking, so a day can have one without the other, and unmarking a day never loses its note.
    • A 🔥 badge shows the current streak of consecutive marked days (today gets a grace period — the streak only breaks once a day is actually skipped).
• Auto-tally — counters only: mark one to auto-add its step once per day on its own. Since there's no always-on server, this catches up lazily: opening the app (or hitting the API) backfills however many days were missed, and pausing/resuming it doesn't lose progress or backfill the paused gap.
• CSV export — download a board's tallies from its export button (calendar tallies include their marked dates and notes).
• PWA — installable to your home screen/dock, with a service worker for offline fallback and cached static assets.
• Light/dark theme, following system preference or manually toggled.

Local setup

1. Install dependencies:

   npm install
   

2. Create a Postgres database. On Vercel: Storage → Create Database → Postgres (this provisions a Neon database and can inject DATABASE_URL into your project's env vars automatically).

3. Copy .env.example to .env.local and fill in DATABASE_URL with your connection string (or run vercel env pull .env.local if the project is already linked to Vercel).

4. Create the schema (tables, columns, and indexes — safe to re-run any time, including after pulling schema changes):

   npm run db:migrate
   

5. Run the dev server:

   npm run dev
   

   Open http://localhost:3000.

Deploying to Vercel

This repo is deployed by pushing to GitHub and letting Vercel's GitHub integration build and deploy automatically — no vercel CLI needed:

1. In the Vercel dashboard: New Project → Import this GitHub repo.
2. Add DATABASE_URL under Settings → Environment Variables (Production, and Preview/Development if you want those to hit the same or a separate database).
3. Run npm run db:migrate once against that database — locally with DATABASE_URL in .env.local pointed at it, since the migration script isn't run automatically as part of the build.
4. Push to main; Vercel redeploys on every push.

After changing db/schema.sql, re-run npm run db:migrate against production before or after the deploy — it's idempotent, so re-running it is always safe.

Stack

• Next.js 16 (App Router) + TypeScript
• Tailwind CSS v4
• Postgres (Neon in production) via pg
• Framer Motion for animations and drag-to-reorder