Teste frontend jr - Rodolfo Oliveira

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

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

README.md

@@ -1,24 +1,36 @@
-# Avaliação Junior
-Olá desenvolvedor!\
-Tudo bem?! 😊\
-\
-Seja bem-vindo, o intuito do teste não é reprovar e sim conhecer seu melhor estilo de programar e resolver problemas.
-
-## O que fazer
-1. Fazer um fork desse repositório e trabalhar no seu ambiente.
-2. Replicar o layout do link abaixo, pode usar dados de um JSON local:\
-[Link para o layout](https://xd.adobe.com/view/c715f110-fbd4-4323-be0c-0e453c1450db-9246)
-2. Fazer a funcionalidade de busca funcionar.
-3. Os cliques nos botões de editar/excluir/criar card podem exibir uma mensagem pro usuário de que a funcionalidade não foi implementada.
-4. Ao finalizar a avaliação modifique esse README com as instruções de como podemos fazer o seu código rodar na nossa máquina. Ou seja, passo a passo do que instalar e de quais comandos rodar para podermos visualizar o seu trabalho!
-5. Realizar um Pull Request para o nosso repositório e mandar um e-mail para [email protected] com o assunto "Avaliação Junior", informando que finalizou a avaliação e colocando o link do Pull Request. 
-
-## Dicas
-* Não foi definido limite de linhas e colunas, portanto fique à vontade para tal escolha.
-* Gostamos de interfaces limpas e elegantes.
-
-## Quais tecnologias usar
-* Deixaremos a seu critério qual tecnologia utilizar no entanto você terá mais pontos conosco se utilizar React para criação da interface e também o uso de pré-processadores/styled-components para o CSS.
-
-## Desafios se você se sentir confiante
-* Usar alguma API na internet, tipo https://pokeapi.co/, para trazer os dados que vão aparecer nos cards da tela.
+# Desafio frontend Ímpar :airplane:
+
+
+## :page_facing_up: Descrição do Projeto 
+Este projeto tem como objetivo analisar o conhecimento técnico, o estilo de resolver problemas e programar do candidadto.
+
+## :computer: Desenvolvimento
+Para desenvolver esse projeto eu optei por utilizar **<a href="https://pt-br.reactjs.org/">React</a>** em conjunto com o framework **<a href="https://nextjs.org/">Next.Js</a>**, com certeza tecnicamente não havia necessidade de se usar um framwork, porém com o objetivo de aprender ferramentas novas decidi desenvolver utilizando tal framework. Para a estilização do projeto utilizei **<a href="https://styled-components.com/">styled-components</a>**
+
+Deve comentar que como foi a primeira vez que utilizei Typescript e Next.Js, tive alguns problemas, que a propósito foi meu maior desafio, fazer a configuração dos dois, mas nada que um boa lida na documentação (stackoverflow) não resolvesse.
+
+## :technologist: Inicialização
+Após o **git clone** abra o terminal na pasta do projeto e execute os seguintes comandos:
+  - cd frontend
+  - yarn
+  - yarn dev
+  - Acesse [http://localhost:3000](http://localhost:3000/) no seu browser.
+  - Ou então se estiver utilizando VScode, aperte ctrl + shift + p, digite 'simple browser' e abra o projeto no browser do vscode.
+
+## :hammer_and_wrench: Ferramentas utilizadas
+- **<a href="https://pt-br.reactjs.org/">React</a>**
+- **<a href="https://www.typescriptlang.org//">Typescript</a>**
+- **<a href="https://nextjs.org/">Next.Js</a>**
+- **<a href="https://styled-components.com/">styled-components</a>**
+- **<a href="https://developer.marvel.com/">Marvel Developer Portal</a>**
+- **<a href="https://xd.adobe.com/view/c715f110-fbd4-4323-be0c-0e453c1450db-9246/">Adobe XD, Layout do projeto</a>**
+
+## :gear: Funcionalidades
+  - [x] Replicar layout
+  - [x] Fazer a funcionalidade de busca funcionar
+  - [x] Modal de criar card, excluir card e 'funcionalidade não criada'
+
+## :monocle_face: Observações
+Optei por utilizar um api de personagens da Marvel (não achei da DC :pleading_face:). E ela precisa de algumas configurações para poder utiliza-la. Essas configurações pódem ser observadas em: src/hooks/useRequest.tsx.
+Algumas dessas informações são sensíveis como privateKey e publicKey e o correto seria configura variáveis de hambiente um arquivo .env para protege-las, não achei necessario, porém deixo aqui meu conhecimento do que seria uma boa prática. 
+

additional.d.ts

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

custom.d.ts

@@ -0,0 +1,8 @@
+declare module '*.jpg';
+declare module '*.png';
+declare module '*.jpeg';
+declare module '*.gif';
+
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next-images" />

next-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="next" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "frontend-impar-type",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "axios": "^0.27.2",
+    "md5": "^2.3.0",
+    "next": "12.1.5",
+    "next-images": "^1.8.4",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "styled-components": "^5.3.5"
+  },
+  "devDependencies": {
+    "@types/node": "^17.0.29",
+    "@types/react": "^18.0.8",
+    "@types/styled-components": "^5.1.25",
+    "eslint": "8.14.0",
+    "eslint-config-next": "12.1.5",
+    "typescript": "^4.6.3"
+  }
+}

src/components/Button/index.ts

@@ -0,0 +1,53 @@
+import styled from 'styled-components';
+
+import { ButtonStyled } from '../../types/character';
+
+export const Button = styled('button')<ButtonStyled>`
+  border: ${(props) => (props.secondary ? `1px solid ${props.color}` : 'none')};
+  border-radius: 8px;
+  font-size: 18px;
+  font-weight: bold;
+
+  background-color: ${(props) =>
+    props.secondary ? '#FFFFFF' : `${props.color}`};
+  color: ${(props) => (props.secondary ? `${props.color}` : '#FFFFFF')};
+  height: ${(props) => (props.height ? `${props.height}px` : '48px')};
+  width: ${(props) => (props.width ? `${props.width}px` : '165px')};
+  box-shadow: 0px 3px 6px
+    ${(props) => (props.secondary ? '#E763162E' : '#92207242')};
+`;
+
+export const CloseButton = styled.button`
+  border: none;
+  border-radius: 50%;
+  background-color: #e76316;
+  height: 25px;
+  width: 25px;
+  color: #ffffff;
+  font-weight: bold;
+
+  position: relative;
+  top: -12.5px;
+  left: calc(100% - 12.5px);
+
+  @media (max-width: 470px) {
+    top: 10px;
+    left: calc(100% - 35px);
+  }
+`;
+
+export const EditAndDeleteButton = styled.button`
+  background: transparent;
+  border: none;
+  display: flex;
+  align-items: center;
+  height: 19px;
+  padding: 0;
+
+  p {
+    color: #263238;
+    font-size: 15px;
+    opacity: 48%;
+    margin-left: 5px;
+  }
+`;

src/components/Header/index.tsx

@@ -0,0 +1,20 @@
+/* eslint-disable @next/next/no-img-element */
+import React from 'react';
+
+import SearchBar from './searchBar';
+import * as S from './styles';
+import logo_impar from '../../assets/logo-teste.svg';
+
+const Header = () => {
+  return (
+    <S.Container>
+      <S.LogoContainer>
+        <img src={logo_impar} alt="logo impar" />
+      </S.LogoContainer>
+
+      <SearchBar />
+    </S.Container>
+  );
+};
+
+export default Header;

src/components/Header/searchBar/index.tsx

@@ -0,0 +1,49 @@
+/* eslint-disable @next/next/no-img-element */
+import React, { useContext, useState } from 'react';
+
+import { input, KeyDown } from '../../../types/character';
+import * as S from './styles';
+import AppContext from '../../../contexts/apiContext/Context';
+
+import lupa from '../../../assets/lupa.svg';
+
+const SearchBar = () => {
+  const { setSearchTerm } = useContext(AppContext);
+  const [inputValue, setInputValue] = useState('');
+
+  const handleChange = ({ target }: input) => {
+    setInputValue(target.value);
+  };
+
+  const getCharacters = () => {
+    setSearchTerm(inputValue);
+    setInputValue('');
+  };
+
+  const handleClick = () => {
+    getCharacters();
+  };
+
+  const handleKeyDown = (e: KeyDown) => {
+    if (e.key === 'Enter') {
+      getCharacters();
+    }
+  };
+
+  return (
+    <S.Container>
+      <S.Input
+        type="text"
+        placeholder="Digite aqui sua busca"
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        value={inputValue}
+      />
+      <button onClick={handleClick}>
+        <img src={lupa} alt="imagem do botao de pesquisa" />
+      </button>
+    </S.Container>
+  );
+};
+
+export default SearchBar;

src/components/Header/searchBar/styles.ts

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  background-color: #ffffff;
+  border-radius: 8px;
+  width: 1046px;
+  height: 75px;
+  margin-top: 83px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  button {
+    background: none;
+    border: none;
+    border-radius: 8px;
+    height: 100%;
+    padding-right: 25px;
+  }
+
+  @media (max-width: 1050px) {
+    width: 100%;
+    margin-top: 0;
+  }
+`;
+
+export const Input = styled.input`
+  border-radius: 8px;
+  border: none;
+  height: 100%;
+  width: 100%;
+  padding-left: 20px;
+  font-size: 20px;
+  outline: 0;
+`;

src/components/Header/styles.ts

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+
+import banner from '../../assets/fundo-busca.png';
+
+export const Container = styled.div`
+  background: url(${banner});
+  background-repeat: no-repeat;
+  background-size: cover;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 261px;
+  width: 100%;
+
+  @media (max-width: 1050px) {
+    background: none;
+    width: 100%;
+  }
+`;
+
+export const LogoContainer = styled.div`
+  height: 64px;
+  background: linear-gradient(90deg, #5f1478 5%, #ae276f 100%);
+  padding: 0;
+  width: 100%;
+  position: relative;
+  top: 0;
+
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  img {
+    width: 192.03px;
+    padding: 0;
+    margin-left: 1.5em;
+  }
+`;

src/components/Main/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import { Content } from '../../types/character';
+import * as S from './styles';
+
+const Main = ({ children }: Content) => {
+  return <S.MainContainer>{children}</S.MainContainer>;
+};
+
+export default Main;

src/components/Main/styles.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const MainContainer = styled.main`
+  display: flex;
+  flex-direction: column;
+  max-width: 1056px;
+  margin: 0 auto;
+  margin-top: 30px;
+  min-height: 100vh;
+  margin-top: 40px;
+`;