Feat/renovatt dev

README.md

@@ -1,79 +1,70 @@
-# Venha ser um desenvolvedor da Digital M3
+# Desafio da Digital M3
 
-Ola, somos a Agência Digital M3, uma agência voltada para ramo de comercio eletrônico, trabalhamos com implantação, migração, evolução e otimização de e-commerces. Estamos com a sede de desenvolvimento em Nova Friburgo RJ. Mas contratamos pessoas de todo o pais, visto que trabalhamos 100% home office.  
-> R. Helena Coutinho, 41 
-> Braunes, Nova Friburgo/RJ
-[https://goo.gl/maps/2mWagcctnrGdtFhBA]( https://goo.gl/maps/2mWagcctnrGdtFhBA )
+### Proposta do desafio
+O objetivo desse desafio é avaliar a seus conhecimentos fundamentais de ``Front end``, por isso pedimos que não utilize nenhum framework, porem caso deseje utilizar frameworks como react, é possível adicionar ao setup.
 
-Estamos procurando Desenvolvedores(as) `Front-end`, com sólidos conhecimentos em HTML, CSS e TS para projetar interfaces e entregar a melhor experiência para os consumidores visando sempre a otimização do código e agilidade no desenvolvimento.
+### Nota
+O objetivo desse desafio é avaliar a seus conhecimentos fundamentais de Front end, por isso pedimos que não utilize nenhum framework, porem caso deseje utilizar frameworks como react, é possível adicionar ao setup.
 
-## O que procuramos
-
-### Requisitos Obrigatórios
-
-- Html5, css3;
-- Javascript/Typescript;
-- Consumo de APIs.
-- Versionamento Git;
-- Grunt/gulp;
-- Sass/less;
-- Nodejs
-- Sites responsivos;
-- Iniciativa, criatividade e colaboração;
-- Boas práticas: reutilização de código, semântica, organização, performance.
+### Requisitos obrigatórios
+- HTML5 e CSS3
+- Typescript
+- Requisição a API para obter os produtos
+- Funcionalidade: Filtrar produtos por cor, tamanho e preço.
+- Funcionalidade: Adicionar produto ao carrinho.
+- Funcionalidade: Carregar mais produtos.
+- Não utilizar Bootstrap, Foundation Css, Semantic ui ou semelhantes ;
+- Responsividade
 
-### Desejáveis:
+### Figma dado pela empresa
+O layout se encontra no [figma](https://www.figma.com/file/hPfcV6VClVfkHCtje9997Q/Desafio-m3?node-id=0%3A1) e pode ser encontrado images dele em "layout".
 
-- Experiência com algum CMS
-- Conhecimento/Experiência em Vtex
-- Nodejs
+## Layout web
+![Web 1](.github/web-1.png) 
+![Web 2](.github/web-2.png)
+![Web 3](.github/web-3.png)
+![Web 4](.github/web-4.png)
+![Web 5](.github/web-5.png)
+![Web 5](.github/web-6.png)
 
-----
+## Layout mobile
+![Mobile 6](.github/mobile-1.png)
+![Mobile 7](.github/mobile-2.png)
+![Mobile 8](.github/mobile-3.png)
 
-## Como se candidatar a vaga
+<br />
 
-- [Crie um fork desse projeto;](https://github.com/agenciam3/Desenvolvedor-M3/fork)
-- No seu fork, codifique o layout seguindo as instruções abaixo;
-- Atualize o readme com as instruções necessárias para rodar o seu código;
-- Adicione também seu e-mail de contato ao readme do projeto ( caso seu e-mail do github esteja privado )
-- envie para [[email protected]](mailto:[email protected]?subject=Vaga%20DEV%20-%20Digital%20M3)
+## 🛠️ Tecnologias
 
+💻 **Front-end**
+- [Javascript](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript)
+- [Typescript](https://www.typescriptlang.org)
 
-**obs.**: link do projeto [github.com/agenciam3/Desenvolvedor-M3](https://github.com/agenciam3/Desenvolvedor-M3)
+🎨 **Estilização**
+- [Sass](https://sass-lang.com/guide/)
 
-### Instruções para o teste
+🔋 **Versionamento**
+- [Git](https://git-scm.com)
 
-O layout se encontra no [figma](https://www.figma.com/file/hPfcV6VClVfkHCtje9997Q/Desafio-m3?node-id=0%3A1) e pode ser encontrado images dele em "layout".
+⚙️ **Configuranções e Instalações**
 
-### Dependências
+Clone do Projeto 
 
-O projeto possui um setup pronto no qual há a necessidade de possuir o nodejs instalado na versão 14 ou superior.
+    $ git clone https://github.com/renovatt/Desenvolvedor-M3.git
 
-Para instalar as dependências só é preciso executar o comando: `npm install`
+Branch 
 
-O dar start no server e nos processos para desenvolvimento é necessário rodar o comando: `npm start `
+    $ feat/renovatt-dev
 
-Uma ver que o comando é dado ele irá levantar 2 servidores, sendo eles:
- - um para acessar o front-end que roda na porta 3000. No qual pode ser acessado pela url: http://localhost:3000
- - um para o json-server que irá export uma api com a lista de produtos que roda na porta 5000. Para acessar os produtos é na url:  http://localhost:5000/products
+Instalando as dependências
 
-### Objetivo
+    $ npm install
 
-O objetivo desse desafio é avaliar a seus conhecimentos fundamentais de front end, por isso pedimos que não utilize nenhum framework, porem caso deseje utilizar frameworks como react, é possível adicionar ao setup.
-### Obrigatório
+Iniciando o projeto
 
-- HTML5 e CSS3
-- Typescript
-- Requisição a API para obter os produtos
-- Funcionalidade: Filtrar produtos por cor, tamanho e preço.
-- Funcionalidade: Adicionar produto ao carrinho.
-- Funcionalidade: Carregar mais produtos.
-- Não utilizar Bootstrap, Foundation Css, Semantic ui ou semelhantes ;
-- Responsividade
+    $ npm start
 
-#### Bônus
 
-- Typescript com clean code
-- Adição de processo no gulp para otimizar imagens
+**E-mail**: [email protected]
 
-##### Dúvidas: [[email protected]](mailto:[email protected]?subject=Dúvida%20Vaga%20DEV%20-%20Digital%20M3)
+**Autor** [Wildemberg Renovato de Lima](https://www.linkedin.com/in/renovatt/)

gulpfile.js

@@ -93,6 +93,7 @@ const dev = () => {
     browserSync.reload
   );
   watch(paths.styles.src, { ignoreInitial: false }, styles);
+  watch('src/scss/**/*.scss', { ignoreInitial: false }, styles);
   watch(paths.img.src, { ignoreInitial: false }, img);
   watch(paths.html.src, { ignoreInitial: false }, html).on(
     "change",

package.json

@@ -4,10 +4,10 @@
   "description": "Desafio da agencia m3 para novos colaboradores",
   "main": "index.js",
   "scripts": {
-    "start": "node_modules/.bin/cross-env SERVER_API=http://localhost:5000 npm-run-all --parallel dev server",
+    "start": "npm-run-all --parallel dev server",
     "start:gp": "npm-run-all --parallel dev server",
-    "dev": "gulp",
-    "server": "json-server ./db.json --port 5000"
+    "server": "json-server ./db.json --port 5000",
+    "dev": "gulp"
   },
   "repository": {
     "type": "git",
@@ -36,4 +36,4 @@
     "cross-env": "^7.0.3",
     "json-server": "^0.17.0"
   }
-}
+}