• 📋 Angular Kanban Drag & Drop

  • 🌐 Live Demo
  • 📖 Description
  • ⚙️ System Requirements
  • 🚀 Project Installation
  • ▶️ Run the Project
  • 🧠 Project Architecture
  • ✨ Features
  • 🛠 Technologies Used
  • 📁 Project Structure
  • 🔥 Best Practices Implemented
  • 🎯 Project Goal
  • 📄 License

🔗 https://alobuuls.github.io/angular-kanban-drag-drop/

The project allows users to reorder columns, move tasks between columns, and organize information visually through a Trello-style interface while demonstrating reusable components, modular architecture, and drag-and-drop interactions.

Before running the project, make sure you have installed:

• 📦 Node.js: v12.14.x – v14.x (recommended: v14.21.3 LTS)
• 📦 npm: v6+
• 🅰️Angular CLI: v12.x

Run the following commands in your terminal:

node -v
npm -v
ng version

git clone git@github.com:alobuuls/angular-kanban-drag-drop.git

cd angular-kanban-drag-drop

npm install

Start the development server:

ng serve

Then open:

http://localhost:4200

The application follows a modular component-based architecture focused on Drag & Drop interactions.

Responsible for:

• Board state management
• Column organization
• Drag & Drop orchestration
• Task movement handling
• Data synchronization

Responsible for:

• Column rendering
• Task grouping
• Drop zone management
• Column interactions

Responsible for:

• Task rendering
• Task information display
• Drag item behavior
• UI consistency

Responsible for:

• Navigation rendering
• Application structure
• User interaction entry points

Responsible for:

• Kanban data contracts
• Type safety
• Board structure definition

• 📋 Kanban board interface
• 🧩 Angular CDK Drag & Drop
• ↔️ Column reordering
• 📌 Task movement between columns
• 🔄 Task reordering inside columns
• 🎯 Drag handles for tasks and columns
• 📦 Local JSON data source
• 🧠 Dynamic board updates
• 🎨 Trello-style user interface
• 🚀 Modular component architecture

angular-kanban-drag-drop/

├── src/
│
├── app/
│   │
│   ├── components/
│   │   ├── kanban/
│   │   │   ├── kanban-dashboard.component.*
│   │   │   ├── kanban-column/
│   │   │   └── kanban-item/
│   │   │
│   │   ├── list/
│   │   └── menu/
│   │
│   ├── interfaces/
│   │   └── kanban.interface.ts
│   │
│   ├── app.component.ts
│   └── app.module.ts
│
├── assets/
│   └── json/
│       └── data.json
│
├── angular.json
├── package.json
├── tsconfig.json
└── README.md

• Component-based architecture
• Separation of concerns
• Strong typing with TypeScript interfaces
• Angular CDK integration
• Reusable UI components
• Modular project organization
• Drag & Drop abstraction
• Scalable board structure
• Data-driven UI rendering
• Maintainable code organization

Practice and strengthen Angular UI interaction concepts through the implementation of a Kanban board application:

• Angular CDK
• Drag & Drop
• Component Communication
• TypeScript Interfaces
• Reusable Components
• Dynamic Rendering
• State Management
• Front-End Architecture
• User Experience Design
• Modular Development

This project is intended for educational and portfolio purposes.

Created by Alondra Francisco.