SearchMusic - Projeto Angular - Clima e Música ⛅ 🎶 ✨

Este projeto tem como objetivo demonstrar como consumir APIs externas para obter informações sobre o clima e recomendar músicas com base na temperatura de uma determinada localização.

Tecnologias

Como utilizar

Você pode rodar o projeto localmente ou acessar a página.

Para rodar o projeto localmente:

1. Clone este repositório em sua máquina local
2. Execute npm install para instalar todas as dependências
3. Execute ng serve para iniciar a aplicação
4. Navegue até http://localhost:4200/ em seu navegador

OBS: é necessário ter o Node.js e o Angular CLI instalados para rodar localmente

Resultados

Funcionalidades

A aplicação permite que o usuário:

• Insira uma cidade ou coordenadas geográficas (latitude e longitude) para obter informações sobre o clima e recomendações musicais com base na temperatura atual.

• Visualize uma lista de músicas recomendadas, com informações sobre a temperatura, cidade e categoria das músicas.

• Salve uma lista de músicas no storage do navegador, com informações sobre a temperatura, cidade, país, data da pesquisa e categoria das músicas Visualize uma lista de músicas salvas com suas respectivas informações e a opção de excluí-las

APIs utilizadas

Para este projeto, foram utilizadas as seguintes APIs:

• Geocoding API - obter as cordenadas geográficas da cidade informada
• Current weather data - obter informações sobre o clima a partir de coordenadas geográficas
• Deezer API - listas de músicas

Diferenciais

• Deploy da aplicação
• Design responsivo
• Validações nos inputs
• Não foi utilizada nenhuma biblioteca de estilos, os componentes foram feitos do zero
• Loading entre as chamadas dos serviços
• Modal de erro em casos de erro nos serviços

Futuras implementações

• Botão de play para que o usuário consiga escutar um preview das músicas
• Coobertura de testes unitários

Mais resultados

• Usuário deletando as listas:

• Algumas validações:
  • Nome da cidade não pode conter números
  • Se latitude for preenchida, longitude também deve ser preenchida e vice e versa
  • Latitude precisa ser um valor válido entre -90 e +90
  • Longitude precisa ser um valor válido entre -180 e +180
  • Quando há algum erro ou os campos estão vazios, o botão fica bloqueado

• Nome de cidade inválida:
  • Caso o usuário fornecça um nome de cidade inválido, o fluxo da aplicação é interrompido e um erro é setado no input.

• Responsividade:

---

Made with ☕ & 💜 by eirene