This project is a Kanban Board application built with React and TypeScript, featuring a custom useForm hook for form management and styled with shadcn components. It provides an interactive way to manage tasks in a Kanban-style interface, allowing users to add, edit, and move tasks across different columns representing different stages of a workflow. This project is bootstrapped with Vite for a fast and efficient development experience.
https://task-manager-demo-one.vercel.app/
- Task Management: Create, edit, and delete tasks.
- Kanban Board: Drag and drop tasks across columns to represent their current status.
- Form Handling: Utilize the custom
useFormhook for managing form states and validations. - Styling: Beautifully styled using
shadcncomponents for a modern and responsive UI. - Type Safety: Fully implemented in TypeScript for a more reliable codebase.
- Node.js (v14 or newer)
- npm/yarn
- Clone the repository:
git clone https://github.com/samieoseh/task-manager-demo.git
cd task-manager-demo
npm install
npm run devThe application should now be running on http://localhost:5173.
Add a Task: Click on the "Add Task" button and fill in the task details in the modal form. Edit a Task: Click on the ellipsis icon on a task card and select "Edit" to modify task details. Delete a Task: Click on the ellipsis icon on a task card and select "Delete" to remove the task. Move a Task: Drag and drop tasks across columns to update their status.
Contributions are welcome! If you have an idea for improvement or have found a bug, please follow these steps:
Fork the repository.
Create a new branch (git checkout -b feature/amazing-feature). Make your changes. Commit your changes (git commit -m 'Add some AmazingFeature'). Push to the branch (git push origin feature/amazing-feature). Open a pull request.
Distributed under the MIT License. See LICENSE for more information.
Vite - Next Generation Frontend Tooling React - A JavaScript library for building user interfaces TypeScript - Typed JavaScript at Any Scale shadcn - For the UI components