https://github.com/imoamo/react-dnd
React DND Swimlane UI is a task management interface using React and Redux, with drag-and-drop functionality and block previews. It helps visualize and manage tasks across different stages efficiently.
https://github.com/imoamo/react-dnd
react reactdnd redux
Last synced: 9 months ago
JSON representation
React DND Swimlane UI is a task management interface using React and Redux, with drag-and-drop functionality and block previews. It helps visualize and manage tasks across different stages efficiently.
- Host: GitHub
- URL: https://github.com/imoamo/react-dnd
- Owner: imoamo
- Created: 2024-08-13T11:57:02.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-11T07:40:45.000Z (over 1 year ago)
- Last Synced: 2024-12-30T22:44:17.277Z (about 1 year ago)
- Topics: react, reactdnd, redux
- Language: JavaScript
- Homepage: https://luminous-mousse-react-dnd.netlify.app/
- Size: 21.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🏊♂️ React DND Swimlane UI
This project is a dynamic **Swimlane UI** built with **React** and **Redux**. It showcases a drag-and-drop interface where tasks (blocks) can be moved across different stages (lanes), with features including data entry during transitions, transition history tracking, and a block preview with detailed information.
## ✨ Features
- **Drag-and-Drop Functionality**: Move blocks between lanes seamlessly using `react-beautiful-dnd`.
- **Configurable Lanes**: Add or remove lanes dynamically based on your project's needs.
- **Data Entry Workflow**: Prompt users to provide necessary information during block transitions.
- **Block Preview**: Click on any block to view detailed information and transition history.
- **Transition History**: Track the journey of each block across different lanes with time-stamped history.
- **Top-Level Filters**: Filter blocks based on specific attributes or search terms.
## 🚀 Live Demo
You can view the live demo of this project [https://luminous-mousse-react-dnd.netlify.app/](#).
## 🛠️ Tech Stack
- **React.js**
- **Redux**
- **react-beautiful-dnd** for drag-and-drop functionality
- **CSS** for styling
## 🖼️ Screenshots
### Swimlane UI
](https://github.com/user-attachments/assets/5763beed-91e4-4c29-9355-ce0637668696)
)
### Block Preview with Transition History
](https://github.com/user-attachments/assets/67c9ef32-cb88-477e-897d-c62c9dc2bada)
)
## 💻 Getting Started
### Prerequisites
Before you begin, ensure you have the following installed:
- [Node.js](https://nodejs.org/)
- npm or yarn
### Installation & Setup
1. Clone the repository:
```bash
git clone https://github.com/imoamo/React-DND.git
```
2. Navigate to the project directory:
```bash
cd React-DND
```
3. Install the dependencies:
```bash
npm install
# or
yarn install
```
4. Start the development server:
```bash
npm run dev
# or
yarn dev
```
## 🏗️ Project Structure
```plaintext
├── public
├── src
│ ├── components
│ │ ├── BlockPreview.jsx
│ │ ├── DataEntryForm.jsx
│ │ ├── Swimlanes.jsx
│ │ └── ...
│ ├── redux
│ │ ├── reducers
│ │ │ ├── lanesReducer.js
│ │ │ ├── blocksReducer.js
│ │ │ ├── filterReducer.js
│ │ └── ...
│ ├── App.js
│ └── index.js
└── ...