study-tracker

⏱️ StudiesTimer • Aesthetic Study Tracker & Productivity Suite

A sleek, minimalist Pomodoro timer, weekly habit builder, task planner, and productivity analytics dashboard built with Next.js 16, TypeScript, and Dexie.js (IndexedDB).

✨ Features

🍅 Expansive Sleek Hero Timer & Zen View

Hero Screen Display: A minimal ~90vh timer with geometric typography, slender SVG progress ring, and ambient breathing halo.
Zen View: One-click distraction-free fullscreen mode (press F or click Zen View).
Flexible Modes: Switch seamlessly between Pomodoro (Focus, Short Break, Long Break) and an open Stopwatch timer.
Preset Durations: 15m, 25m, 30m, 45m, and 60m focus blocks with optional auto-start breaks.

⚡ 1-Click Instant “Stop & Record”

Study for whatever time you have (even 10 minutes) and click “■ Stop & Record”.
Automatically saves your study time tagged directly to your selected subject into IndexedDB — no confirmation prompts or repetitive inputs required.
Subject Persistence: Once you pick a subject, it stays saved across reloads. When the timer starts, the dropdown switches to a clean ● [Subject] active label.

💾 Dexie.js IndexedDB Persistence & Privacy

Local Data Ownership: All study sessions, tasks, habits, and subjects are indexed client-side using Dexie.js.
Zero Cloud Tracking: Works 100% offline with zero latency and zero external analytics tracking.
Dual-Layer Synchronization: Instant UI rendering combined with persistent background IndexedDB transactions.

📊 Productivity Analytics & Visualization

Overview Stat Cards: Total study hours, daily average focus minutes, peak productivity hour (e.g. 14:00 - 15:00), and daily study streak 🔥.
Interactive 7-Day Bar Chart: SVG daily study hour visualization with floating hover tooltips.
Subject Distribution: Percentage share breakdown and duration bars across subjects.
GitHub-Style Contribution Heatmap: 30-day, 60-day, or annual study activity grid with custom intensity coloring.

🎯 Task Planning & Weekly Habits Tracker

Task Milestones: Create study tasks with estimated vs. actual Pomodoro tracking (🍅). Link any task to the active timer with one click.
Weekly Habit Builder: Inspired by StudiesTimer, monitor Monday–Sunday daily routines, track completion percentages, and build consistency streaks.

🗄️ Backup & Restore

Markdown Export (.md): Export your entire focus log into formatted markdown tables.
SQL Dump Export (.sql): Generate raw SQLite DDL and INSERT statements.
Dropzone Import: Restore or merge logs from previously exported files anytime.

⌨️ Keyboard Shortcuts

Shortcut	Action
`Space`	Start / Pause Timer
`F`	Toggle Zen Fullscreen Mode
`Esc`	Exit Zen Mode / Close Modals

🚀 Getting Started

Prerequisites

Node.js 18.18+ or 20+
npm or yarn

Installation

Clone the repository:

git clone https://github.com/ashishcas/study-tracker.git
cd study-tracker

Install dependencies:
```
npm install
```
Run the development server:
```
npm run dev
```
Open http://localhost:3000 in your browser.

🛠️ Tech Stack

Framework: Next.js 16 (App Router, Turbopack)
Language: TypeScript
Database: Dexie.js v4 (IndexedDB Wrapper)
Styling: Vanilla CSS (Custom tokens, glassmorphism, responsive animations)
Audio: Web Audio API synthesized focus chimes (no external audio assets required)
CI/CD: GitHub Actions deploying static export to GitHub Pages

🌐 Custom Domain Deployment

This project is deployed to GitHub Pages and custom domains using static HTML export:

Build Static Bundle:
```
npm run build
```
The static output is generated in /out.
Automated deployment is handled by .github/workflows/deploy.yml on push to main.