Chroma Flow

Chroma Flow is a continuous, distraction-free time tracking application designed with an immersive living canvas. It helps you manage your deep work sessions, track your actual flow against your planned schedule, and gain insights into your productivity patterns.

🚀 Key Features

1. Immersive Active Tracking

• Living Canvas: A beautiful, color-coordinated background that pulses and shifts based on your current activity.
• Micro-Timer: A non-intrusive elapsed time indicator that keeps you aware without being a distraction.
• Quick Switch: Instant activity switching to ensure your timeline remains a continuous stream of your day.

2. Planned vs. Actual Flow

• Dual Timeline: Compare your planned tasks against your actual history side-by-side.
• Interactive Calendar: Move, resize, and edit both planned and actual entries directly on the timeline.
• Weekly Overview: A bird's-eye view of your entire week to spot trends and plan ahead.

3. Smart Session Notes

• Timestamped Jotting: Add notes during an active session that are automatically pinned to the exact moment they were written.
• Timeline Indicators: View notes directly on the calendar timeline as dashed lines with hoverable document icons.
• Persistent Linkage: Notes stay attached to their respective tasks and entries, even if the task is renamed.

4. Advanced Task Management

• Recurring Tasks: Support for Daily, Weekdays, Weekly, Monthly, and Yearly patterns.
• Multi-Timezone Support: View your schedule in your local time or the original timezone where work was planned.
• Task Naming: Categorize sessions with both broad activity types (Deep Work, Meeting, etc.) and specific task names.

5. Deep Analytics

• Focus Hours: Track your total time spent on productivity and flow-state through beautiful charts.
• Activity Distribution: Visualize how your time is divided across different spheres of life.
• Comparison Metrics: See exactly how much of your planned schedule you actually followed.

🛠 Tech Stack

• Frontend: React 19, TypeScript, Vite
• Styling: Tailwind CSS 4
• Animations: Framer Motion (motion)
• Database/Auth: Firebase (Firestore & Google Authentication)
• Icons: Lucide React
• Data Viz: Recharts

🏁 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository (or export from AI Studio).
2. Install dependencies:

   npm install

Configuration

Create a .env file in the root directory and add your Firebase configuration (if setting up your own project):

VITE_FIREBASE_API_KEY=your_key
VITE_FIREBASE_AUTH_DOMAIN=your_domain
VITE_FIREBASE_PROJECT_ID=your_id
VITE_FIREBASE_STORAGE_BUCKET=your_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id

Running the App

npm run dev

The application will be available at http://localhost:3000.

🛡 Security & Privacy

• Guest Mode: All data is stored locally in your browser via localStorage if you choose not to sign in.
• Cloud Sync: Securely sync your data across devices using Google Authentication and encrypted Firestore storage.

---

Built with ❤️ for deep thinkers and flow seekers.