Hendle

Hendle is a clean, responsive habit and goal tracker for daily consistency work. The app helps you plan today's habits, record numeric progress, review weekly and monthly completion, and break long-term goals into measurable milestones.

Live demo: https://whoisclownhere.github.io/Habit-Tracker/

What It Does

• Tracks daily habits with completion status and optional numeric values.
• Shows today's open and completed habits in separate, searchable lists.
• Calculates current streaks and daily completion progress.
• Provides weekly and monthly summaries with completion rate and perfect days.
• Lets you inspect any past day in a read-only daily review.
• Projects future progress based on habit targets.
• Draws a progress chart for each habit with Chart.js.
• Adds a standalone Planner for daily schedule blocks, goal-linked work sessions, and custom activities.
• Supports recurring planner rules that generate virtual weekday blocks until completed, skipped, or moved.
• Supports long-term goals from point A to point B.
• Splits goals into milestones with evidence, metric values, deadlines, and completion status.
• Shows lightweight goal execution history from linked planner blocks.
• Saves user data in Firebase Firestore after email/password or Google sign-in.
• Supports English as the primary language plus Russian, German, Spanish, and French.
• Includes a local QA account with seed data for repeatable manual testing.
• Supports light and dark themes.

Tech Stack

• HTML, CSS, and vanilla JavaScript
• Firebase Authentication with Email/Password and Google providers
• Firebase Firestore for per-user cloud storage
• Chart.js for progress visualization
• Vite scripts for local development and production builds
• GitHub Pages for static hosting

The current app is intentionally lightweight and does not require a frontend framework at runtime. package.json contains Vite-based scripts for local development and future migration work.

Project Structure

.
├── index.html
├── package.json
├── README.md
├── docs
│   ├── ARCHITECTURE.md
│   ├── DESIGN_SYSTEM.md
│   └── TESTING.md
├── scripts
│   └── qa-check.mjs
└── src
    ├── app
    │   ├── config
    │   │   └── firebaseConfig.js
    │   ├── utils
    │   │   ├── dates.js
    │   │   └── html.js
    │   ├── i18n.js
    │   └── main.js
    └── styles
        └── main.css

Getting Started

Prerequisites

• Node.js 18 or newer
• npm
• A Firebase project with Authentication and Firestore enabled

Install Dependencies

npm install

Run Locally

npm run dev

Vite will print a local URL, usually:

http://localhost:5173/

Build for Production

npm run build

Preview Production Build

npm run preview

Firebase Setup

The app expects Firebase configuration in:

src/app/config/firebaseConfig.js

The exported object is used by src/app/main.js to initialize Firebase Auth and Firestore.

Required Firebase services:

• Authentication: enable Email/Password and Google as sign-in providers.
• Firestore Database: create a database for user data.
• Authorized domains: add the local development domain and the production GitHub Pages domain in Firebase Authentication settings.

User data is stored at:

users/{uid}/habitData/main

The document contains:

{
  data: {
    habits: [],
    records: {},
    goals: [],
    plannerBlocks: [],
    recurringRules: []
  },
  updatedAt,
  ownerUid,
  ownerEmail
}

Firestore Rules Example

Use rules that restrict each document to its authenticated owner. Adapt this example to your Firebase project before production use:

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId}/habitData/{documentId} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
  }
}

Main Screens

Habits

The habits view is focused on daily execution:

• today's tasks
• completed-today modal
• habit creation and inline editing
• streak status
• week and month summaries
• day review
• progress chart

Goals

The goals view is for longer routes:

• goal type
• current point A
• desired point B
• optional numeric metric
• milestone list
• milestone deadlines
• active, urgent, and completed goal state

Planner

The planner view is the daily execution layer:

• date-by-date vertical schedule
• standalone custom, interest, admin, rest, study, deep work, workout, and habit-style blocks
• goal-linked blocks that can optionally point at an existing goal task
• status actions for done, skipped, and moved blocks
• recurring weekday rules that create virtual blocks until acted on
• goal cards can start a linked work session and show recent execution

Testing

Use the local-only QA account for repeatable checks without touching Firebase. On a local development host, open the app with ?qa=1, then click Use test account in the sign-in modal. The QA panel includes seed-data reset controls and scenario prompts. See docs/TESTING.md.

Data Model

Habit records are grouped by date key:

records: {
  "2026-04-30": {
    "habit-id": {
      done: true,
      value: "20",
      habitName: "Reading",
      habitUnit: "pages",
      habitTarget: 20
    }
  }
}

Goals contain their own milestone list:

{
  id: "goal-id",
  name: "Write a research paper",
  type: "project",
  pointA: "Outline exists",
  pointB: "Submitted paper",
  metricName: "Pages",
  unit: "pages",
  currentMetric: 3,
  targetMetric: 30,
  milestones: []
}

Planner blocks and recurring rules are stored next to habits, records, and goals:

{
  plannerBlocks: [
    {
      id: "block-id",
      date: "2026-05-09",
      startTime: "10:00",
      endTime: "12:00",
      title: "Deep Work",
      type: "deepWork",
      linkedGoalId: null,
      linkedMilestoneId: null,
      linkedHabitId: null,
      status: "planned",
      definitionOfDone: "",
      notes: "",
      createdAt: 1778328000000,
      updatedAt: 1778328000000
    }
  ],
  recurringRules: []
}

Development Notes

• src/app/main.js currently contains app startup, state management, rendering, event handling, Firebase calls, streak calculations, and chart rendering.
• src/app/i18n.js is the single source of truth for UI copy in English, Russian, German, Spanish, and French.
• src/app/utils/dates.js contains reusable date helpers for local date keys, weeks, months, and ranges.
• src/app/utils/html.js contains escaping helpers for safe HTML string rendering.
• docs/ARCHITECTURE.md describes the current architecture and likely refactor targets.
• docs/DESIGN_SYSTEM.md captures the visual language, design tokens, spacing, typography, layout rules, and templates for future UI.

Roadmap Ideas

• Split main.js into smaller modules for state, rendering, charts, goals, and Firebase persistence.
• Move Firebase config to an environment-based setup for safer deployment workflows.
• Add tests for streak, projection, and progress calculations.
• Add import/export for local backups.
• Keep every new UI string in src/app/i18n.js and wire static DOM through data-i18n attributes or dynamic DOM through t() / tn().
• Decide whether to keep the app vanilla or migrate fully to a framework-based Vite app.

License

No license has been added yet. Add one before distributing or accepting external contributions.