O projeto consiste em um desenvolvimento do aplicativo Web e Mobile CLIMATEMPO, onde é possível efetuar o login e pesquisar o clima em determinada região, com regra de autocomplete e renderização de cards com detalhamento do tempo por data. O projeto em si tem como baixa/média escalabilidade no qual foi adaptado a algumas práticas de Clean Code para otimizar o resultado.
Deploy do Projeto Front: https://meteorology-app.netlify.app/
Deploy da API : https://api-weather-search.herokuapp.com/locales
Para inicializar o projeto baixado pelo Github, primeiro deve executar no terminal o npm install e em seguida executar npm start ou pelo Docker criando a imagem.
O projeto teve como arquitetura de desenvolvimento, React + Typescript, no qual foi implementado os componentes reutilizáveis com tipificação dos seus atributos para manter o padrão do projeto. Foi utilizado como teste dos componentes a biblioteca Storybook para garantir a estilização seguindo o Figma e sua funcionalidade, seria implementado também o teste utilizando Jest, que logo será incluído. A estilização foi criada utilizando o styled-components seguindo o Design System. A api foi desenvolvida em NodeJs, centralizando o banco de dados em um único deploy, fazendo assim o tratamento dos endpoints. No teste de usabilidade, vi que para garantir uma experiência mais fácil teria que reformular alguns padrões, dentre eles a exibição dos cards em carousel, utilizando a lib REACT-SLICK. O autocomplete foi criado com base nos conhecimentos básicos de javascript. As rotas foram autenticadas utilizando o localStorage, sendo necessário o registro na tela de Login. Por fim, foi configurado o Docker na raiz do projeto, como solicitado no teste.
(OBS: A arquitetura backend da imagem é antiga, no qual foi realocado para API externa.)
• NPM • REACT-ROUTER-DOM • STYLED-COMPONENTS • STORYBOOK : https://storybook.js.org/docs/react/get-started/install/ • AXIOS : https://axios-http.com/ptbr/docs/intro • REACT-SLICK: https://react-slick.neostack.com/
O protótipo foi desenvolvido com base no exemplo informado no readme e recriado utilizando o Figma, mantendo um Design System para o projeto.
