Este é um projeto pessoal desenvolvido em NextJs integrados a alguns frameworks para um desafio pessoal.
O projeto consiste em um web app que permite ao usuário criar uma imagem de Máquina do Tempo idêntica a criada pelo recurso do app Spotify, mas totalmente personalizável pelo usuário. Junto dela, aprimorei uma ferramenta de criação de cards com letras que já havia feito antes, também no mesmo design do spotify, mas sem as limitações de linhas e tamanho.
A base do app é feita em react utilizando typescript e estruturada em NextJs. A estilização é feita com Tailwind CSS e um pouco de CSS puro.
A integração com a Spotify Web Api permite que o usuário busque items da própria base do spotify, facilitando o princípio da aplicação de mostrar os nomes e imagens de artistas e músicas.
O download da imagem é possível utilizando o pacote html-to-image, que possui ótimas funcionalidades para facilitar esse tipo de ação.
Também é possível que o usuário faça upload de qualquer imagem para ser utilizada, isso foi montado com ferramentas do pacote @vercel/blob.
Através do pacote extract-colors foi possível extrair as cores mais presentes nas imagens (tanto do próprio spotify quanto enviadas pelo usuário).
Os ícones da aplicação são da biblioteca Lucide-react, já as animações e principalmente o componente de lista onde é possível reordenar músicas e artistas foram montadas com framer-motion.
Para clonar este repositório e testar você precisa de seguir alguns requisitos:
- Ter um pouco de familiaridade com Nextjs
- Criar um app no Spotify for Developers
- Criar um projeto vercel para usar o @vercel/blob
Primeiro, você precisa clonar este repositório para o seu dipositivo através do terminal:
git clone https://github.com/kaizinbr/spotfaker.git
Depois, instale os comandos com npm install, e com os apps da Web Api do Spotify e Vercel Blob criados, você precisa copiar as environment variables para o arquivo .env.exemplo e renomeá-lo apenas para .env.
BLOB_READ_WRITE_TOKEN=seu_token_aqui
SPOTIFY_CLIENT_ID=seu_ID_Aqui
SPOTIFY_CLIENT_SECRET=seu_secret_aqui
SPOTIFY_REFRESH_TOKEN=esse_pode_ser_uma_string_aleatória_como_txt_4th_gen_leaders
Concluídos os passos, basta executar npm run dev ou npm run build e o projeto começará a rodar em http://localhost:3000/