https://github.com/ar10dev/dragboard
A lightweight, responsive Kanban board application built with React, Redux Toolkit, and react-beautiful-dnd. This project provides a Trello-like task management interface with intuitive drag-and-drop functionality for organizing workflow and tracking project progress.
https://github.com/ar10dev/dragboard
kanban kanban-board productivity project react redux tailwindcss tools trello
Last synced: about 2 months ago
JSON representation
A lightweight, responsive Kanban board application built with React, Redux Toolkit, and react-beautiful-dnd. This project provides a Trello-like task management interface with intuitive drag-and-drop functionality for organizing workflow and tracking project progress.
- Host: GitHub
- URL: https://github.com/ar10dev/dragboard
- Owner: AR10Dev
- License: gpl-3.0
- Created: 2025-03-30T10:06:49.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-04-13T07:34:58.000Z (about 1 year ago)
- Last Synced: 2025-04-13T08:39:20.623Z (about 1 year ago)
- Topics: kanban, kanban-board, productivity, project, react, redux, tailwindcss, tools, trello
- Language: JavaScript
- Homepage:
- Size: 115 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 📋 DragBoard
A lightweight, responsive Kanban board application built with React, Redux Toolkit, and react-beautiful-dnd. This project provides a Trello-like task management interface with intuitive drag-and-drop functionality for organizing workflow and tracking project progress.
## ✨ Features
- **🔄 Intuitive Drag & Drop Interface**: Easily move cards between lists
- **📱 Responsive Design**: Works on desktop and mobile devices
- **🌓 Dark Mode Support**: Toggle between light and dark themes
- **💾 Persistent Storage**: Automatically saves your board state to localStorage
- **⚙️ CRUD Operations**: Create, read, update, and delete lists and cards
- **🏷️ Custom Labels**: Add labels to cards for better organization
- **🎨 Modern UI**: Clean, minimalist interface with smooth animations
## 🚀 Installation
```bash
# Clone the repository
git clone https://github.com/yourusername/DragBoard.git
# Navigate to the project directory
cd DragBoard
# Install dependencies
npm install
# or
yarn install
# or
bun install
```
## 🔧 Usage
```bash
# Start the development server
npm run dev
# or
yarn dev
# or
bun dev
# Build for production
npm run build
# or
yarn build
# or
bun run build
```
Once the development server is running, you can access the application at `http://localhost:5173/`.
## 💻 Technologies Used
- **⚛️ React**: UI library for building the user interface
- **🔄 Redux Toolkit**: State management
- **👆 react-beautiful-dnd**: Drag and drop functionality
- **🎨 Tailwind CSS**: Utility-first CSS framework for styling
- **⚡ Vite**: Fast build tool and development server
## 📁 Project Structure
```
src/
├── app/
│ └── store.js # Redux store configuration
├── components/
│ ├── Board/ # Board components
│ ├── List/ # List components
│ ├── Card/ # Card components
│ └── UI/ # Reusable UI components
├── features/
│ ├── board/ # Board state management
│ └── theme/ # Theme state management
├── utils/ # Utility functions
├── App.jsx # Root component
└── index.jsx # Entry point
```
## 🌟 Features in Detail
### 📝 Lists
- Create new lists
- Rename existing lists
- Delete lists with confirmation dialog
- Automatic scrolling for many lists
### 📑 Cards
- Create new cards within any list
- Edit card content and labels
- Move cards between lists via drag and drop
- Delete cards with confirmation dialog
### 🎭 Theming
- Light and dark mode support
- System preference detection
- Persistent theme preference
## 👥 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## 📜 License
This project is licensed under the GNU General Public License v3.0 - see the [LICENSE](LICENSE) file for details.
## 🙏 Acknowledgments
- [React Beautiful DnD](https://github.com/atlassian/react-beautiful-dnd) for the drag and drop functionality
- [Tailwind CSS](https://tailwindcss.com/) for the styling system
- [Redux Toolkit](https://redux-toolkit.js.org/) for state management