Meu front end - challenge Softcom

back-end/.gitignore

@@ -0,0 +1,118 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# 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
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://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/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# 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
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+#my
+snippets.js

front-end/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

front-end/README.md

@@ -1,63 +1,43 @@
-# Softcom Challenge - Front-end com React
+## Challenge front-end SoftCom
 
-Esse é um teste de nivelamento. Queremos deixar claro que não é esperado que todos consigam realizá-lo por completo, já que é destinado a vários níveis de experiência. Esperamos que todas as pessoas que queiram trabalhar conosco tentem realizá-lo e submetam mesmo não tendo concluído todo o desafio. Esperamos que você crie um arquivo _README_ na raiz do projeto falando sobre o desenvolvimento do desafio.
+Para demostrar conformidade com os principais requisitos da vaga, o projeto foi implementado com ReactJs, utilizando o TypeScript dentro do framework NextJS. Utilizando ainda o JSX e o Styled Components para a construção do layout e o JSON-Server para simulação de uma API para consumo da aplicação.
 
-Focamos aqui em design de código e design patterns em _TypeScript_ exercendo da sua criatividade em resolução de problemas. O objetivo é avaliar sua experiência em escrever código de fácil manutenção, baixo acoplamento e alta coesão.
+Os dados para consumo com o JSON-Server estão no arquivo server.json, na raiz do projeto.
 
-A Softcom trabalha com feedbacks construtivos, e, portando, entraremos em contato e vamos enviar um retorno do teste enviado. Faremos questão de falar seus pontos fortes e os pontos a melhorar. Então, aproveite essa oportunidade. =]
+As funcionalidades dinâmicas da aplicação foram implementadas utilizando React Hooks e Context API para facilitar a comunicação e compartilhamento de estados entre os vários componentes.
 
-## 🚀Principais responsabilidades que buscamos
+Objetivando uma melhor organização dos dados e da estrutura, utilizei recursos de tipagem e interfaces disponibilizados pelo TypeScript.
 
-- Colaborar com ideias que possam melhorar nossos sistemas e a vida dos nossos usuários;
-- Estar disposto a aprender e a ensinar;
-- Cuidar dos nossos sistemas como se fossem seus filhos;
-- Estar sempre atento a oportunidades para melhorar o código e nossos processos.
 
-## 🎓 Requisitos
+- - -
+### Princiais dependências
 
-- Experiência com TypeScript;
-- SSR ou SSG com Next.js
-- HTML5 e CSS3;
-- React Hooks;
-- Context API;
-- Styled Components e/ou Sass;
-- Clean Code;
-- Conhecer o básico de versionamento com Git;
-- Experiência com criação de interfaces responsivas;
-- Experiência em consumir API Rest;
+- Framework NextJS
+- React Icons
+- Styled Components
+- TypeScript
+- JSON Server
 
-## 🎓 Skills como diferenciais
+- - -
+### Intalação e acesso aos recursos
++ Instalar dependências do projeto
+    - yarn install
++ Iniciar o JSON-Server - [http://localhost:3333](http://localhost:3000)
+    - yarn server
+        - Principais end-points
+            -   http://localhost:3333/profile-info
+            -   http://localhost:3333/products
++ Inicar o localhost do projeto para desenvolvimento - [http://localhost:3000](http://localhost:3000)
+    - yarn dev
 
-- Experiência com Redux;
-- Experiência em construir formulários com Formik + Yup;
-- Experiência em autenticação JWT Token;
-- Experiência com Testes unitários com Jest;
-- Experiência com Continuous integration/continuous delivery;
-- Experiência com metodologia ágil;
-- Conhecimento em inglês para escrita de comentários, revisão de PRs e leitura;
+- - -
 
-## 🎯 Problema a ser resolvido
+[Link do Figma para o Layout de referencia](https://www.figma.com/file/ebcFb6dxwj4JkN7vENzgeQ/Desafio-UX?node-id=3585%3A0)
 
-### **Lojinha Virtual**
+- - -
 
-O nosso cliente necessita de uma lojinha virtual para vender os seus itens, o mesmo já possui uma interface onde ele pode cadastrar os seus produtos, atribuir promoções e sinalizar os mesmos como sugestão de venda, o que você precisa desenvolver para o mesmo é uma interface para consumidores que irá disponibilizar a listagem desses itens já cadastrados e os recursos necessários que o mesmo adicione esses itens em uma sacola de compras, essa tela é para aprovação, você deverá criar apenas as interfaces solicitadas:
+### Tela incial da aplicação implementada no desafio
+![Tela inicla da aplicação](./assets/tela-nicial.JPG)
 
-#### **Jornada do usuário:**
-
-O usuário deverá ter acesso a uma tela de home com a listagem dos produtos comercializados pela empresa, os produtos devem ser agrupados por sua categoria, com possibilidade de filtrar os mesmos por sua categoria ou pesquisar por qualquer parte o nome do produto, ao clicar no card de um determinado produto, deverá ser exibido um modal contendo as informações sobre o mesmo com a possibilidade de alterar a quantidade e de adicionar a mesmo ao carrinho, não será necessário criar a interface do carrinho de compras, toda via, conforme protótipo, exibe no header da home um totalizador do carrinho que precisar ser alterado a cada adição de um produto.
-
-#### **Link para o protótipo do interface do desafio:**
-
-https://www.figma.com/file/ebcFb6dxwj4JkN7vENzgeQ/Desafio-UX?node-id=3585%3A0
-
-## 🚀 Plus
-
-- Como não disponibilizamos uma API para consumo nesse desafio, os dados devem ser simulados com um objeto JSON fixo ou outra maneira que você achar interessante para simular um consumo de um JSON, toda via, consideramos um diferencial simular a API REST através da instalação da dependência do JSON-Server.
-- Da mesma maneira não estamos cobrando testes. Mas caso queira ganhar pontos extras, testes unitários cairiam bem na entrega.
-
-## 📆 Avaliação
-
-Para nos enviar seu código, você pode:
-
-- Fazer um fork desse repositório, e nos mandar uma pull-request.
-- Nos enviar o link do repositório por e-mail: lab@softcomtecnologia.com.br.
+### Tela do modal de exibição de detalhes
+![Tela modal](./assets/tela-modal.JPG)

front-end/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

front-end/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "meu-front-end",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "server": "json-server server.json -w -d 750 -p 3333"
+  },
+  "dependencies": {
+    "axios": "^0.21.1",
+    "next": "10.2.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-icons": "^4.2.0",
+    "react-scripts": "^4.0.3",
+    "styled-components": "^5.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^15.0.2",
+    "@types/react": "^17.0.5",
+    "@types/react-icons": "^3.0.0",
+    "@types/styled-components": "^5.1.9",
+    "json-server": "^0.16.3",
+    "typescript": "^4.2.4"
+  }
+}