https://github.com/ret2hell/tasks-management-app
https://github.com/ret2hell/tasks-management-app
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/ret2hell/tasks-management-app
- Owner: Ret2Hell
- Created: 2025-02-06T17:02:38.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-03-23T05:12:27.000Z (about 1 year ago)
- Last Synced: 2025-03-23T06:19:53.744Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://tasks-management-app-delta.vercel.app
- Size: 197 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next.js Trello Clone
A simple Trello-like task management application built with Next.js. This project allows users to create new tasks, update their statuses, and easily rearrange them using drag-and-drop functionality—all enhanced with smooth animations and modern UI components.
## Features
- **Task Management:** Add new tasks and update their statuses.
- **Drag and Drop:** Rearrange tasks and change their status effortlessly using DND Kit.
- **Smooth Animations:** Enjoy fluid UI transitions with autoAnimate during drag-and-drop or reordering actions.
- **Modern UI Components:** Built with shadcn components for a sleek and intuitive interface.
- **Global State Management:** Efficiently manage your app’s state using Zustand.
## Technologies Used
- **Next.js:** A React framework for building server-rendered and statically generated applications.
- **Zustand:** A lightweight and intuitive state management library.
- **DND Kit:** A modern toolkit for implementing drag-and-drop interactions.
- **autoAnimate:** A library that provides automatic animations for adding, removing, and reordering elements.
- **shadcn:** Used for crafting high-quality UI components.
## Installation
1. **Clone the repository:**
```bash
git clone https://github.com/Ret2Hell/Tasks-Management-App.git
cd Tasks-Management-App
```
2. **Install dependencies:**
```bash
npm install
```
3. **Run the development server:**
```bash
npm run dev
```
## Usage
- **Adding Tasks:** Use the input field to create a new task.
- **Updating Status:** Drag tasks between columns to update their status.
- **Reordering:** Reorder tasks by dragging them or using move up/down icons.
- **Deleting Tasks:** Remove tasks by clicking the delete icon.
## Acknowledgements
Special thanks to the developers of [Zustand](https://github.com/pmndrs/zustand), [DND Kit](https://github.com/clauderic/dnd-kit), [autoAnimate](https://github.com/formkit/auto-animate), and [shadcn](https://github.com/shadcn/ui) for their excellent tools and libraries.