Drag and Drop com React e Framer Motion

Utilize o React e o Framer Motion e construa uma playlist em que você poderá mudar a ordem das músicas utilizando drag and drop! O objetivo desse mini projeto é tanto descobrir como o Framer Motion facilita o uso de drag and drop bem como entender como funciona, por trás dos panos, a lógica de reordenação de uma lista drag and drop.

🤓 Antes de começar

Esse Mini Projeto já possui um template/boilerplate na raiz do repositório com o layout pronto para você focar apenas nas bibliotecas principais (React e Framer Motion).

Se você quer também treinar outras skills front-end como design e CSS, você poderá fazer o projeto do zero (basta apagar os arquivos e começar a partir daí).

🔨 Requisitos

A aplicação deverá ser mobile-first. Construa pensando em um celular, e não em um monitor.
Utilize as bibliotecas React + Framer Motion.
Crie o comportamento de "drag and drop":
- Quando o usuário realizar um clique longo (sem soltar o mouse), o card de música devera "descolar" da aplicação e ser reordenável.
- Quando o usuário "soltar" o clique, a música deverá permanecer em sua nova posição.
Utilize o componente Reorder do Framer Motion.

🔍 Dicas

Estude a biblioteca framer/motion, pois ela possui ferramentas poderosas de animação.
Estude particularmente o componente Reorder da biblioteca framer/motion - link
Estude a propriedade pointer-events do CSS.
Utilize o Devtools do seu navegador com alguma pré-definição de tela mobile. O Chrome, por exemplo, possui essa funcionalidade.

🎨 Design Sugerido

Temos uma sugestão de design no Figma. Entretanto, fique à vontade para usar sua criatividade e criar um design único.

Screenshot

Figma

🔗 Link do design

👉🏽 O que você irá praticar

Framer Motion

Listas reordenáveis com Drag and Drop
Componente Reorder

React

Manipulação de Estado
Renderização de Listas

CSS

Propriedade pointer-events

Pré-requisitos

HTML, CSS
JavaScript, React
TailwindCSS é recomendável, já que o template está estilizado com ele.