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
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
Modals to add Catergory list or task items
Responsive on all mobile & ipad viewports
