Flowcus

A desktop productivity application built with Electron, React, and TypeScript, designed to organize professional and personal life around four main pillars: Areas, Goals, Habits, and Calendar.

The Flowcus dashboard brings areas, goals, habits, and calendar events together.

Why I Built This Project

I have always enjoyed productivity tools, but many existing products felt either too complex or too limited for everyday use. I created Flowcus to find a balance: complete enough to organize different parts of life, yet simple enough to use consistently.

The idea came from a personal need. I wanted one place for habit tracking, goal setting, calendar planning, and writing study notes. Since I could not find a tool that combined these workflows in the way I wanted, I decided to build my own.

Another important goal was a truly offline-first experience that would work without an internet connection. I also wanted it to behave like a native desktop application with strong performance and a fluid interface. Electron made it possible to build that experience with React and TypeScript while retaining a productive web-development workflow.

Project Architecture

The architecture is designed for scalability and maintainability:

flowcus/
├── src/
│   ├── main/                    # Electron main process
│   │   ├── handles/             # IPC handlers
│   │   │   ├── areas/           # Area CRUD
│   │   │   ├── goals/           # Goals and tasks
│   │   │   ├── habits/          # Habits and daily logs
│   │   │   ├── calendar-events/ # Calendar events
│   │   │   ├── blocks/          # Content blocks
│   │   │   └── profile/         # Profile management
│   │   └── db/                  # SQLite database
│   │       ├── database.ts      # Drizzle configuration
│   │       ├── schema.ts        # Table definitions
│   │       └── seed/            # Initial data
│   ├── preload/                 # Secure bridge scripts
│   └── renderer/                # React UI process
│       └── src/
│           ├── components/      # Reusable components
│           ├── contexts/        # Global state
│           ├── hooks/           # Custom hooks
│           └── pages/           # Application routes

Architectural Decisions

Technologies and Tools

Core Stack

• Electron 38 – Cross-platform desktop framework.
• React 19 – Component-based user interface.
• TypeScript 5.9 – End-to-end static typing.
• Tailwind CSS 4 – Utility-first styling.

Database

• Drizzle ORM – Lightweight, high-performance ORM.
• Better-SQLite3 – SQLite driver compiled for Node.js.
• SQLite – Zero-configuration local database.

UI and Editing

• Radix UI, shadcn/ui, and Lucide React for accessible interface components.
• Framer Motion, Tailwind Merge, and CVA for motion and component variants.
• TipTap, BlockNote, and ProseMirror for extensible rich-text editing.
• Recharts, React Day Picker, date-fns, and Luxon for data and calendar views.
• Electron-Vite and Electron Builder for development and multi-platform packaging.

Features

Areas

Organize projects and areas of responsibility with a flexible block system.

Flowcus area grid with color-coded cards.

• Complete CRUD and manual reordering.
• Grid and list views.
• Drag-and-drop organization.
• Search by name or description.
• Notion-style rich block editor.
• Text, lists, code, and image content.

Goals

Define objectives and track progress in detail.

Goal card with progress and related tasks.

• Goals contain individual tasks.
• Progress is calculated from completed tasks.
• Personal, work, health, and custom categories.
• High, medium, and low priorities.
• In-progress, completed, paused, and canceled states.
• Sorting by date, priority, or progress.

Habits

Build positive routines with detailed tracking.

Habit dashboard with statistics and a heatmap.

• Daily completion logging.
• Consecutive-day streak tracking.
• Completion rate, best streak, monthly history, and annual heatmap.
• Morning, evening, weekly, and custom habit types.
• Filters by type, priority, and status.

Calendar

Manage appointments through multiple views.

Monthly calendar with color-coded events.

• Day, week, month, year, and agenda views.
• Contextual creation from any date or time slot.
• Custom colors for event categories.
• Independent mini-calendar navigation.
• Full support for all-day events.
• Recurring event patterns under development.

General Capabilities

Theme and profile settings in Flowcus.

• Automatic and manual dark mode.
• Multiple local profiles.
• Global search.
• Responsive tablet and mobile layouts.
• Keyboard shortcuts.
• Offline local persistence.

Technical Challenges

1. State Synchronization

Problem: Keeping data consistent between Electron’s main process and renderer.

Solution: Each domain has dedicated IPC handlers. The renderer calls ipcRenderer.invoke(), and the main process performs database operations and returns typed results.

ipcMain.handle("habits:getAll", async (_, profileId: string) => {
  return db.select().from(habits).where(eq(habits.profileId, profileId));
});

2. Performance with Large Data Sets

Large habit and event lists were optimized with React.memo, virtualization where appropriate, and filtered Drizzle queries that move work into the database.

3. A Stable Block Editor

TipTap and BlockNote required Electron-specific configuration. I implemented reliable serialization, automatic persistence, and support for multiple block types.

4. Local Database Packaging

better-sqlite3 is compiled for Electron, while versioned schemas, migrations, and seed data keep installations consistent.

What I Learned

Technical Skills

• Electron processes, IPC, preload scripts, and contextBridge.
• Drizzle queries, migrations, and schema design.
• React 19, Tailwind CSS 4, electron-vite, and electron-builder.

Product Skills

• Feature prioritization and scope management.
• Long-term architectural decisions.
• Accessible feedback and thoughtful UX.
• Clear documentation for contributors.

Available Scripts

# Development
npm run dev
npm run start

# Build and packaging
npm run build
npm run dist
npm run build:win
npm run build:mac
npm run build:linux

# Database
npm run db:studio
npm run db:push
npm run db:generate
npm run db:migrate
npm run db:seed
npm run db:reset

# Quality
npm run lint
npm run format
npm run typecheck

Next Steps

• Cloud backup and synchronization across devices.
• Google Calendar integration.
• Cross-feature tags and labels.
• PDF, Markdown, and JSON exports.
• Plugin and extension system.
• Progressive web version.

Why This Project Matters

Flowcus demonstrates my ability to build and package complete desktop software, use a modern React and TypeScript stack, design thoughtful offline experiences, solve IPC and persistence challenges, and document a growing codebase. It is more than a task manager—it is a practical exploration of powerful native-feeling tools that work without external dependencies.

Interested in the project? Get in touch or contribute on GitHub.