Skip to content

Latest commit

 

History

History
104 lines (66 loc) · 3.55 KB

README.md

File metadata and controls

104 lines (66 loc) · 3.55 KB
Raw

Trello Board

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.

Technologies Used

  • Vue.js 3
  • TypeScript
  • Tailwind CSS
  • Vite
  • Vue Draggable
  • Nanoid

Features

  • 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

Advantages of Using TypeScript and Tailwind CSS

TypeScript

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

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

Code Structure

The project follows a modular structure for better organization and maintainability. Here's a brief overview of the main components:

TrelloBoard.vue

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.

TrelloBoardTask.vue

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.

NewTask.vue

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.

DragHandle.vue

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.

TypeScript and Tailwind CSS

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.

Getting Started

Prerequisites

Make sure you have Node.js and npm installed on your machine.

Installation

Clone the repository:

git clone https://github.com/Srushti-9/trello-board.git

Install dependencies:

cd trello-board
npm install

Usage Run the development server:

npm run dev

How to Contribute Contributions are welcome! Please follow these steps:

  1. Fork the repository.
  2. Create a new branch (git checkout -b feature/improvement).
  3. Make your changes.
  4. Commit your changes (git commit -am 'Add new feature').
  5. Push to the branch (git push origin feature/improvement).
  6. Create a new Pull Request.

License This project is licensed under the MIT License.