⚡ TaskFlow — Intelligent Kanban Task Manager

A fullstack web application with a Kanban board, AI assistant, undo/redo support, and multiple sorting strategies. Built with vanilla JavaScript frontend and Node.js + Express + SQLite backend.

---

🚀 Getting Started

Prerequisites

• Node.js (v18+) — download, or
• Docker — download

Option A: Docker (easiest)

# Clone the repository
git clone https://github.com/gawlasdominik/taskflow.git
cd taskflow

# Copy environment config
cp .env.example .env
# Edit .env — add your Gemini API key (optional)

# Build and run
docker compose up --build

Open: http://localhost:3000 — done!

Option B: Node.js

Installation

# Clone the repository
git clone https://github.com/YOUR_USERNAME/taskflow.git
cd taskflow

# Install dependencies
npm install

Configuration

# Copy the environment template
cp .env.example .env

Edit .env and add your Gemini API key (optional — app works without AI):

GEMINI_API_KEY=your_key_here
PORT=3000

Get a free API key from Google AI Studio.

Run

# Start the server
npm start

# Or with auto-restart on file changes (development)
npm run dev

Open: http://localhost:3000

---

🏗️ Architecture

taskflow/
├── server/                       ← BACKEND (Node.js + Express)
│   ├── index.js                  ← Express server entry point
│   ├── routes/
│   │   ├── tasks.js              ← REST API: CRUD for tasks
│   │   └── chat.js               ← AI proxy (Gemini, key hidden)
│   └── db/
│       └── database.js           ← SQLite setup + queries
├── src/                          ← FRONTEND (vanilla JavaScript)
│   ├── app.js                    ← Entry point, wires modules together
│   ├── ai/
│   │   └── GeminiService.js      ← Chat via server proxy
│   ├── model/
│   │   ├── Task.js               ← Task data model
│   │   ├── TaskManager.js        ← Business logic + server sync
│   │   └── PriorityQueue.js      ← Binary min-heap
│   ├── patterns/
│   │   ├── EventEmitter.js       ← Observer pattern
│   │   ├── Command.js            ← Command pattern (undo/redo)
│   │   └── SortStrategy.js       ← Strategy pattern (sorting)
│   └── ui/
│       ├── BoardView.js          ← Kanban board (3 columns)
│       ├── TaskCardView.js       ← Task card component
│       ├── ModalView.js          ← Add/edit modal dialog
│       ├── ChatView.js           ← AI chat panel
│       └── StatsView.js          ← Statistics panel
├── index.html                    ← HTML structure
├── style.css                     ← Styles (dark theme)
├── package.json                  ← Node.js project config
├── .env                          ← API key (gitignored)
├── .env.example                  ← Env template for contributors
└── LICENSE                       ← MIT License

Data Flow

Browser (Frontend)                 Server (Backend)             External
┌─────────────────┐    fetch()    ┌──────────────────┐         ┌──────────┐
│  TaskManager     │ ──────────→  │  Express API      │         │          │
│  (local cache)   │ ←──────────  │  /api/tasks       │ ←────→  │  SQLite  │
│                  │              │                    │         │  DB      │
│  GeminiService   │ ──────────→  │  /api/chat         │ ──────→ │          │
│  (proxy client)  │ ←──────────  │  (Gemini proxy)    │ ←────── │ Gemini   │
└─────────────────┘              └──────────────────┘         └──────────┘

---

🔌 API Endpoints

Method	Endpoint	Description
GET	/api/tasks	List all tasks
GET	/api/tasks/:id	Get a single task
POST	/api/tasks	Create a task
PUT	/api/tasks/:id	Update a task
DELETE	/api/tasks/:id	Delete a task
POST	/api/chat	Send message to AI assistant

---

🧩 Design Patterns

Pattern	File	Purpose
Observer	EventEmitter.js	TaskManager emits events, views react
Command	Command.js	Undo/redo via command stack (LIFO)
Strategy	SortStrategy.js	Swappable sorting algorithms

📊 Data Structures

Structure	File	Complexity
Priority Queue (Min-Heap)	PriorityQueue.js	insert O(log n), peek O(1)
HashMap (Map)	TaskManager.js	get/set/delete O(1)
Stack (Array)	Command.js	push/pop O(1)

---

✨ Features

• Kanban Board — 3 columns: To Do → In Progress → Done
• Drag & Drop — move tasks between columns (HTML5 API)
• CRUD — add, edit, delete tasks via modal dialog
• Undo / Redo — Ctrl+Z / Ctrl+Y (Command pattern)
• Sorting — 4 strategies: priority, deadline, alphabetical, creation date
• Statistics — auto-updating stats panel
• AI Assistant — chat with Gemini AI (server-side, key hidden)
• REST API — Node.js + Express backend
• SQLite Database — persistent storage (no external DB server needed)
• Responsive — works on desktop and mobile

---

⌨️ Keyboard Shortcuts

Shortcut	Action
Ctrl + N	New task
Ctrl + Z	Undo
Ctrl + Y	Redo

---

🛠️ Tech Stack

Frontend

• HTML5 — semantic structure, Drag & Drop API
• CSS3 — custom properties, flexbox, grid, animations
• JavaScript ES6+ — modules, classes, Map, async/await

Backend

• Node.js — JavaScript runtime
• Express — web framework / REST API
• better-sqlite3 — SQLite database driver
• dotenv — environment variable management