Kanban Task Management App

This repository contains the full Kanban Task Management Application, including both the frontend and backend as Git submodules.

The project is inspired by the Frontend Mentor Kanban Task Management challenge and extends it by adding authentication so users can register, log in, and manage their own boards.

Note

For more information about the frontend or backend, go to its own repositories

Repository Structure

kanban-task-management/

├── frontend/ → React + TypeScript client application

├── backend/ → Node.js + Express + TypeScript REST API

└── README.md → This file

Both frontend and backend are included as Git submodules, allowing independent development while maintaining a unified project.

🌐 About the Project

The Kanban Task Management App allows users to create and manage boards, columns, and tasks, with a clean interface inspired by Trello-style workflows.
Each user can register and log in to access their personal boards.

The app includes both online (API-based) and local (browser storage) modes for flexibility.

✨ Features

Frontend

• Full CRUD operations for boards, columns, and tasks.
• Light and dark mode themes.
• Local mode using localStorage to save data offline.
• Responsive design for mobile, tablet, and desktop.
• Authentication system with registration and login.
• Playwright test suite for end-to-end testing.
• State management using Zustand for simplicity and performance.

Backend

• REST API built with Express.js and TypeScript.
• Model–Controller structure for scalability and maintainability.
• MySQL database for persistent data storage.
• Authentication and authorization using JWT and bcrypt.
• Validated endpoints using Zod for type-safe request handling.
• Structured error responses and consistent typing.

🧩 Tech Stack

Layer	Technologies
Frontend	React, TypeScript, React Router, Tailwind CSS, Zustand, react-hot-toast, just-debounce-it
Backend	Node.js, Express, TypeScript, MySQL2, bcrypt, jsonwebtoken, Zod

Authentication

The system supports:

• User registration
• User login
• Token-based authentication for protected API routes
• Each authenticated user has access only to their own boards and tasks.

⚙️ Setup Instructions

1. Clone the Repository

git clone --recurse-submodules https://github.com/yourusername/kanban-task-management.git
cd kanban-task-management

If you already cloned it without submodules:

git submodule update --init --recursive

2. Install Dependencies and run

# Install all dependencies
npm run install-all

# Start backend
npm run server

# Start frontend
npm run client

# Run both frontend and backend concurrently
npm run dev