Taskronic

Multi-workspace Kanban and task management platform with real-time collaboration, drag-and-drop boards, and granular role-based permissions.

---

Table of Contents

• Why Taskronic Exists
• Core Capabilities
• Tech Stack
• Quick Start
• Environment Variables
• How It Works
• Development
• About this project
• Documentation

---

Why Taskronic Exists

Most task management tools are either too rigid or too complex.

Taskronic gives teams exactly what they need, where:

• Workspaces keep projects and boards organized and isolated per team
• Boards have configurable visibility and per-member permissions
• Tasks have priorities, due dates, subtasks, assignees, comments, and a full activity log
• All views — Kanban, Table, Grid, Calendar, Analytics — are built in
• Real-time updates keep every team member in sync without refreshing

---

Core Capabilities

• Multi-workspace support with invite links, direct invites, and join requests
• Kanban boards with drag-and-drop list and task reordering
• Board visibility control (public / private) and per-board member permissions
• Task system with priorities, dates, subtasks, assignees, comments, and archiving
• Copy and move tasks, lists, and boards
• Calendar view across all tasks by date
• Analytics dashboard with charts per board
• Activity log for all workspace, board, list, and task actions
• Role-based permissions at both workspace and board level
• Board background customization via Unsplash photos or custom colors
• Starred boards for quick access
• Multilingual interface (English, Ukrainian)
• Dark / light / system theme

---

Tech Stack

• Next.js 15 (App Router) + React 19 + TypeScript
• Convex — Real-time reactive backend with server functions and built-in database
• @convex-dev/auth — Authentication (email/password, GitHub OAuth, Google OAuth)
• TanStack Query — Server state management (via Convex React hooks)
• Zustand — Client state management
• next-intl — Internationalization
• Tailwind CSS v3 + Radix UI (shadcn/ui) — UI components
• @hello-pangea/dnd — Drag-and-drop for Kanban boards
• react-big-calendar — Calendar view
• Recharts — Analytics charts
• unsplash-js — Board background images
• Zod + React Hook Form — Schema validation and forms
• framer-motion — Animations
• Biome — Formatting and linting

---

Quick Start

git clone https://github.com/AnBoyvan/taskronic.git
cd taskronic
npm install
npx convex dev
npm run dev

You will need accounts for: Convex, GitHub OAuth (optional), Google OAuth (optional), Unsplash (optional).

---

Environment Variables

Create a .env.local file:

# Convex
CONVEX_DEPLOYMENT=
NEXT_PUBLIC_CONVEX_URL=

# Auth (GitHub OAuth)
AUTH_GITHUB_ID=
AUTH_GITHUB_SECRET=

# Auth (Google OAuth)
AUTH_GOOGLE_ID=
AUTH_GOOGLE_SECRET=

# Unsplash (board backgrounds)
NEXT_PUBLIC_UNSPLASH_ACCESS_KEY=

---

How It Works

1. Users authenticate via email/password, GitHub, or Google OAuth (@convex-dev/auth)
2. Users create or join workspaces via invite links, direct invites, or join requests
3. Admins manage workspace members, board settings, and default permission rules
4. Boards are created within workspaces with configurable visibility and member permissions
5. Tasks are created within lists on a board and assigned to workspace members
6. All changes are logged to the activity feed and pushed to all connected clients in real time
7. Boards, lists, and tasks can be copied, moved, archived, or deleted with full audit trail

For deep technical details see: docs/architecture.md

---

Development

npx convex dev     # Start Convex dev server (required)
npm run dev        # Start Next.js dev server
npm run lint       # Run Biome linter
npm run format     # Format with Biome

---

About this project

This repository is a portfolio demonstration.

See: docs/description.md

Documentation

Full technical documentation and architecture breakdown:
docs/architecture.md