View the project demo.
Clone this repo in your machine.
Run npm start
to view this app locally.
- Creating a data store with an array of 'workers' to be displayed in the UI
- Displaying the stacked cards on the screen
- Implement a mechanism for dragging and dropping an item
- Animating or clearing the card from the screen on release of a drag
- Updating the data layer with the user's choice
- Improve the user feedback and animations
src/Workers.js
The data store with an array of stunt doubles.src/FindStuntDouble.js
The Wrapper for the app. It contains the logo, Card Deck, and the user guide icons at the bottom.src/Components/Card.js
Card component with an image of the stunt actor and the name text.src/Components/Deck.js
Make the Cards into Stack. Drag & Drop interaction happens here.
I used npm library react-draggable for the draggable card component.
I used node-sass for SCSS file.
I found some great libraries for animations.