https://github.com/oldprojectss/drag-n-drop-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.
https://github.com/oldprojectss/drag-n-drop-app
jest reactjs typescript
Last synced: 2 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/oldprojectss/drag-n-drop-app
- Owner: oldProjectss
- Created: 2023-04-13T22:02:49.000Z (about 3 years ago)
- Default Branch: dev
- Last Pushed: 2023-04-17T03:33:18.000Z (about 3 years ago)
- Last Synced: 2023-11-01T00:25:36.613Z (over 2 years ago)
- Topics: jest, reactjs, typescript
- Language: TypeScript
- Homepage: https://dropzone.pages.dev
- Size: 255 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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](#about-project)
- [🛠Built With](#built-with)
- [Tech Stack](#tech-stack)
- [Key Features](#key-features)
- [🚀 Live Demo](#live-demo)
- [💻 Getting Started](#getting-started)
- [Setup](#setup)
- [Prerequisites](#prerequisites)
- [Install](#install)
- [Usage](#usage)
- [Deployment](#deployment)
- [👥 Author](#authors)
# 📖 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.
The app is built with the following tech stack:
Client
> 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.
> You can view a live demo of the React Drag and Drop To-Do App by following this link:
- [Live Demo Link](https://dropzone.pages.dev)
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](https://nodejs.org/en/download/).
2- You can check if you have it installed by running the following command in your terminal:
```sh
node -v
```
### Setup
Clone this repository to your desired folder:
```sh
git clone git@github.com:Ismailco/drag-n-drop-app.git
cd drag-n-drop-app
```
### Install
Install this project with:
```sh
npm install
```
### Usage
To run the project, execute the following command:
```sh
npm run dev
```
### Deployment
You can deploy this project using:
```sh
npm run build
```
- GitHub: [@ismailco](https://github.com/ismailco)
- Twitter: [@ismailcourr](https://twitter.com/ismailcourr)
- LinkedIn: [Ismail courr](https://linkedin.com/in/ismailcourr)