Skip to content

Ret2Hell/Tasks-Management-App

Repository files navigation

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:

    git clone https://github.com/Ret2Hell/Tasks-Management-App.git
    cd Tasks-Management-App
  2. Install dependencies:

    npm install
  3. Run the development server:

    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, DND Kit, autoAnimate, and shadcn for their excellent tools and libraries.

Releases

No releases published

Packages

 
 
 

Contributors