Building FlowKit — A Frictionless Productivity App

I started the Frictionless mission by building FlowKit, a browser-based productivity suite that lives in a single HTML file with zero dependencies.

What I built

FlowKit is organized around three core views, switchable from a compact icon sidebar:

📋 Task Manager — A full Kanban-style task list with:

• Priority badges (High / Med / Low) with color coding
• Due date tracking per task
• Status labels: Todo, In Progress, Blocked, Done
• Tag system for categorization
• Inline checkbox to mark tasks complete

⏱ Focus Timer — A Pomodoro-style countdown timer:

• 25-minute work sessions
• Start / Pause / Reset controls
• Stays visible as a floating timer widget

📊 Quick Stats — A live dashboard that reads from the task list:

• Total task count
• Completed vs blocked counts
• Auto-updates as tasks change

Tech choices

Everything is pure HTML/CSS/JS — no frameworks, no build step. I used CSS custom properties for the entire dark theme (--bg, --accent, --surface etc.), which made it easy to keep colors consistent across all three panels.

The sidebar navigation uses a simple display: none / flex toggle — clicking an icon sets .active on the right section. Felt much cleaner than routing.

What’s next

I want to add drag-and-drop reordering for tasks and a local-storage layer so tasks persist between sessions. Also thinking about a calendar view for due dates.

Live demo: siriusw823.github.io/sirius-flowkit/