KanbanProject

A flexible Kanban board application designed to help teams visualize and manage their workflow efficiently. This project provides an interactive drag-and-drop interface for task management with support for multiple views, columns, rows, and WIP limits.

📘 User Guide

📋 Table of Contents

• 📋 Overview
• ✨ Features
• 🛠️ Technologies
• 📦 Prerequisites
• 💻 Installation
• 🚀 Running the Application
  • Using Docker
  • Running Locally
• 📝 Usage
• 🏗️ Project Structure
• 🧪 Testing
• ❓ Troubleshooting & FAQ
• 👥 Contributing
• 👨‍💻 Authors
• 📄 License

📋 Overview

KanbanProject is a web-based task management system implementing Kanban methodology. It enables effective task visualization, workflow management, and productivity tracking through an intuitive drag-and-drop interface.

✨ Features

• 🔄 Interactive Kanban board with drag-and-drop functionality
• 📊 Column and row-based work organization
• ✏️ Task creation, editing, and deletion
• 📋 Subtask support for breaking down complex tasks
• ⚠️ Work In Progress (WIP) limits for columns, rows, and users
• 👤 User assignments to tasks
• 🏷️ Labels for task categorization
• 🌙 Dark mode support

🛠️ Technologies

• Backend: Java 23 with Spring Boot
• Frontend: React.js
• Database: PostgreSQL
• Containerization: Docker
• Testing: JUnit, Mockito, JaCoCo for test coverage

📦 Prerequisites

• Java 23
• Node.js 18 or higher
• npm or Yarn
• PostgreSQL (if running locally)
• Docker and Docker Compose (if using containers)

💻 Installation

1. Clone the repository:

git clone https://github.com/danielrudzinski/KanbanProject.git
cd KanbanProject

🚀 Running the Application

🐳 Using Docker

The easiest way to run the application is using Docker, which handles all dependencies:

1. Make sure Docker and Docker Compose are installed on your system
2. From the project root directory, run:

docker-compose up -d

3. The application will be available at http://localhost:8080
4. To stop the application:

docker-compose down

💻 Running Locally

Backend

1. Navigate to the backend directory (from root folder):

cd backend

2. Configure the database and secrets:
   • Update src/main/resources/application.properties with your PostgreSQL connection settings Mainly these lines:
     • spring.datasource.url= (leave this as it is, except SPRING_DATASOURCE_DB:kanban <- edit this with your db's name)
     • server.port= (leave as is)
     • spring.datasource.username= (your login username for postgresql)
     • spring.datasource.password= (your passowrd for postgresql)
     • SPRING_MAIL_USERNAME = (your smtp mail login)
     • SPRING_MAIL_PASSWORD = (your mail's password or more likely auth token)
     • security.jwt.secret-key = (random jwt key, generate it online)

OR

Create .env file with these values in root folder AND /backend folder and leave application.properties as is.

3. Build and run the backend:

./mvnw clean package
./mvnw spring-boot:run

The backend will start on http://localhost:8080

Frontend

1. Navigate to the frontend directory (from root folder):

cd frontend

2. Install dependencies:

npm install

3. Start the frontend application:

npm run dev

The frontend will be available at http://localhost:5173

📝 Usage

1. Create columns representing your workflow stages (e.g., "To Do", "In Progress", "Done")
2. Add rows for categorizing work types or projects
3. Create tasks by clicking the "Add Task" button
4. Drag and drop tasks between columns to update their status
5. Click on a task to view details, add subtasks, or assign team members
6. Configure WIP limits for columns to prevent overloading stages

🏗️ Project Structure

The project is organized into two main directories:

• /backend - Java Spring Boot application
  • /src/main/java - Java source code
  • /src/main/resources - config files
  • /src/test - test classes
• /frontend - React.js web application
  • /src/components - React components
  • /src/services - API services
  • /src/styles - CSS and styling

🧪 Testing

The project uses JUnit, Mockito, Jest, Eslint and Cypress for linting checks, unit, integration and e2e testing. Test coverage is monitored with JaCoCo.

All tests are automatically run on pull requests and pushes to the main branch through GitHub Actions workflows. See the workflows directory for configuration details.

Running Backend Tests

To run backend tests (from root folder):

cd backend
./mvn test

To generate a test coverage report:

./mvn clean test jacoco:report

The coverage report will be available at site>jacoco>index.html

Running Frontend Tests

To run frontend tests (from root folder):

cd frontend
npm test                  # Run Jest unit tests
npm run test:coverage     # Generate Jest test coverage report
npm run lint              # Run ESLint code quality checks
npm run cypress           # Open Cypress test runner for E2E tests
npm run cypress:headless  # Run Cypress tests in headless mode

The Jest coverage report will be available in the coverage directory.

👥 Contributing

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

👨‍💻 Authors

• Daniel Rudziński - ** - GitHub Profile
• Dominik Smoliński - ** - GitHub Profile

Want to be added to this list? Check the Contributing section!

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.