Skip to content

dindustack/flexilist

Repository files navigation

Drag-and-Drop Todo Board App

Overview

Welcome to the Drag-and-Drop Todo Board App! This application is built using TypeScript, Tailwind CSS, Vite, and the powerful Dnd-Kit library for creating a seamless drag-and-drop experience. Organize your tasks effortlessly, enhance collaboration, and boost productivity with the intuitive Todo board.

Features

  • Drag-and-Drop Interface: Effortlessly manage tasks by dragging and dropping them across different sections on the Todo board.

  • Multiple Containers: Enjoy the flexibility of using multiple containers to organize tasks based on different categories or projects.

  • TypeScript: Benefit from the enhanced developer experience and code safety provided by TypeScript.

  • Tailwind CSS: Stylish and responsive user interface with the utility-first approach of Tailwind CSS.

  • Vite: Fast and efficient development with Vite, a next-generation frontend build tool.

Getting Started

Follow these steps to set up and run the Drag-and-Drop Todo Board App on your local machine:

  1. Clone the Repository:

    git clone https://github.com/dindustack/flexilist.git
  2. Navigate to the Project Directory:

    cd flexilist
  3. Install Dependencies:

    yarn
  4. Run the App:

    yarn dev
  5. Open in Browser: Visit http://localhost:5173 in your browser to access the Todo Board App.

Usage

  • Creating a New Section:

    • Click the "Add New Board" button to add a new section to your Todo board.
  • Managing Tasks:

    • Drag tasks between sections.
    • Create tasks within each section by clicking the "Add New Task" button.

Technologies Used

  • TypeScript
  • Tailwind CSS
  • Vite
  • Dnd-Kit

Happy organizing! 🚀