Clone Trello Board | Frontend Coding Challenge | Machine Coding Round

In this coding challenge, you need to build Trello Board-like UI. It would be best if you created a screen that looks exactly like a Trello board. You can implement this question in as much detail as you would like.

Demo: https://www.youtube.com/watch?v=ifhqOYXaT7Q

Some of the UI requirements/mockups:

1. Trello Board

2. Card Buckets

3. Cards

4. Board Menu

Change Background Color Menu:

Card Filtering:

Board Menu should have the following functionality

• List of the members who are added to the board: Static List for now
• Invitation: Ability to send invitations to users. Mock the form submission for now.
• Updating Background Color: Ability to change the background colour of the board.
• Filter Cards: Ability to filter cards based on search terms.

5. Header
6. Core functionality of dragging a card to another bucket
7. Clicking on invite CTA should open the invitation form as a modal
8. Create lists
9. Create tasks
10. Reorder, drag & drop tasks
11. Reorder, drag & drop lists
12. Update tasks, lists
13. Delete tasks, lists

Feel free to add more functionalities and play around with the UI.

Submissions

Start the timer, use the file management system on the left to write modular code, implement every functionality, and share it on LinkedIn & Twitter and tag @devtoolstech @yomeshgupta