TaskFlow V2.5.0

High-Performance Offline Desktop Task Manager

A premium, offline-first task management desktop application built with Electron, React, and TypeScript. Zero cloud dependencies. All data lives locally.

---

Core Architecture

3-Layer Electron Security Isolation

Layer	Configuration
Main Process	sandbox: true, nodeIntegration: false, contextIsolation: true
Preload Bridge	contextBridge.exposeInMainWorld() — 25 typed IPC methods across 7 namespaces
Renderer	Pure React 18 + Zustand — no Node.js access, no raw require()

Runtime Engine

Component	Detail
Build	Vite 6.4 with vite-plugin-electron — 3-bundle output (renderer JS, main process, preload)
Database	SQLite via better-sqlite3 — WAL mode, foreign keys, 8 indexes
State	Zustand 5 — 22 actions, taskAttachments: Record<string, Attachment[]> map
Animations	GPU-accelerated CSS + Canvas — 294 KB bundle, zero runtime dependencies

Security

• Path traversal protection on shell:openPath — validates fullPath.startsWith(attachmentsDir)
• All SQL queries use parameterized ? placeholders — no string interpolation
• NLP input sanitized: control characters (\x00-\x1F, \x7F, zero-width Unicode) stripped before processing
• No eval(), no dangerouslySetInnerHTML, no child_process in renderer

---

Features

NLP Smart Add Engine

Type natural language into the Quick Add modal (Ctrl+N) and the parser auto-detects:

Priority — urgent, high, important, low / Persian: فوری, مهم, پایین

Due Date — today, tomorrow, monday / Persian: امروز, فردا, جمعه

Due Time — at 14:30, 2pm, ساعت ۹ (supports Arabic-Indic numerals ٠-٩)

Detected fields auto-fill with accent glow badges. Manual overrides take priority.

File Attachments

• Drag & drop files onto expanded TaskCard
• Files copied to userData/attachments/ with UUID-safe naming
• Click to open in default system app via shell.openPath
• Full backup/restore includes attachment metadata

3D Kanban Board

• Three columns: Todo, In Progress, Done
• Drag cards between columns with 3D floating effect (scale(1.03) rotate(2.5deg))
• Volumetric shadows on drag, pulsing drop zone indicators
• Source card fades during drag for visual clarity

Month Calendar Grid

• 6x7 grid with previous/next month padding
• Task count badges, priority dots, overflow indicators
• Click any day to Quick Add with pre-filled date
• RTL-aware weekday headers via i18n

Glassmorphism UI

• Sidebar, modals, and Quick Add use backdrop-filter: blur(20-28px) saturate(120-150%)
• Dark/light mode toggle triggers circular clip-path wave transition (400ms)
• Confetti particle burst on task completion (Canvas API, 800ms auto-cleanup)

14 Languages

English, Persian (RTL), Arabic (RTL), Hebrew (RTL), Malay, Spanish, French, German, Turkish, Russian, Chinese, Japanese, Portuguese, Italian

---

Installation & Build

Prerequisites

• Node.js 18+ (recommended: 20 LTS) — https://nodejs.org
• npm (comes with Node.js)
• Windows 10/11 (for building the Windows installer)

Development

# Install dependencies
npm install

# Start dev server + Electron with hot-reload
npm run dev

Production Build

# Type-check + Vite build + electron-builder NSIS installer
npm run electron:build

Output: release/TaskFlow Setup 2.5.0.exe

Portable Build

# Single .exe, no installer required
npm run electron:build:portable

Output: release/TaskFlow-2.5.0-portable.exe

---

Project Structure

TaskFlow/
├── src/
│   ├── main/                    # Electron main process
│   │   ├── index.ts             # Window, DB, IPC (596 lines)
│   │   └── dateEngine.ts        # Date normalization (backend)
│   ├── preload/
│   │   └── index.ts             # contextBridge API (25 methods)
│   └── renderer/src/
│       ├── App.tsx              # Root with view transitions
│       ├── components/
│       │   ├── ui/              # Button, Checkbox, Input, Modal, Select, Skeleton
│       │   ├── layout/          # TitleBar, Sidebar, Header, Settings
│       │   └── task/            # TaskCard, ListView, CalendarView, KanbanView, QuickAdd
│       ├── stores/
│       │   ├── useStore.ts      # Zustand main store (221 lines)
│       │   └── useTaskFilters.ts # Filtering, sorting, subtasks
│       ├── lib/
│       │   ├── dateEngine.ts    # Date normalization (renderer)
│       │   ├── nlpParser.ts     # NLP engine (336 lines)
│       │   └── confetti.ts      # Canvas particle system
│       ├── i18n/                # 14-language translations
│       ├── types/               # TypeScript interfaces
│       └── styles/
│           └── index.css        # Design system (370 lines)
├── build/
│   ├── icon.ico                 # App icon
│   └── installer.nsh            # NSIS custom script
├── package.json                 # v2.5.0, electron-builder config
├── tsconfig.json
├── vite.config.ts
├── LICENSE.txt                  # MIT License
└── README.md

---

Keyboard Shortcuts

Shortcut	Action
Ctrl+N	Open Quick Add modal
Ctrl+K	Focus search bar
Ctrl+,	Open Settings
Enter	Confirm / Save
Escape	Cancel / Close modal
Tab	Cycle through form fields

---

Database

All data stored locally in SQLite:

• Location: %APPDATA%/TaskFlow/taskflow.db
• Tables: tasks, tags, task_tags, categories, attachments
• Mode: WAL (Write-Ahead Logging) for concurrent reads
• Backup: Export/Import via Settings (Ctrl+,)

---

Tech Stack

Technology	Version	Purpose
Electron	33.x	Desktop shell
React	18.x	UI library
TypeScript	5.7	Type safety
Vite	6.x	Build tooling
Zustand	5.x	State management
better-sqlite3	11.x	Local database
date-fns	4.x	Date utilities
electron-builder	25.x	Packaging

---

License

MIT License — Copyright (c) 2024 Taha Behrouzi

See LICENSE.txt for full text.