dogapp

ORGANIZAÇÃO DO PROJETO

URL para visualização online: https://felipe-dr.github.io/dogapp/index.html
Repositorio para validação: https://github.com/Felipe-DR/dogapp/

! IMPORTANTE:

1. Na pasta "src" e todas as suas subpastas constam os arquivos utilizados no desenvolvimento do projeto, ou seja, esses não estão minificados e otimizados. (Recomendado a utilizar essa pasta para validação do código)
2. Na pasta "build" / "prod" constam os arquivos em sua versão final, ou seja, esses estão otimizados e minificados

METODOLOGIAS CONSIDERADAS

CSS

1. Mobile First
2. Responsive Web Design
3. Css Grid Layout
4. Arquiterua Smacss
5. Metodologia BEM

JS

1. Versão ES6+
2. Classes com separação de responsabilidades
3. Js module ES6

GULP: Automatização, Otimização e Compatibilidade

1. Html minificado
2. Css minificado e Prefixado para aumentar a compatibilidade entre os navegadores
3. Remoção de código css não utilizado por meio do Css purge
4. JavaScript minificado e utilização do Babel para transpilar o código Js em versões compatíveis com demais browsers
5. Utilizado o whatwg-fetch no JS para tornar a requisição fetch compatível com demais browsers que não possuem essa API
6. Ícone em SVG otimizado

RECURSOS UTILIZADOS

• Html5
• Css3
• Sass
• JavaScript (Vanilla JS)
• Svg
• Google Fonts
• Gulp

OUTRAS OBSERVAÇÕES

1. Foi possível notar que ao fazer uma requisição ao site "https://dog.ceo/dog-api/" em alguns itens era retornado mais de uma imagem para uma mesma raça de cachorro. Dessa forma, foi adicionado um método random nessa lista para sortear e variar as imagens retornadas. Por esse motivo, ao recarregar os dados do local storage, somente a respeito da imagem, também será sorteada, mas o nome da raça do cachorro será carregado normalmente pela configuração que foi salva anteriormente.