A Trello board project built using Vue 3, TypeScript, Tailwind CSS, and Vite, allowing users to manage tasks with ease. The project utilizes Vue 3 for its reactive and composable nature, TypeScript for static typing and improved code maintainability, Tailwind CSS for rapid UI development, and Vite for fast development and hot module replacement. With features like drag-and-drop functionality provided by vuedraggable and unique identifiers generated by nanoid, organizing tasks has never been simpler.
- Vue.js 3
- TypeScript
- Tailwind CSS
- Vite
- Vue Draggable
- Nanoid
- Add, remove, and rearrange tasks with drag-and-drop functionality
- Responsive design for seamless use across devices
- Efficient state management using Vue 3 composition API
- Utilizes nanoid for generating unique task identifiers
TypeScript adds static typing to JavaScript, providing benefits such as:
- Enhanced code maintainability and scalability
- Early detection of errors during development
- Improved IDE support and code navigation
Tailwind CSS is a utility-first CSS framework that offers advantages like:
- Rapid UI development with reusable utility classes
- Consistent and maintainable styling across the project
- Ability to easily customize and extend styles without writing custom CSS
The project follows a modular structure for better organization and maintainability. Here's a brief overview of the main components:
This file represents the main Trello board component, which displays columns and tasks. It makes use of Vue 3 composition API and features draggable columns and tasks. Notable imports include nanoid for generating unique identifiers and vuedraggable for drag-and-drop functionality.
The TrelloBoardTask.vue component represents individual tasks within the Trello board. It receives a task object as a prop and renders the task title. This component also handles deletion of tasks.
The NewTask.vue component is responsible for adding new tasks to the board. It provides a textarea where users can enter a task title. When the enter key is pressed or the textarea loses focus, the task is added to the corresponding column.
The DragHandle.vue component represents the drag handle used to drag and reorder tasks within a column. It's used in both the TrelloBoard.vue and TrelloBoardTask.vue components.
The project utilizes TypeScript for static typing and improved code maintainability. Tailwind CSS is used for rapid UI development, providing a utility-first approach to styling.
Feel free to explore the codebase further to gain a deeper understanding of the project's implementation details.
Make sure you have Node.js and npm installed on your machine.
Clone the repository:
git clone https://github.com/Srushti-9/trello-board.gitInstall dependencies:
cd trello-board
npm installUsage Run the development server:
npm run devHow to Contribute Contributions are welcome! Please follow these steps:
- Fork the repository.
- Create a new branch (git checkout -b feature/improvement).
- Make your changes.
- Commit your changes (git commit -am 'Add new feature').
- Push to the branch (git push origin feature/improvement).
- Create a new Pull Request.
License This project is licensed under the MIT License.