https://github.com/ganeshh123/kanban-board

A Trello-Style Kanban Task Manager that runs in the browser, built with React.
https://github.com/ganeshh123/kanban-board

board dnd drag drop kanban list localstorage react task todo trello trello-clone

Last synced: about 1 month ago
JSON representation

A Trello-Style Kanban Task Manager that runs in the browser, built with React.

• Host: GitHub
• URL: https://github.com/ganeshh123/kanban-board
• Owner: ganeshh123
• License: mit
• Created: 2021-01-05T09:42:56.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2021-01-25T13:39:28.000Z (about 4 years ago)
• Last Synced: 2024-12-24T05:32:04.336Z (about 1 month ago)
• Topics: board, dnd, drag, drop, kanban, list, localstorage, react, task, todo, trello, trello-clone
• Language: JavaScript
• Homepage: http://nesh.gq/kanban-board/
• Size: 527 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Kanban Board

A Trello-Style Kanban Task Manager that runs in the browser, built with React.

![React Kanban Board](./assets/demo.png)

## Release

The latest release can be found at  

https://ganeshh123.github.io/kanban-board/

## Features

- Create Multiple Lists of Tasks

- Drag and Drop Tasks to move them through stages between lists

- Editable List and Task Names

- Persistent Client Side Storage

## Building

There is no need to build. The app uses script tags to load in React, React Beautiful DND, Babel and Skeleton CSS.

### Running Locally

1. Download or clone this repository

2. Run index.html as a server  

### Web Server

Needs to be run as a server locally, as Babel cannot access the file system. I recommend using [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) for VS Code. Can be hosted online as a regular page.

### Technology Stack

- [React](https://github.com/facebook/react) for List and Task Components

- [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd) for draggable tasks

- Javascript Browser [Local Storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)

- Transpiled with [Babel](https://babeljs.io/)

- Minor Styling from [Skeleton](http://getskeleton.com/)

## Credits

- [Background Image](https://unsplash.com/photos/zxcBR3zNc7I)