O objetivo deste desafio era construir uma aplicação sem uso de frameworks (Ex: React, Angular entre outros) de acordo com um layout responsivo. Para que o projeto funcione como o esperado, existia a necessidade de integrar com uma API que aceita três paramêtros.

O esperado é que os selects fossem integrados entre si para trazer a lista de plantas dinamicamente, conforme a combinação das opções.

Com estas informações o aplicativo foi construido usando CustomEvents no componente select para cumprir os requisitos mencionados acima.

A partir disso, são reunidos todas as opções selecionadas pelo usuário em um estado local, e quando todos os items obrigatórios(paramêtros utilizados pela API) são preenchidos, uma request é enviada para o serviço fornecido.

Após obter a resposta, é construído a grade de produtos que é exibida para o usuário.

Em casos que nenhuma resposta é retornada pelo serviço, é exibido uma "tela" de nenhum item encontrado.

O bundle do projeto é gerado utilizando ParcelJS, para ve-lo funcionando execute o seguinte comando em seu terminal:

yarn start

• CSS: Utilizado pré-processador SCSS para as folhas de estilo
• JS: Nenhum framework foi utilizado neste projeto, apenas Javascript em sua forma nativa suportada pelo browser.
• DOC: Utilizado JSDoc para documentar funções dentro do projeto.

• images: Local onde as imagens utilizadas no projeto estão armazenadas.
• scripts: Para criar uma estrutura de pasta que considero adequado para tornar uma aplicação escalável, utilizei conhecimento agregado baseado em minha experiência profissional.
  • scripts/components: Para componentes globais, usados em mais de um ponto da aplicação.
  • scripts/constants: Para inclusão de dados estáticos, como variáveis e derivados.
  • scripts/features: Diretório onde ficam as regras de negócio implementadas.
  • scripts/pages: Para páginas, ou local onde existe um agrupamento de features.
  • scripts/services: Para inclusão de abstração do consumo/integração a serviços(API's).
• stylesheet: Dentro da pasta onde foi inserido todo o estilo do aplicativo, foi utilizado uma adaptação do padrão SMACSS. Também tentei utilizar o padrão RSCSS em conjunto.
  • stylesheet/base: Para incluir estilos globais e resets.
  • stylesheet/components: Para incluir estilos de componentes globais.
  • stylesheet/pages: Para incluir estilos realicionados a páginas específicas.
  • stylesheet/theme: Para incluir estilos de themas para aplicação.
  • stylesheet/variables: Para incluir todas variáveis utilizadas na aplicação.

┣ src
┣ ┣ images
┣ ┣ script
┃ ┃ ┣ components
┃ ┃ ┣ constants
┃ ┃ ┣ features
┃ ┃ ┣ pages
┃ ┃ ┣ services
┣ ┣ stylesheet
┃ ┃ ┣ scss
┃ ┃ ┃ ┣ base
┃ ┃ ┃ ┣ components
┃ ┃ ┃ ┣ pages
┃ ┃ ┃ ┣ theme
┃ ┃ ┃ ┣ variables

• axios - Usado para realizar chamadas da API consumida no projeto.
• parcel - Usado para compilar arquivos JS e SCSS.
• babel-plugin-module-resolver - Usado para criar aliases de paths dentro do projeto.

Você tem alguma dúvida sobre o projeto ou uma sugestão? ficarei feliz em ouvir a sua opinião sobre este pequeno projeto. Sempre estarei aberto a possiveis pontos de melhoria do mesmo.

E se você leu até aqui você é dahora! Grande abraço!