Clone Trello Board | Frontend Coding Challenge | Machine Coding Round
@Yomesh Gupta

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

Trello Board Overview Image

  1. Card Buckets

Card Buckets

  1. Cards

Collection of Cards

  1. Board Menu

Board Menu

Change Background Color Menu: Board Change Background Color Menu

Card Filtering: Card Filtering View

User Invitation Menu

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.
  1. Header
  2. Core functionality of dragging a card to another bucket
  3. Clicking on invite CTA should open the invitation form as a modal
  4. Create lists
  5. Create tasks
  6. Reorder, drag & drop tasks
  7. Reorder, drag & drop lists
  8. Update tasks, lists
  9. 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