📅 Productivity Tracker

Overview

A personal analytics dashboard and browser extension combo that unobtrusively captures how you spend time online—by tracking active browser tabs, manually tagged time blocks, and “focus mode” sessions—then visualizes trends, flags unproductive patterns, and recommends tailored focus intervals.

Primary Use Cases

• Knowledge workers seeking to understand where their hours go (email, research, meetings, coding, social media)
• Freelancers billing clients accurately by categorizing time spent on projects
• Individuals wanting to build better habits via data-driven insights and Pomodoro-style focus bursts

Key Features

1. Browser Extension
   • Monitors active tab titles and domain URLs
   • Logs start/end timestamps for each “focus session”
   • Lightweight, privacy-first (stores minimal metadata)
2. Manual Tagging & Notes
   • Quick pop-up to label current activity (e.g. “Project Alpha,” “Emails,” “Design Review”)
   • Optional short note for context
3. Focus Mode
   • Built-in Pomodoro timer (25 min work + 5 min break)
   • Distraction blocker: optional auto-mute or site-block during sessions
4. Dashboard & Reports
   • Daily/weekly/monthly time-use charts (bar, pie, line)
   • Heatmap calendar showing “most productive” days/times
   • Top N categories by total time and average session length
   • Alerts for long unbroken screen time or excessive “distractor” usage
5. Data Export & API
   • CSV/JSON export of raw logs
   • REST API for integration with other productivity tools

Tech Stack

• Browser Extension:
  • JavaScript (Manifest V3) capturing tabs.onActivated and tabs.onUpdated events
  • Local storage of minimal session metadata
• Backend Services:
  • Go microservice (/log_time) receiving and persisting events (tab changes, session starts/ends)
  • FastAPI (/get_report, /tag_entry, /start_focus, /stop_focus) for querying analytics and managing focus mode
• Database:
  • PostgreSQL (time_entries table, categories table, user settings)
• Frontend Dashboard:
  • React + TypeScript + Tailwind for interactive charts
  • Recharts or Chart.js for data visualization

High-Level Architecture