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

Introducing FlouState: A New Way to Understand Your Coding Habits

In the ever-evolving landscape of software development, understanding how you spend your coding time can be as vital as the code itself. Today, I’m excited to share the story behind FlouState, a innovative VS Code extension designed not just to track your coding duration but to illuminate what you’re working on at any given moment.

Explore FlouState Live: https://floustate.com
Get the Extension: FlouState on Visual Studio Marketplace


The Concept Behind FlouState

Traditional time tracking tools often fall short in providing meaningful insights—your 3-hour coding session might be composed of building features, debugging stubborn bugs, or exploring unfamiliar code. FlouState seeks to bridge this gap by automatically categorizing your real-time activity into distinct work types without manual input.

It intuitively classifies your current focus into categories such as:

  • 🚀 Creating: Developing new features
  • 🔧 Refactoring: Improving code quality and structure
  • 🐛 Debugging: Identifying and fixing issues
  • 🔍 Exploring: Learning or analyzing codebases

Think of it as a combination of WakaTime and intelligent activity detection—empowering developers to understand how they spend their coding hours.


Addressing the Core Issue

Knowing that you spent three hours “coding” doesn’t reveal much about your productivity or focus. Were you deeply engaged in feature delivery, battling bugs, or simply browsing documentation? Without these distinctions, optimizing your workflow becomes challenging.

FlouState tackles this problem by providing nuanced insights into your coding behaviors, helping you identify patterns, strengths, and areas for improvement.


Technical Foundations

Developing FlouState involved leveraging a diverse tech stack to deliver real-time, accurate activity detection:

  • Frontend: Built using Next.js 14 and TypeScript, with Tailwind CSS for styling
  • Backend: Powered by Supabase for authentication, real-time database updates, and data management
  • VS Code Extension: Created with TypeScript and the VS Code Extension API to seamlessly monitor your coding environment
  • Payments & Data Privacy: Integrated Stripe for subscriptions; prioritizing user privacy with local activity analysis ensuring no code content leaves your

Leave a Reply

Your email address will not be published. Required fields are marked *