FocusFlow

AI-powered productivity platform. Decompose goals, focus deep, track progress.

Live app

---

✨ What is FocusFlow?

FocusFlow bridges the gap between simple to-do lists and complex project management. The core innovation is AI Task Decomposition — paste a vague goal like "Launch a Shopify Store" and the AI breaks it into actionable, bite-sized subtasks.

Combined with a built-in Pomodoro focus timer, drag-and-drop task organization, and Supabase-backed accounts, FocusFlow transforms chaotic mental load into structured, executable flow.

🎯 Features

Feature	Description
🔐 Accounts	Email/password auth via Supabase, with row-level security isolating each user's data
💾 Durable saving	Tasks and sessions are queued locally and retried until Supabase confirms them, so nothing is lost offline
🧠 AI Task Breakdown	OpenAI-powered decomposition of complex projects into manageable steps
⏱️ Focus Timer	Pomodoro timer with presets, custom durations, and break tracking
📋 Drag & Drop Tasks	Reactive fluid UI with DND Kit for effortless prioritization
📊 Analytics	Recharts-powered dashboards — weekly sessions, priority breakdowns
📅 Calendar	Monthly calendar with task indicators and daily task view
👥 Circles	Shared task lists for a study group, friends, or a team — join with a 6-character invite code, or ask to join if the owner wants to approve people first
🔥 Shared streaks	See everyone in a circle's last 7 days, today's finished tasks, and focus time — without exposing anyone's task text
🏷️ Usernames	A unique public @handle per account, assigned at sign-up and renameable any time
🪪 Shareable profiles	A profile card at /u/yourname with a bio, a real uploaded photo (or an emoji), and four switches deciding which numbers appear on it
🔑 Google sign-in	Sign up or log in with Google — name and photo seeded automatically
🎨 Premium UI	Calm, glass-morphism design system with light/dark themes and 5 accent colors

🚀 Quick Start

# Clone
git clone https://github.com/ibrahembuilds/focusflow.git
cd focusflow

# Install
npm install

# Configure environment (see .env.example)
cp .env.example .env

# Develop
npm run dev

# Build
npm run build

🔑 Environment setup

FocusFlow needs two services configured — see .env.example for the full list:

1. Supabase — create a project, then in the SQL editor run supabase/schema.sql then the migrations in supabase/migrations/ in order — 002 adds usernames, circles, and shared streaks; 003 adds shareable profiles; 004 adds real avatar photos and the ask-to-join circle setting. Set VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY. Every file is idempotent, so re-running them on an existing project is safe.
2. Google sign-in (optional) — in the Supabase dashboard under Authentication → Providers, enable Google and paste in a Client ID and Secret from a Google Cloud OAuth consent screen. Supabase's own guide covers the Google Cloud side step by step: https://supabase.com/docs/guides/auth/social-login/auth-google. Until this is turned on, the "Continue with Google" button will show Supabase's "provider is not enabled" error — everything else in the app works without it.
3. OpenAI — used by the AI task breakdown feature. The app deploys to Netlify; set OPENAI_API_KEY (and optionally OPENAI_MODEL) as environment variables in Netlify's site settings — they're read server-side by the edge function at netlify/edge-functions/decompose.ts, never exposed to the browser.

🏗️ Architecture

src/
├── components/
│   ├── auth/                # Login, Signup, ProtectedRoute, AuthLayout
│   ├── Landing.tsx           # Public marketing page
│   ├── Timer.tsx              # Pomodoro with SVG ring
│   ├── TaskList.tsx           # DND Kit drag-and-drop
│   ├── AIDecompose.tsx        # OpenAI API integration
│   ├── Dashboard.tsx          # Stats + weekly charts
│   ├── CalendarView.tsx       # Monthly calendar
│   ├── Analytics.tsx          # Recharts charts
│   ├── Circles.tsx            # Create/join shared circles
│   ├── CircleDetail.tsx       # Shared list + streak board
│   ├── Profile.tsx            # Edit your card and what it shares
│   ├── PublicProfile.tsx      # /u/<username> — the link you send
│   ├── ProfileCard.tsx        # The card itself, preview and public
│   ├── Sidebar.tsx            # Navigation + account menu
│   ├── Settings.tsx           # Config + data management
│   └── Seo.tsx                # Per-route meta tags
├── lib/
│   ├── auth.tsx               # Supabase Auth context, incl. Google OAuth
│   ├── supabase.ts            # Supabase client
│   ├── sync.ts                # Task/session sync with Supabase (offline-safe write queue)
│   ├── profile.ts             # Usernames, profiles, avatar uploads, sharing rules
│   ├── circles.ts             # Circles, shared tasks, shared streaks, join requests
│   └── api.ts                 # AI decompose API client
├── store.ts                   # Zustand state management
└── index.css                  # Full design system

e2e/                           # Playwright suite + a stand-in Supabase backend
supabase/
├── schema.sql                 # Base tables and policies
├── migrations/                # Incremental SQL to run on an existing project
└── tests/                     # SQL checks for the policies and functions

🧪 Tests

npm run e2e          # Playwright: builds the app and drives it in a real browser
npm run e2e:ui       # the same suite, interactively

The suite starts two servers itself: e2e/fake-supabase.mjs (a stand-in for the Supabase auth, PostgREST, Storage, and OAuth-redirect APIs, backed by in-memory objects) and a preview of the production build pointed at it. Everything above the network boundary is the code that ships — routing, the store, the offline write queue, and the visibility rules. The Google sign-in tests exercise the app's OAuth plumbing this way — the redirect, the session parsed back out of the URL, the account landing signed in — not Google's own consent screen, which nothing outside Google can test.

The first run needs a browser: npx playwright install chromium. If your environment already ships one, point at it with PLAYWRIGHT_CHROMIUM_PATH instead.

Both servers are started fresh every run rather than reused, so the suite always tests the bundle currently on disk. If a run reports that a port is in use, an earlier vite preview or node e2e/fake-supabase.mjs is still alive — stop it and run again.

The database rules themselves are checked separately — see supabase/tests/README.md.

📦 Tech Stack

• React 19 + TypeScript + Vite 8
• React Router 7 — routing and protected routes
• Supabase — auth and Postgres-backed data storage
• Zustand — state management
• DND Kit — drag and drop
• Recharts — data visualization
• Lucide React — icons
• OpenAI API — AI task decomposition

📄 License

MIT © Ibrahem Ahmed