- Padronização do código:
- ESlint
- Prettier
- Commit customizado
- Para consumir serviços de terceiros:
- Axios (Consumindo serviço do Spotify)
- No desenvolvimento:
- Typescript
- ES Next
- React
- Router - Suspense/Lazy
- Hooks
- Context API
- Reducer
- Client (Consumindo serviço do Spotify)
- Tailwind CSS
- Para melhorar a experiência do usuário:
- Theme Dark/Light
- Drag and Drop (Permitindo alterar o posicionamento dos itens da lista de resultados)
- Layout responsivo
- Notificação (Ao favoritar uma música)
- Reprodução de aúdio (Ao selecionar uma música)
- Armazenamento de informações no Local Storage (Manter a playlist do usuário atualizada)
Ao clicar no botão, será feito um redirecionamento para que o usuário entre com a sua conta do Spotify
- Fazer login no Spotify for Developers https://developer.spotify.com/dashboard/login
- Criar um novo APP
- Clicar em "Editar configurações"
- Adicionar em "Redirect URIs" o endereço de callback para sucesso ou erro ao tentar autenticar. Coloque como exemplo:
http://localhost:3000
- Fazer um clone deste repositório
- Executar
npm install
ouyarn install
- Crie uma cópia do arquivo
.env.sample
e nomeia como.env
- Copie o
Client ID
e oClient Secret
localizados no item 3 - Preencha os campos em
.env
// Preencha com Client ID conforme Item 8
REACT_APP_CLIENT_ID = <Client ID>
// Preencha com Client Secret conforme Item 9
REACT_APP_CLIENT_SECRET = <Client Secret>
// Preencha com endereço de callback adicionado conforme Item 4
REACT_APP_REDIRECT_URL = http://localhost:3000
// Nesta aplicação, o necessário como escopo é este Para mais informações acesse a documentação do Spotify
REACT_APP_SCOPES = user-read-private
// Nome da Key armazenada no Local Storage para manter o Token, tempo de expiração e Token para Refresh
REACT_APP_AUTH_STORAGE = @app/spotifyAuth
- Execute
npm start
ouyarn start
- Acesse http://localhost:3000