[ShowOff Saturday] Introducing FlouState – a VS Code extension that visualizes exactly where your coding hours are spent, beyond just the duration

Introducing FlouState: Visualize How You Truly Spend Your Coding Time

Are you curious about not just how long you code, but what you’re actually doing during those hours? Meet FlouState, a cutting-edge Visual Studio Code extension designed to reveal the exact nature of your development sessions—highlighting when you’re creating, refactoring, debugging, or exploring.

Explore FlouState here: floustate.com
Get the extension for VS Code: Marketplace Link

Understanding the Purpose of FlouState

Traditional time tracking tools can tell you how long you’ve been coding, but they fall short in explaining what you were doing. Were you deploying new features, fixing bugs, or just exploring a unfamiliar codebase? Accurate insights into your activities can foster better productivity and self-awareness.

FlouState addresses this gap by automatically classifying your coding activities in real-time, providing a nuanced view of your work sessions. Think of it as a blend between time-tracking and intelligent activity detection—no manual input required.

The Challenge Solved

While the concept sounds simple, implementing it was no small feat. Replacing manual or simplistic timers with an intelligent system capable of discerning activity types demanded innovative solutions. The initial version relied on user-input timers; however, feedback revealed the need for true automation. This prompted a complete overhaul within just 48 hours, emphasizing the importance of validating assumptions early in product development.

Technical Foundations

FlouState is built with modern technologies to ensure a smooth and secure experience:

Frontend: Next.js 14, TypeScript, Tailwind CSS
Backend & Data Storage: Supabase (for authentication, real-time updates, and database management)
VS Code Extension: Developed using TypeScript and the VS Code Extension API
Payments & Subscriptions: Stripe integration
Data Privacy: Designed with privacy first—in-scope data remains on your machine, ensuring confidentiality

What Sets FlouState Apart?

Unlike traditional tracking tools, FlouState employs a sophisticated combination of methods to interpret your coding behavior:

Analyzing file change patterns
Detecting debug sessions
Applying language-specific heuristics
Monitoring real-time activity cues

This multi-pronged approach offers detailed insights, such as revealing that last week roughly