Details

1. You are creating a trello or notion-like board with two columns
2. both columns will start with 4 cards of fixed width, and random height and color
3. Every time you click and drag a card, the card will float with your mouse
4. When you are dragging there will be a “dark” layer with light area around your mouse (consult the video to see what this looks like); don’t use canvas or svg for this.
5. When dragging, if you’re near an area between two cards in the other columns there will be a blue highlight that will expand into the size of the card you are dragging (animate this part)
6. The highlight and card being dragged will be “above” the dark layer not below it.
7. Every other card will be below the dark layer.
8. The card you are dragging should have an opacity of 90%
9. If you drag and let go when the blue highlight is active, the card you are dragging will be placed at that location
10. If you drag and let go when the blue highlight is not active, the card will return to its original position
11. You cannot drag and drop into the same column, only the other column.

(Common) Rules

1. Don’t make change to the package.json file provided int he starter code.
2. Don’t use an extra libraries from npm.
3. Don’t use SVG or Canvas; prefer to keep it only React to render HTML and CSS/Tailwind

Evaluate Yourself

• [ ] (1/6) you have cards being shown
• [ ] (2/6) you are being able to drag the cards
• [ ] (3/6) you have successfully implemented darkness and light without canvas or svg
• [ ] (4/6) you are being able to activate the blue highlight when hovering
• [ ] (5/6) when you drop a card, it is being placed at the right position.
• [ ] (6/6) you completed the little bells and whistles like random color, random sizes, and automatic return to original position.