Skip to content

Aplicação em Angular para criar uma lista de músicas de acordo com a temperatura de um local.

Notifications You must be signed in to change notification settings

eireneof/desafio-front-end

Repository files navigation

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

Angular badge Typescript badge Jasmine badge SASS badge

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é https://localhost:4200/ em seu navegador

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

Resultados

GIF da aplicação

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:

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:

GIF página listagem das recomendações

  • 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

GIF validações de input

  • 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.

GIF nome de cidade inválido

  • Responsividade:

GIF alterando a largura da aplicação



Made with ☕ & 💜 by eirene

About

Aplicação em Angular para criar uma lista de músicas de acordo com a temperatura de um local.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published