React Drag and Drop To-Do App

A React app created with Vite, using Typescript, Tailwindcss for styling, and react-beautiful-dnd library for drag and drop functionalities. The app has two drag and drop areas. When a user adds tasks to the Done area and clicks save, the tasks are removed from there and added to a table.

📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Install
  • Usage
  • Deployment
• 👥 Author

📖 React Drag and Drop To-Do App

The React Drag and Drop To-Do App is a simple to-do app created with React and the react-beautiful-dnd library. The app provides a user-friendly interface that enables the user to add tasks to the "To-Do" area, drag and drop them to the "Done" area, and save completed tasks to a table. The app is built using Typescript and styled with Tailwindcss.

🛠 Built With

Tech Stack

The app is built with the following tech stack:

Client

• React.js
• Vite
• Tailwindcss
• react-beautiful-dnd

Key Features

The key features of the React Drag and Drop To-Do App are:

• Drag and Drop functionality: The app uses the react-beautiful-dnd library to enable the user to drag and drop tasks from the "To-Do" area to the "Done" area.
• Save completed tasks: The app allows the user to save completed tasks to a table, which is displayed below the "Done" area.
• Responsive design: The app is designed to be responsive and works well on different screen sizes.

🚀 Live Demo

You can view a live demo of the React Drag and Drop To-Do App by following this link:

• Live Demo Link

💻 Getting Started

To get a local copy up and running, follow these steps:

Prerequisites

In order to run this project you need:

• Node.js installed on your computer.

1- you can install it from here.
2- You can check if you have it installed by running the following command in your terminal:

  node -v

Setup

Clone this repository to your desired folder:

  git clone [email protected]:Ismailco/drag-n-drop-app.git
  cd drag-n-drop-app

Install

Install this project with:

  npm install

Usage

To run the project, execute the following command:

  npm run dev

Deployment

You can deploy this project using:

  npm run build

👤 Author

• GitHub: @ismailco
• Twitter: @ismailcourr
• LinkedIn: Ismail courr

(back to top)