yashpriyam / react-trello-demo

Created with CodeSandbox

Home Page:https://codesandbox.io/s/github/yashpriyam/react-trello-demo

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React Trello Demo

It is a trello like tool which allows to create lists and then cards inside the lists. You can add/delete lists and cards. You can also drag and drop cards across lists. All the changes are saved across refreshes.

Readme Card

Live Tool

Deployed Link

Project Demo

Features

  • Add List Button: To add a new Cards List.
  • Remove List Button: To remove the Cards List. Present inside the Cards list and deletes all the cards present in the crad list as well.
  • Card List Name Input: Is Auto save, value preserved on refresh. Default value set to: "CardList". Can remove the default value and fill in any name.
  • Add Cards (+) Button: To add a new Card to the Cards List. Add the card at the bottom of the list. Can add any number of cards to a list.
  • Remove Card Button: To remove a Card. present on each card. Deletes the card from the list.
  • Drag And Drop: All the cards can be dragged and dropped to any other list.
  • Title and Description: Title and Description can be added to each card, they are saved as typed and their values are preserved across refreshes.

The tool allows refreshing the page and on page refresh the content is preserved as is in a JSON format.

Libraries and Frameworks used

  • React.js
  • ES6
  • react-uuid

Liked the tool? Want to contribute? For getting started with the codebase:

The application uses es6.

$ git clone https://github.com/yashpriyam/react-trello-demo
$ npm install
$ npm start

About

Created with CodeSandbox

https://codesandbox.io/s/github/yashpriyam/react-trello-demo


Languages

Language:JavaScript 66.2%Language:CSS 17.7%Language:HTML 16.1%