Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/inviii/kanban
https://github.com/inviii/kanban
Last synced: 11 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/inviii/kanban
- Owner: INVIII
- Created: 2024-05-31T10:47:31.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2024-05-31T10:57:42.000Z (8 months ago)
- Last Synced: 2025-01-08T05:13:06.729Z (11 days ago)
- Language: JavaScript
- Homepage: https://kanbantodo.vercel.app
- Size: 200 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Dynamic Todo List
This is a Dynamic Todo List application built with React. The application allows users to manage tasks by dragging and dropping cards between columns: TODO, IN PROGRESS, and COMPLETED. The application also features a "burn barrel" for deleting tasks.
## Table of Contents
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Folder Structure](#folder-structure)
## Features
- Drag and drop cards between columns
- Add new tasks
- Delete tasks by dragging to the burn barrel
- Responsive design
## Installation
1. Clone the repository:
```bash
git clone
cd dynamic-todo-list
```
2. Install the dependencies:
```bash
npm install
```
## Usage
1. Start the application:
```bash
npm start
```
2. Open your browser and navigate to `http://localhost:3000` to see the application in action.
## Folder Structure
```plaintext
Dynamic ToDo List/
├── public/
│ └── index.html
├── src/
│ ├── assets/
│ ├── components/
│ │ ├── AddCard.js
│ │ ├── Board.js
│ │ ├── BurnBarrel.js
│ │ ├── Card.js
│ │ ├── Column.js
│ │ ├── DropIndicator.js
│ │ └── DynamicTodo.js
│ ├── styles/
│ │ └── index.css
│ ├── utils/
│ │ └── constants.js
│ ├── App.js
│ ├── index.js
│ └── index.css
├── .gitignore
├── package.json
└── README.md
```
### Components
- `AddCard.js`: Component to add a new card to the TODO column.
- `Board.js`: Main board component that holds the columns.
- `BurnBarrel.js`: Component to delete cards.
- `Card.js`: Individual card component.
- `Column.js`: Column component that holds cards.
- `DropIndicator.js`: Indicator to show where cards can be dropped.
- `DynamicTodo.js`: Main Todo board wrapper component.
### Utilities
- `constants.js`: File to store default card data and other constants.
### Styles
- `index.css`: Custom styles for the TODO application.