TaskBoard

Professional Task Management System for Teams & Managers

العربية  •  Features  •  Tech Stack  •  Getting Started  •  Structure  •  Contributing  •  License

---

Why TaskBoard?

Managing projects across bilingual teams is challenging. TaskBoard bridges the gap with a Kanban-style interface that supports both English and Arabic natively — from RTL layout to bilingual task descriptions. Built on Next.js 16 with a focus on performance, security, and developer experience.

• Bilingual by Design — Every feature works in English and Arabic, not as an afterthought
• Self-Contained — JSON file-based database means zero external dependencies; deploy anywhere
• Production-Ready — Rate limiting, security headers, XSS protection, and session-based auth out of the box
• Export Everything — Generate PDF reports for projects, tasks, and analytics with bilingual font support

---

✨ 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
🎨 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 Rate Limiting — Per-IP on auth endpoints Input Validation — Zod schemas on all API routes XSS Protection — DOMPurify sanitization Security Headers — X-Frame-Options, CSP, Referrer-Policy

---

🚀 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
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
Auth	bcryptjs + HMAC-SHA256	Sessions
Animations	Framer Motion	Transitions
Notifications	react-hot-toast	Toast alerts
Dates	date-fns + react-day-picker	Date handling
Icons	Lucide React + Font Awesome 6	Iconography
Linting	ESLint 9 (flat config)	Code quality
Formatting	Prettier	Code style

---

📦 Getting Started

Prerequisites

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

Quick Start

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

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

Environment Variables

Variable	Required	Default	Description
NODE_ENV	Yes	development	Environment mode
SESSION_SECRET	Yes	—	HMAC-SHA256 signing key

Available Scripts

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)

---

📁 Project Structure

TaskBoard/
├── databases/                  # JSON file-based database
│   ├── projectsDatabase.json
│   ├── sectionsDatabase.json
│   ├── tasksDatabase.json
│   └── usersDatabase.json
├── public/
│   ├── css/                    # Font Awesome
│   ├── fonts/                  # IBM Plex Sans Arabic (PDF)
│   ├── images/                 # Task attachments
│   ├── locales/                # i18n (en/ar)
│   └── manifest.json           # PWA manifest
├── src/
│   ├── app/
│   │   ├── api/                # REST API routes
│   │   │   ├── auth/           # Login, logout, session
│   │   │   ├── projects/       # Project CRUD
│   │   │   ├── sections/       # Section CRUD + reorder
│   │   │   ├── tasks/          # Task CRUD + reorder + images
│   │   │   ├── users/          # User CRUD + reorder
│   │   │   └── shared/         # Database, rate limit, validators
│   │   ├── dashboard/          # Tasks, projects, analytics, team
│   │   ├── login/              # Authentication page
│   │   └── profile/            # User profile
│   ├── components/
│   │   ├── common/             # Shared logic
│   │   ├── layouts/            # Navbar, footer
│   │   ├── pages/              # Page-level components
│   │   └── ui/                 # UI primitives (shadcn/ui-style)
│   ├── contexts/               # Language + Zustand store
│   ├── types/                  # TypeScript interfaces
│   └── utils/                  # PDF export, pricing
├── CHANGELOG.md
├── CONTRIBUTING.md
├── CODE_OF_CONDUCT.md
├── SECURITY.md
├── LICENSE
├── README.md
├── README.ar.md
├── next.config.ts
├── tailwind.config.ts
├── tsconfig.json
└── package.json

---

🗺️ Roadmap

• Real database integration (PostgreSQL / SQLite)
• Email notifications for task assignments
• OAuth2 / social login support
• WebSocket real-time updates
• Docker deployment configuration
• Unit and integration tests

---

🤝 Contributing

We welcome contributions. Please read our Contributing Guide and Code of Conduct before submitting a pull request.

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

🔒 Security

To report a security vulnerability, please follow our 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
4.0.6	2026-05-15	Updated author username, set GitHub repo topics
4.0.5	2026-05-14	Fixed drag-and-drop on desktop, fixed metadata icons, removed ESLint comments
4.0.4	2026-05-14	Removed ESLint disable comments, removed console logs, added missing tags
4.0.3	2026-05-14	Fixed repo links, updated branding, version bump
4.0.2	2026-05-14	Restored original icon, added .env.example
4.0.1	2026-05-14	Documentation overhaul, Arabic README, improved icons, data cleanup
4.0.0	2026-05-14	Analytics, PDF export, PWA, bilingual, dark/light theme, drag & drop
3.0.0	2026-04-01	Project/section management, task CRUD, user roles, session auth
2.0.0	2026-03-01	Kanban board UI, task statuses/priorities/tags, dashboard layout
1.0.0	2026-02-01	Initial setup: Next.js App Router, login page, Tailwind CSS

---

📄 License

This project is licensed under the MIT License.

---

👤 Author

Shadow-x78 — RED SHADOWS | RS

---

_{Built with ❤️ by RED SHADOWS | RS}