Skip to main content

Floya

Deployed productivity platform with Stripe subscriptions and browser-level focus enforcement via a Chrome Extension.

Overview

I built Floya when I realized how much my productivity depended on entering and staying in a flow state.

Most tools help you plan work, but the real challenge is maintaining focus once you start. Floya is designed around that idea: a dedicated focus environment paired with browser-level enforcement so the constraints actually hold when you're deep in a session.

The core experience is a flow builder where you sequence tasks and breaks with custom durations, then step through them one at a time in a fullscreen timer mode. The timer uses color-coded themes, blue for work and green for breaks, and tracks your progress with an XP system that rewards streaks and achievements.

floya

The Floya web app provides a structured flow builder and a fullscreen focus timer designed for deep work.

The web app is built with Next.js 15, React 19, and TypeScript. State management uses Zustand for client-side flows, and Framer Motion handles UI animations. The backend runs on Supabase, which handles authentication with OAuth providers, stores user data and flow history in PostgreSQL, and manages file storage. Stripe powers subscriptions for premium features like AI task generation via Together AI, saved flows, and advanced analytics. Rate limiting uses Redis with Vercel KV in production to protect API routes and server actions.

The Chrome Extension is built with Manifest V3 and uses declarative net request rules to block distracting sites during active focus sessions. The extension syncs with the web app through shared storage, so when you start a flow session, it automatically activates site blocking across all tabs.

floya extension

The Chrome Extension enforces focus by blocking distracting sites during active sessions.

The system is deployed on Vercel with edge-optimized configurations, automatic image optimization, and security headers. It supports server-side rendering for initial page loads and client-side interactivity for the timer experience, with service workers enabling offline capabilities and PWA installation.

Key Languages, Platforms, and Frameworks Used

TypeScript

JavaScript

SQL

Tailwind CSS

Next.js

Node.js

Supabase

Redis

React

Framer

Lucide React

Stripe

Together AI

Zod

Chrome Extension API