Consiste em basicamente em uma listagem de países a partir de um determinado continente, sendo que essa listagem pode ser personalizada a partir de seus filtros. Para a visualização, acesse: Habitue - Vercel
Para começar o projeto, foi feito um pequeno protótipo, simples, para ter como base durante o desenvolvimento.
Foi feito um Style Guide para padronizar desde as cores usada, até os tamanhos (fontes e breakpoints)
-
Style Guide
-
Protótipo
- Link para acesso: Figma Habitue
Para a construção do projeto foi utilizado:
- JavaScript
- Vue 3
- Vue Router
- VueX
- Sass / Scss
Devido correria do dia a dia, acabei não tendo muito tempo para focar 100% no projeto, mas dei meu melhor e estarei em constante evolução.
Nunca usei GraphQL para consumo dos dados, apenas API's Rest.
Vejo como de extrema necessidade, sempre ter em mente possíveis melhorias, tanto a nível de código, quanto em layout, já tendo mapeado possíveis pontos que são podem gerar algum erro.
-
Detalhes do pais Devido o uso do Vue Router, um ponto bacana e que será feito posteriormente é ter uma tela onde será exibida as informações do país selecionado.
-
Debounce Na hora de buscar um pais, é interessante e tem um ganho computacional interessante, portante é algo a se colocar.
-
Responsividade A responsividade não foi a das melhores, principamente o uso do
truncateText, não sendo usado de acordo com o tamanho da tela. -
Notify's A filtrar ou limpar filtros, acho interessante mostrar para o usuário que foi realizado com sucesso a sua solicitação.
-
Seleção de outros idiomas Ao selecionar outros idiomas, acho interessante limpar a listagem, pois caso na listagem tenha muitas linguagens, acaba ficando imperceptível que foi escolhida uma.
-
Validação de paise no modal Por algum motivo, a validação do modal na caso clique pra avançar sem definir continente não está funcionando perfeitamente
Projeto realizado com carinho por Luis Felipe Juzo