Kanban Board Application

Live Demo

A simple, responsive Kanban board application built with React, TypeScript, and Redux Toolkit. This project allows users to create and manage boards with cards that can be moved between different status columns (To Do, In Progress, Done).

Project Overview

This Kanban board application provides a simple yet powerful way to organize tasks and projects. Users can:

• Create multiple boards for different projects
• Add cards to boards with custom titles
• Drag and drop cards between status columns (To Do, In Progress, Done)
• Delete boards when no longer needed

The application features a clean, responsive design that works well on both desktop and mobile devices.

Installation Instructions

To set up the project locally, follow these steps:

1. Clone the repository:

   git clone <repository-url>

2. Navigate to the project directory:

   cd kanban

3. Install dependencies:

   npm install

Usage Guidelines

Development

To run the application in development mode:

npm run dev

This will start the development server, usually on http://localhost:5173.

Building for Production

To create a production build:

npm run build

Preview Production Build

To preview the production build locally:

npm run preview

Application Features

1. Creating a Board:

   • Click the "افزودن جدول" (Add Board) button on the main page
   • Enter a title for your new board
   • Click "ساخت جدول" (Create Board)

2. Managing Cards:

   • Click on a board to view its details
   • Click "افزودن کارت" (Add Card) to create a new card
   • Enter a title for your card
   • Cards can be dragged between columns to update their status

3. Deleting a Board:

   • From the board detail view, click the "حذف جدول" (Delete Board) button
   • Confirm deletion in the popup dialog

File Structure

src/
├── page/           # Page components
│   ├── BoardDetail.tsx    # Board detail view with columns
│   ├── Boards.tsx         # Main boards list view
│   ├── CardDetail.tsx     # Card detail view (placeholder)
│   ├── Layout.tsx         # Main layout component
│   └── Notfound.tsx       # 404 error page
├── store/          # Redux store configuration
│   ├── boardSlice.ts      # Board-related reducers and actions
│   └── index.ts           # Store configuration
├── types/          # TypeScript type definitions
│   └── index.ts
├── App.tsx         # Main application component with routing
├── index.css       # Global styles
└── main.tsx        # Application entry point

Dependencies

Production Dependencies

• react (^19.1.1) - UI library
• react-dom (^19.1.1) - React DOM rendering
• react-router (^7.8.2) - Routing library
• @reduxjs/toolkit (^2.8.2) - State management
• react-redux (^9.2.0) - React bindings for Redux
• tailwindcss (^4.1.12) - Utility-first CSS framework
• @tailwindcss/vite (^4.1.12) - Tailwind CSS Vite integration
• lucide-react (^0.542.0) - Icon library
• react-hot-toast (^2.6.0) - Notification library

Development Dependencies

• typescript (~5.8.3) - TypeScript compiler
• vite (^7.1.2) - Build tool and development server
• @vitejs/plugin-react-swc (^4.0.0) - React plugin for Vite
• @types/react (^19.1.10) - TypeScript definitions for React
• @types/react-dom (^19.1.7) - TypeScript definitions for React DOM
• eslint (^9.33.0) - Linting utility
• typescript-eslint (^8.39.1) - TypeScript ESLint plugin

Contribution Guidelines

Contributions are welcome! To contribute to this project:

1. Fork the repository
2. Create a new branch for your feature or bug fix
3. Make your changes
4. Ensure your code follows the existing style and conventions
5. Write clear, descriptive commit messages
6. Submit a pull request with a detailed description of your changes

Please ensure all tests pass before submitting a pull request.

License Information

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

Contact or Support Information

For support, feature requests, or bug reports, please:

1. Open an issue on the project's GitHub repository
2. Provide detailed information about the problem or request
3. Include steps to reproduce any bugs if applicable

For general inquiries, you can contact the development team through the repository's discussion section.