Desafio Jonathan Afranio

.gitignore

@@ -0,0 +1,95 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+/node_modules/
+/jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+/.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp
+
+.quasar

README.md

@@ -1,76 +1,77 @@
 # Desafio FrontEnd - OW Interactive
 
-## Sobre a OW Interactive
+## Build Setup
 
-Fazemos parte do universo digital, focada em criar e desenvolver experiências interativas, integrando planejamento, criatividade e tecnologia. Conheça mais sobre nós em: [OW Interactive - Quem somos](http://www.owinteractive.com/quem-somos/).
+```bash
+# Instalar dependências
+$ npm install
 
-## Pré-requisitos
+# Rodar o projeto em: localhost:3000
+$ npm run dev
 
-- HTML;
-- CSS;
-- Javascript (ES6+);
-- VueJS;
-- Task runners/module bundlers;
-- Conhecimentos sobre REST;
-- Conhecimentos sobre PWA;
-- Conhecimentos de Git.
+# Buildar para produção e servidor
+$ npm run build
+$ npm run start
 
-## Desafio
+# generate static project
+$ npm run generate
+```
+Nesse desafio, usei PUG, para facilitar na marcação do HTML. 
 
-Faça o download do arquivo [clique aqui para baixar](https://www.dropbox.com/sh/x5wupfno5yqvmts/AADzmcp3hYuWbKYwqDYmmvCqa?dl=0) e após o download terminado siga as etapas listadas abaixo:
+## Diretórios 
 
-### Etapa 1
+### `assets`
 
-- Implementar o HTML/CSS/JS do layout .psd contido no arquivo baixado;
-- Implementar o banner rotativo da página de listagem de produtos;
-- Implementar o layout responsivo.
+O diretório de assets contém seus recursos não compilados, como arquivos Sass(.scss) e imagens.
 
-### Etapa 2
+### `components`
 
-- Na página de listagem dos produtos, faça:
-  * Consuma os produtos da API: [clique aqui para acessar a API](https://raw.githubusercontent.com/owInteractive/desafio-frontend-2020/master/produtos.json);
-  * Implementar o campo de pesquisa dos produtos;
-  * Implementar a funcionalidade de adição de um produto ao carrinho.
+O diretório de components contém seus componentes Vue.js. Os componentes compõem as diferentes partes da sua página e podem ser reutilizados e importados para suas páginas, layouts e até mesmo outros componentes.
 
-### Etapa 3
+Segue a lista dos componetes renderizados em todo site:
+- `Layouts/LayoutDefault.vue`: Componente com markup geral do site, que puxa o header, footer e o 'slot' que traz o markup da rota acessada, alem de verificar o localStorage 'cart';
+- `Layouts/Header.vue`: Componente com markup do cabecalho;
+- `Layouts/Footer.vue`: Componente com markup do rodapé;
 
- - Na página de carrinho, faça:
-    * A listagem de produtos adicionados ao carrinho e implemente todas as ações referentes ao carrinho (quantidade, remoção, etc.);
-    * Após a finalização da compra o usuário deverá ir para a página de checkout.
- - Na página de checkout, faça:
-    * Implementar o cadastro do usuário;
-    * Validar os campos que no design possuem o *;
-    * Implementar a busca por CEP. Utilizar alguma API disponível online, por exemplo: [ViaCEP](https://viacep.com.br/);
-    * Ao finalizar o cadastro do usuário exibir um modal de sucesso;
- - Documente o seu código.
+Segue a lista dos componetes renderizados na página principal com os produtos:
+- `VueSlickCarousel`: Componente do plugin: "vue-slick-carousel", para fazer o carousel do banner principal, diferente dos demais componente, esse componente não tem um arquivo .vue dele, porque ele é um plugin para fazer o carousel;
+- `SearchForm.vue`: Componente com markup do formulário de busca na 1ª página;
+- `ListPosts/ListPosts.vue`: Componente com lista dos produtos da loja, dentro desse componente chama o componente: `ListPosts/CardPost.vue` que renderiza o card de cada produto;
+- `ListPosts/CardPost.vue`: Componente que renderiza o card do produto, com foto, nome da categoria, titulo, descrição e preço, além do botão de adicionar no carrinho;
+- `Preload/Index.vue`: Componente que exibe um preload enquanto não finaliza a promisse que requisita os produtos, depois que finaliza a promisse ele para de ser renderizado e renderiza o `ListPosts/ListPosts.vue`;
 
-### Etapa 4
+Segue a lista dos componetes renderizados na página de carrinho:
+- `ListCart/ListCart.vue`: Componente com markup da do carrinho como os itens dos produtos inclusos no carrinho, botões de voltar para o site, limpar carrinho e ir para o checkout;
+- `ListCart/CartProduct.vue`: Componente com markup da linha do produto incluso no carrinho, chamado no componente: `ListCart/ListCart.vue`, nesse componente é renderizado as informações do produto como: Nome, Categoria, preço. Tem as acções de alterar quantidade do produto, remover o mesmo e calculo total do item;
+- `ListCart/EmptyCart.vue`: Componente com markup básico com mensagem que o carrinho está vázio;
 
-- Salvar os produtos do carrinho no Local Storage do navegador, para caso, o usuário feche a aba/navegador ele possa retornar com os produtos no carrinho;
-- Seguir os requisitos de uma PWA, ex: ser responsivo, instalável, independente de conexão, etc...
+Segue a lista dos componetes renderizados na página de checkout:
+- `ModalSuccess.vue`: Componente com markup do modal que abre quando o usuario faz o submit do formulário do checkout;
 
-## Regras
+### `pages`
 
-- Escrever HTML semântico;
-- Utilizar o template do VueJS (.vue);
-- Utilizar algum sistema de grid (ex: Bootstrap Grid);
-- Utilizar animações de hover;
-- Utilizar máscaras e validações no formulário;
-- Utilizar o Axios ou Fetch na integração da API;
-- Utilizar pré-processador para escrever o CSS (ex: SASS);
-- Utilizar algum task runner ou module bundler na compilação/transpilação dos seus assets;
-- **Atenção:** Não utilizar qualquer biblioteca de UI para desenvolver os componentes da página.
+Esse diretório contém as exibições e rotas do aplicativo. O Nuxt lerá todos os arquivos `*.vue` dentro deste diretório e configurará o Vue Router automaticamente.
 
-## Diferenciais
+Segue a lista das rotas disponiveis:
+- `index.vue`: Componente da principal da página de listagem dos produtos;
+- `cart.vue`: Componente da principal da página do carrinho;
+- `checkout.vue`: Componente da principal da página de checkout;
 
-- Utilizar o Nuxt ou a Vue CLI no desenvolvimento do projeto;
-- Utilizar o ECMA6+ para escrever o JS;
-- Utilizar Typescript;
+### `static`
 
-## Conclusão
+Este diretório contém seus arquivos estáticos. Cada arquivo dentro deste diretório é mapeado para `/`.
 
-Crie um fork e submeta ao Github o seu desafio. Após isso envie um e-mail para letsrock@owinteractive.com, com o assunto [DESAFIO FRONT-END] com o link para o seu desafio. Obrigado por participar e boa sorte =)
+Exemplo: `/static/robots.txt` é mapeado como `/robots.txt`.
 
+### `store`
+Este diretório contém seus arquivos de armazenamento Vuex. Criar um arquivo neste diretório ativa automaticamente o Vuex.
 
+Segue os stores:
+- `api.js`: Geralmente, deixo só para tratar as requisições como este caso, só para retornar as promisses.
+- `cart.js`: Tem o state: cart, tem as mutações para: modificar o state (update_state); Adicionar no carrinho (push_cart); editar quantidade do produto (edit_productQtd); remover um produto (removeProd); 
+Tem as ações: 'action_clean_cart': que chama a mutação de limpar o carrinho; 'action_add_cart': que verifica se tem o produto no carrinho, caso não tenha: adiciona o produto no carrinho chamando a mutação: push_cart, se não só altera a quantidade do produto chamando a mutação: edit_productQtd; 'action_remove': que chama a mutação 'removeProd'; 'action_change_qtd': que chama a mutação: edit_productQtd; 'action_localStorage' que é chamada nas ações citadas anteriomente, para fazer a alteração no localStorage 'cart' de acordo com cada mudança no carrinho;
+- `products.js`: Tem o state: products. A mutação: update_state para alterar o state products. A ação: request_products: nessa ação executa outra ação api/get_products (que requisita os produtos na api) para depois chamar a mutação: update_state.
 
+### `plugins`
+Este diretórios contem arquivos que chamam o plugin instalado: Como no arquivo mask.js, que chama o plugin 'VueTheMask' para fazer as mascaras nos inputs.