TaskBoard

Professional bilingual task management for teams & managers - Kanban, roles, analytics, one self-hosted app

---

🌐 Language

🇬🇧 English · 🇸🇦 العربية

---

📋 Table of Contents

• What is TaskBoard?
• Roles & Permissions
• Quick Start
• Commands
• Environment Variables
• Features
• VS Code Extension
• Tech Stack
• Project Structure
• Roadmap
• Contributing
• Security
• Changelog
• License

---

🤔 What is TaskBoard?

TaskBoard is a free, open-source task management system for bilingual teams - built natively in English and Arabic (full RTL layout) and written to fix the root problems found in hosted tools. No per-seat pricing, no external services, no lock-in.

Problem	Hosted Tools	TaskBoard
Arabic is an afterthought	❌ Broken RTL, untranslated fields	✅ Bilingual everywhere - titles, descriptions, reports
Per-seat subscriptions	❌ Monthly cost per user	✅ Self-hosted, MIT licensed
External database services	❌ Managed DB required	✅ Embedded SQLite - zero dependencies
Weak role separation	❌ Everyone sees everything	✅ Server-enforced leader / member / client scopes
No native reporting	❌ Export behind paywalls	✅ Bilingual PDF reports built in

---

👥 Roles & Permissions

Role	Scope	Can Do
leader	Everything	Manage projects, sections, tasks, users, prices - full CRUD everywhere
member	Assigned tasks only	View assigned tasks, update their status, work on their own kanban items
client	Own projects only	Track project progress, edit tasks inside their projects, join the team view

All permissions are enforced server-side on every API route - the UI simply mirrors what the backend allows. Task prices (assigneePrices) are visible to leaders only and stripped from every other response.

---

🚀 Quick Start

git clone https://github.com/red-shadows-rs/task-board.git
cd task-board
npm install
cp .env.example .env.local
npm run dev

Open http://localhost:3000 in your browser.

First Account

On an empty database the first account created is auto-promoted to leader (bootstrap mode). After that, only leaders can create and manage users from the Team page.

Production

npm run build
npm start

Requirements:

• Node.js >= 20
• npm >= 10

---

⌨️ Commands

Command	Description
npm run dev	Start dev server with Turbopack
npm run build	Production build
npm start	Start production server
npm run lint	Run ESLint
npm run lint:fix	Auto-fix lint issues
npm run format	Format with Prettier
npm run format:check	Check formatting
npm run type-check	TypeScript type checking
npm run validate	Full validation (format + lint + types) - required before every commit

---

🔧 Environment Variables

Copy .env.example to .env.local before first run:

Variable	Required	Default	Description
SESSION_SECRET	Yes	—	HMAC-SHA256 signing key for sessions - random string of at least 32 characters
TRUST_PROXY	No	unset	Set true only behind a trusted reverse proxy to enable per-IP rate limiting

The app refuses to boot without a strong SESSION_SECRET (generate one with openssl rand -base64 48).

---

✨ Features

🎯 Core Kanban Board — Drag-and-drop tasks across customizable sections Project Management — Create, edit, and track projects with statuses Task Management — Rich text descriptions, attachments, tags, priorities Team Management — Role-based access: leader, member, client

📊 Analytics & Reporting Analytics Dashboard — Interactive charts via Recharts PDF Export — Projects, sections, tasks, and analytics reports Progress Tracking — Visual indicators for project and task status Task Pricing — Per-assignee prices with column totals (leaders only)

🎨 User Experience Bilingual (EN/AR) — Full RTL support with Cairo/Inter fonts Dark/Light Theme — System-aware HSL-based theming Rich Text Editor — Tiptap with text alignment and underline PWA Ready — Installable with offline manifest Responsive — Desktop, tablet, and mobile optimized

🔒 Security Session Auth — bcrypt + HMAC-SHA256 httpOnly cookies and Bearer tokens, invalidated on password change Rate Limiting — Per-account on login, per-IP behind a trusted proxy Input Validation — Zod schemas on all API routes XSS Protection — DOMPurify sanitization Security Headers — X-Frame-Options, nosniff, Referrer-Policy, Permissions-Policy, CSP (report-only), HSTS Authenticated Uploads — Attachments stored outside public/ and served only through the authorized API

---

📦 VS Code Extension

Manage your tasks without leaving the editor. The extension in vscode-extension/ is built 100% on native VS Code APIs — no webviews — and mirrors the web app's permission model.

• Activity Bar container with three native panels: Account (user, role, server, stats, dashboard shortcut), My Tasks (assigned tasks grouped by status), and Projects (full Projects → Sections → Tasks tree with progress).
• Quick actions — change task status via Quick Pick, create tasks, open anything in the browser (inline buttons on hover).
• Status bar badge with your open task count; auto-refresh option.
• Secure by default — session token in VS Code SecretStorage, Bearer-token API auth, cleartext-HTTP warning.

cd vscode-extension
npm install && npm run build
# Press F5 to launch an Extension Development Host, or:
npm run package && code --install-extension taskboard-vscode-0.2.0.vsix

Full documentation in vscode-extension/README.md.

---

🧩 Tech Stack

Category	Technology	Purpose
Framework	Next.js 16	App Router + Turbopack
UI	React 18 + Radix UI	Component primitives
Styling	Tailwind CSS 3	Utility-first CSS
Language	TypeScript 5	Type safety
Database	better-sqlite3	Embedded SQLite
Auth	bcryptjs + HMAC-SHA256	Sessions
Drag & Drop	dnd-kit	Kanban reordering
Rich Text	Tiptap	Task descriptions
Forms	React Hook Form + Zod	Validation
State	Zustand	Global UI state
Charts	Recharts	Analytics
PDF	jsPDF + jspdf-autotable	Export
Animations	Framer Motion	Transitions
Notifications	react-hot-toast	Toast alerts
Dates	date-fns + react-day-picker	Date handling
Icons	Lucide React	Iconography
VS Code Client	VS Code Extension API	vscode-extension/
Linting	ESLint 9 (flat config)	Code quality
Formatting	Prettier	Code style

---

🏗️ Project Structure

TaskBoard/
├── data/                       # SQLite database + attachment images (runtime)
├── public/
│   ├── fonts/                  # IBM Plex Sans Arabic (PDF)
│   ├── locales/                # i18n modules (en/ar)
│   └── manifest.json           # PWA manifest
├── src/
│   ├── app/
│   │   ├── api/                # REST API routes
│   │   │   ├── auth/           # Login, logout, session
│   │   │   ├── images/         # Authenticated attachment serving
│   │   │   ├── locales/        # Locale module listing
│   │   │   ├── projects/       # Project CRUD + reorder
│   │   │   ├── sections/       # Section CRUD + reorder
│   │   │   ├── tasks/          # Task CRUD + reorder + images
│   │   │   ├── users/          # User CRUD + reorder
│   │   │   └── shared/         # Rate limiting, validators, responses
│   │   ├── dashboard/          # Tasks, projects, analytics, team
│   │   ├── login/              # Authentication page
│   │   └── profile/            # User profile
│   ├── components/
│   │   ├── common/             # Shared logic (kanban, tasks, charts)
│   │   ├── layouts/            # Navbar, footer
│   │   ├── pages/              # Page-level components
│   │   └── ui/                 # UI primitives (shadcn/ui-style)
│   ├── contexts/               # Language + Zustand store
│   ├── lib/
│   │   ├── auth.ts             # Session signing, RBAC guards
│   │   └── db.ts               # SQLite schema + data layer
│   ├── types/                  # TypeScript interfaces
│   └── utils/                  # PDF export, pricing
├── scripts/                    # Locale parity checker
├── vscode-extension/           # Native VS Code extension (own package)
├── .github/                    # Issue/PR templates, CI, release workflow
├── CHANGELOG.md                # Release history
├── LICENSE                     # MIT
└── README.md                   # This file

---

🗺️ Roadmap

• Embedded database (SQLite via better-sqlite3)
• Native VS Code extension
• Email notifications for task assignments
• OAuth2 / social login support
• WebSocket real-time updates
• Docker deployment configuration
• Unit and integration tests

---

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/my-feature
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

Full workflow, commit convention and release process in CONTRIBUTING.md.

---

🔒 Security

To report a security vulnerability, please follow the Security Policy. Do not open a public issue.

---

📝 Changelog

See CHANGELOG.md for a detailed version history. This project follows Semantic Versioning.

Version	Date	Highlights
v4.2.0	2026-08-27	Security audit fixes, native VS Code extension, dead-code cleanup
v4.1.1	2026-08-27	Unified docs style across all markdown, SVG logo banner, kebab-case repo references
v4.1.0	2026-08-27	SQLite storage, server-side RBAC, hardened sessions, GitHub scaffolding
v4.0.6	2026-05-15	Updated author username, set GitHub repo topics
v4.0.5	2026-05-14	Fixed drag-and-drop on desktop, fixed metadata icons
v4.0.4	2026-05-14	Removed ESLint disable comments, removed console logs
v4.0.3	2026-05-14	Fixed repo links, updated branding, version bump
v4.0.2	2026-05-14	Restored original icon, added .env.example
v4.0.1	2026-05-14	Documentation overhaul, Arabic README, data cleanup
v4.0.0	2026-05-14	Analytics, PDF export, PWA, bilingual, dark/light theme
v3.0.0	2026-04-01	Project/section management, task CRUD, user roles
v2.0.0	2026-03-01	Kanban board UI, statuses/priorities/tags, dashboard
v1.0.0	2026-02-01	Initial setup: Next.js App Router, login, Tailwind

---

📜 License

Distributed under the MIT License.

---

Built by Shadow-x78 · RED SHADOWS | RS · Changelog

_{© 2026 TaskBoard}