This project is a Kanban board application built with Angular 17, utilizing Angular CDK for drag-and-drop functionality. Kanban boards are effective tools for managing tasks and workflows, allowing users to visualize work, prioritize tasks, and track progress.
- Drag and Drop: Utilizes Angular CDK to implement seamless drag and drop functionality for tasks within the Kanban board.
- Responsive Design: The application is designed to be responsive, ensuring optimal user experience across various devices and screen sizes.
- Task Management: Users can create, edit, delete, and move tasks between different stages (columns) on the Kanban board.
- Customization: Users can customize columns, task titles, and other attributes to suit their specific workflow requirements.
- Data Persistence: Tasks and board configurations are persisted in the browser's local storage, allowing users to revisit the board and retain their changes.
-
Here's how the board would look like initially:
-
You can add your info regarding the Kanban Board by clicking the Create Button:
-
You can add Name Your Board, Columns, and Tasks. Also, you can add or delete new Tasks and Columns:
-
You can have as many Tasks and Columns as you want:
-
Here's how the Board would look like on clicking the save Configuration button:
-
Clone the repository to your local machine:
git clone https://github.com/Muhammad-Mahir157/Kanban-Board.git
-
Install dependencies using npm
npm install
-
Start the development server:
ng serve
-
Open your web browser and navigate to http://localhost:4200/ to view the Kanban board application.
You can customize the Kanban board by modifying the following files:
- src/app/modules/main-view.component.html: Define the structure and layout of the Kanban board.
- src/app/modules/main-view.component.ts: Implement logic for managing tasks and columns.
Contributions are welcome! If you encounter any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request.
This project is licensed under the MIT License.