Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/crist-pereyra/kanban-board
Kanban is a simple board project built with React, leveraging dnd-kit for drag-and-drop functionality and zustand for state management. Ideal for learning or as a foundation for more complex task management tools.
https://github.com/crist-pereyra/kanban-board
dnd-kit react tailwindcss zustand
Last synced: about 11 hours ago
JSON representation
Kanban is a simple board project built with React, leveraging dnd-kit for drag-and-drop functionality and zustand for state management. Ideal for learning or as a foundation for more complex task management tools.
- Host: GitHub
- URL: https://github.com/crist-pereyra/kanban-board
- Owner: crist-pereyra
- Created: 2024-05-19T23:41:01.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-06-29T01:15:58.000Z (4 months ago)
- Last Synced: 2024-06-29T02:28:45.046Z (4 months ago)
- Topics: dnd-kit, react, tailwindcss, zustand
- Language: TypeScript
- Homepage: https://kanban-board-beta-three.vercel.app/
- Size: 350 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Kanban Board 📝
## 🌐 Live Demo
Explore the live demonstration of the project: [kanban-board](https://kanban-board-beta-three.vercel.app/)
Welcome to the **Kanban Board** project! This is a modern, intuitive, and feature-rich Kanban Board built with the following awesome technologies:
- ⚡ **Vite** for blazing fast project setup and development
- ⚛️ **React** with **TypeScript** for a robust and scalable frontend
- 🎨 **Tailwind CSS** for beautiful and customizable UI components
- 🖱️ **dnd-kit** for smooth and responsive drag-and-drop functionality
- 🐻 **Zustand** for simple and efficient state management
## 🚀 Getting Started
Follow these steps to get the project up and running on your local machine.
### Prerequisites
- [Node.js](https://nodejs.org/) (version 14 or later)
- [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)
### Installation
1. **Clone the repository**
```bash
git clone https://github.com/crist-pereyra/kanban-board.git
cd kanban-board
```
2. **Install dependencies**
```bash
npm install
```
### Running the Development Server
Start the development server with the following command:
```bash
npm run dev
```
Open your browser and navigate to http://localhost:5173 to see the Kanban Board in action!
## 📂 Project Structure
Here's an overview of the project's structure:
```php
kanban-board/
├── public/ # Public assets
├── src/ # Source code
│ ├── assets/ # Static assets
│ ├── components/ # React components
│ ├── hooks/ # Custom hooks
│ ├── icons/ # Icons
│ ├── stores/ # Zustand store
│ ├── App.css # Styles
│ ├── App.tsx # Main App component
│ ├── index.tsx # Entry point
├── .gitignore # Git ignore file
├── index.html # HTML template
├── package.json # Project metadata and scripts
├── tailwind.config.js # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
└── vite.config.ts # Vite configuration
```
## 🛠️ Key Features
- **Drag and Drop**: Effortlessly move tasks between columns using dnd-kit.
- **State Management**: Efficient and minimal state management with Zustand.
- **Type Safety**: Benefit from TypeScript's type-checking to minimize errors
## 📜 License
This project is licensed under the MIT License.