/trello-task-board

A personal Task Management board like JIRA with Drag & Drop feature: React Js, Modals, HTML Drag-drop API

Primary LanguageJavaScript

Dependencies/Libraries used

React JS(UI), Bootstrap3.7,
jQuery3.3, Fontawsome, MaterializeCSS, npm

The following cdns are included in index.html via scipt/links Bootstrap3.7, jQuery3.3, Fontawsome, MaterializeCSS

Steps to create Project & add all dependencies in Windows OS

Install nodejs npm
From the step by step Guide described here Installation of Node JS on Window

npm install create-react-app -g [react-app/YourAppName]
create-react-app trello-task-board
cd trello-task-board
npm start

Then open http://localhost:3000/ to see your app.
stop ctrl+c to add dependencies

Copy update package.json with package.json of this project and run "npm install"

replace src folder with my src folder to get code & resources

npm start
open http://localhost:3000/ to run app again.

Problem Statemnet and main Features

We want to implement a trello board which will help us keep track of cards categorised into lists. For example - in the above figure, we have two list Teams and Products. Each list can have any number of cards. For example, in the above figure Teams list has two cards.

Mandatory attributes of each card - title, desc and a cross(X) button to delete it.

A new list can be added to the board by pressing the ADD LIST button present on the right side of the board. Each list should have a Title, a cross(X) button to delete it and can have 0 or more cards. Deleting a list should delete all the cards present in that list.

A new card can be added to a list via a plus(+) button present at the bottom of each list(inside a list).

A card can be dragged from one list and dropped on the second list to make it part of the second list. If it is dropped outside the second list, it comes back to the list from which it was picked up.

Note1 - Whenever a card is dropped on any list, it should become the first card of that list. There is no upper limit on the number of lists and cards which can be added to the board.

Note2 - On refreshing the page, the existing lists and cards on the page should remain intact

image

Extra features implemented or points taken care of

  • Modals to accept infprmation from users like Task Name, Description etc.
  • used React 17 having impeccable performance
  • Implemented Code re-use techniques
  • Added Fallback UI to handle negative cases for No Category list & No task items
  • Added error handling and validation check practices
  • Modular code structure

Screeshots

image

Modals to add Catergory list or task items image

image

image

Responsive on all mobile & ipad viewports pjimage