Vue.js and TailwindCSS Kanban Board Code Test for QuantifyHQ

Welcome to the Vue.js and Tailwind Kanban Board repository! This project showcases my expertise in building a highly interactive and visually appealing Kanban board, taking inspiration from the popular Trello application. With a host of exciting features, this Kanban board is designed to enhance task management and streamline workflows.

Live version

https://igortrinidad.github.io/kanban-board-code-test/

Key Features

1. Drag-and-Drop Functionality: Effortlessly organize your tasks by leveraging the intuitive drag-and-drop feature. Seamlessly move tasks between different columns, such as "To Do," "In Progress," and "Done," with a simple drag gesture. Experience the satisfaction of visually rearranging your tasks just like moving physical cards on a traditional Kanban board.

2. Stack Percentage Visualization: Gain a clear understanding of task distribution in each column using the stack percentage feature. This visual representation helps you assess the workload and balance across your workflow. It allows you to identify areas that require attention or additional resources, ensuring efficient task management.

3. Add and Remove Items: Seamlessly add new tasks to any column with a quick and straightforward process. Removing items is just as simple, allowing you to effortlessly maintain an up-to-date and clutter-free board.

4. Responsive Design: Experience a consistent and user-friendly interface across various devices and screen sizes. The Kanban board's responsive design ensures optimal display and interaction, whether you access it from a desktop, tablet, or mobile device. Enjoy a seamless and intuitive task management experience no matter where you are.

5. CI/CD Automated Deployment: Leveraging GitHub Actions, this repository provides a robust CI/CD pipeline for automated deployment. With each push to the main branch, the pipeline automatically builds, tests, and deploys the Kanban board application. This ensures that the latest version of the application is always available and accessible to users.

6. Cypress End-to-End Testing: The repository includes a comprehensive suite of end-to-end tests written with Cypress. These tests simulate user interactions and validate the functionality of the Kanban board across different scenarios. By running these tests automatically as part of the CI/CD pipeline, you can detect and address any issues or regressions quickly, ensuring the stability and reliability of the application.

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your unit tests

npm run test:unit

Run your end-to-end tests

npm run test:e2e

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.