Clarity — Personal Planning Command Center

Background & Goals

Productivity and personal planning often suffer from tool fragmentation. Clarity was developed to consolidate task management, time tracking, habit building, and long-term goal setting into a single, unified Chrome extension accessible instantly from any browser tab.

Key Features & User Flows

• Dashboard: Centralized overview showcasing daily top priorities, habit progress, time logs, and productivity stats.
• Planner & Timeboard: Interactive calendar and daily schedule supporting fixed events, custom time blocks, and holiday integration.
• Time Tracker: Real-time timer and log visualization to monitor exact time spent across projects and tasks.
• Habit & Ritual Engine: Gamified habit tracking system with reward mechanisms and ritual routines.
• Vision Board: High-level goal tracking and vision setting to keep daily execution aligned with long-term aspirations.
• Quick Capture Overlay: Global keyboard shortcut (Ctrl+Shift+Space / Cmd+Shift+Space) for logging ideas and tasks without leaving the active webpage.

Architecture & Design Decisions

• Vanilla Web Technologies: Built using pure JavaScript (ES Modules), HTML5, and modular Vanilla CSS using modern CSS variables for a lightweight footprint without relying on heavy bundlers or build steps.
• WebExtension Manifest V3: Utilizes Manifest V3 background service workers, Chrome Alarms, Notifications, and chrome.storage APIs for optimal performance, privacy, and memory management.
• Cloud Data Sync: Configured with Firebase & Firestore APIs for seamless cross-device synchronization and storage persistence.

Key Challenges Solved

Architecting modular services (fixedEventsService, habitEngine, rewardService, timeboard) in raw ES6 JavaScript while ensuring reactive UI updates and multi-tab state sync across extension pages and popups without a heavy framework like React.