MyBlocks — Habit Atlas

Local-first habit tracker with lush heatmaps, focus mode, and analytical charts. Everything runs entirely in the browser using local storage, so you can log habits offline without an account.

Features

• Dark, high-contrast UI with per-category heatmaps inspired by contribution charts.
• Focus Mode highlights what is due today and what remains this week, with one-tap logging.
• Smart suggestions gently nudge you when you fall behind or consistently miss specific weekdays.
• Rich add/edit modal covers categories, custom colors, weekday selections, per-period goals, and every-N-days frequencies.
• Per-habit heatmaps can switch between yearly, current-month, and daily strips, with global controls for daily range and block size.
• Charts tab shows weekly compliance trends, day-of-week success rates, and category contribution shares.
• Local persistence via Zustand + localStorage, seeded with sample data for instant visual feedback.

Getting Started

Requirements: Node.js 18+ and npm (or pnpm/yarn).

# install dependencies
npm install

# start the Next.js dev server
npm run dev

# visit http://localhost:3000 in your browser

If you prefer pnpm or yarn, swap the commands accordingly (pnpm install, pnpm dev, etc.).

Data & Backups

• Everything you log lives in your browser via localStorage (Zustand persistence), so it works offline but won’t sync across devices.
• Use Save JSON to download a backup of your categories, habits, and entries anytime.
• Use Import JSON to restore that same file later (same schema as the export). Importing will replace your current data set, so keep copies before experimenting.
• Archived habits (and their history) are included automatically, so you can park them without dropping stats.

Habit management

• Hit Manage habits on the heatmap tab to rename habits, tweak their frequency, move them between categories, archive, or delete them.
• Archiving keeps the habit (and entries) around for analytics/export but hides it from the live heatmaps.

Project Structure

• app/ – Next.js app router pages (/heatmap, /charts).
• components/ – UI building blocks (focus panel, heatmaps, charts, modals, navigation).
• lib/ – Types, date helpers, schedule/compliance logic, suggestion engine, and Zustand store.
• data/seed.ts – Sample categories, habits, and entries for the initial experience.

Customization

• Adjust the dark theme palette in tailwind.config.ts or app/globals.css.
• Extend schedules or analytics by editing lib/schedule.ts and lib/stats.ts.
• Replace the seed data or wire up Dexie/IndexedDB if you want more sophisticated local persistence.
• Tweak heatmap defaults in the settings panel (daily range, block size) or change persistence defaults in lib/settings-store.ts.

Scripts

• npm run dev – development server with hot reload.
• npm run build – production build.
• npm run start – run the production build.
• npm run lint – Next.js lint checks.

License

This project is licensed under the Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0). You can use and modify it for personal, non‑commercial purposes with attribution. Commercial use requires a separate license.

See LICENSE for details.