https://github.com/alaa-abdallah1/kanban-todo-app
A simple and functional Kanban board built using Vue 3, Vuex, and Vite. This application supports task management with features like drag-and-drop, task prioritization, and real-time search.
https://github.com/alaa-abdallah1/kanban-todo-app
drag-and-drop draggable kanban kanban-board kanban-board-application tailwindcss typescript vue vue3 vuejs vuex
Last synced: 2 months ago
JSON representation
A simple and functional Kanban board built using Vue 3, Vuex, and Vite. This application supports task management with features like drag-and-drop, task prioritization, and real-time search.
- Host: GitHub
- URL: https://github.com/alaa-abdallah1/kanban-todo-app
- Owner: alaa-abdallah1
- Created: 2024-11-24T01:23:14.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-11-24T15:36:21.000Z (11 months ago)
- Last Synced: 2025-02-13T20:38:27.128Z (8 months ago)
- Topics: drag-and-drop, draggable, kanban, kanban-board, kanban-board-application, tailwindcss, typescript, vue, vue3, vuejs, vuex
- Language: Vue
- Homepage: https://kanban-todo-app-8g8e.onrender.com/
- Size: 18.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Kanban Task Manager
A simple and functional Kanban board built using Vue 3, Vuex, and Vite. This application supports task management with features like drag-and-drop, task prioritization, and real-time search.
## Live Demo
[View the live demo here](https://kanban-todo-app-8g8e.onrender.com)
## Screenshot
## Features
- **Task Creation**: Add tasks with descriptions, due dates, and priority levels.
- **Task Editing and Deletion**: Edit task details or delete tasks no longer needed.
- **Drag-and-Drop**: Move tasks between columns with a smooth drag-and-drop experience.
- **Search Functionality**: Debounced search for quick filtering by title or description.
- **Task Prioritization**: Visual indicators for task priority (Low, Medium, High) and overdue tasks.
- **Persistent State**: Data is stored in localStorage and restored on page reload.
## Setup Instructions
1. Clone the repository:
```bash
git clone https://github.com/alaa-abdallah1/kanban-todo-app.git
```
2. Navigate to the project directory:
```bash
cd kanban-todo-app
```
3. Install dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm run dev
```
5. Open the application in your browser at `http://localhost:10000`.
## Technologies Used
- **Vue 3 (Composition API)**: Modern and reactive UI development.
- **Vite**: Fast and efficient bundling and development tooling.
- **Tailwind CSS**: Utility-first CSS framework for styling.
- **Vuex**: State management for tasks and interactions.
## Author
Developed by [Alaa Abdallah](https://github.com/alaa-abdallah1).