João Victor Gonçalves Rodrigues

README.md

@@ -1,87 +1,35 @@
-# Desafio para Front-end Developer na DoroTech
+## Projeto
 
-Somos uma empresa com clientes que atuam em vários segmentos do mercado, com diferentes tecnologias, culturas e desafios.
+Projeto consiste de apenas uma feature, browse (busca), para buscar os personagens do Rick e Morty. A estrutura de pastas no projeto segue por meio de features, portanto, os arquivos não são organizado por tipos e sim por feature/função, dessa forma qualquer dev novo ao bater o olho no projeto já sabe do que se trata.
 
-Gostamos de compor nossos times com profissionais multidisciplinares, que tenham alta capacidade de aprendizado, sejam detalhistas, resilientes, questionadores e curiosos. 
-Você, como **Front-end Developer**, será o responsável por implementar, dar manutenção, aplicar correções e propor soluções em projetos de software.
+Temos 5 suites de testes, eu tentei cobrir as principais jornadas do usuário, e usei Dependency injection para facilmente mocar alguns serviços, tentei ao máximo aplicar o SOLID para no fim ter um codigo testável, flexível e desacoplado. Como meu codigo esta testado poderia trabalhar em um refactoring e utilizar algumas abstrações, porém o tempo foi um problema.
 
-## Orientações
-Para executar o desafio de **Front-end Developer**, você **deverá utilizar framework React**, seguindo o [passo a passo](https://github.com/dorotech/frontend-test#etapas) para a execução, atendendo aos [critérios de aceitação](https://github.com/dorotech/frontend-test#crit%C3%A9rios-de-aceita%C3%A7%C3%A3o).
+## Tecnologias
 
-## Desafio
-Nossa equipe é apaixonada por **Rick and Morty**, o seu desafio será criar uma aplicação utilizando a API pública da série [https://rickandmortyapi.com/](https://rickandmortyapi.com/), para exibir a lista de  personagens. 
-Veja a documentação [https://rickandmortyapi.com/documentation/#rest](https://rickandmortyapi.com/documentation/#rest).
+**Next Js**: Framework focado para produção, sua principal feature é rederização no servidor (SSR) e geração de páginas estáticas (SSG). Escolhi o Next.Js sobre tudo por sua excelente developer experience, ferramentas como code-spliting, client routing por pastas, otimização de images, um module-blunder configurado de fábrica, serviços de hosting da vercel e dentre outras features.
 
-Os requisitos da aplicação:
+**HeadlessUI**: Uma lib de components totalmente sem estilos, fornecendo apenas apis e totalmente accessivel. Escolhi essa lib devido a sua facilidade de construir componentes totalmente accessiveis.
 
-- Como usuário, desejo visualizar na página inicial, uma lista de 20 personagens incialmente, contendo **foto**, **nome** e **status**, com o tamanho da paginação sendo dinamica, podendo ser selecionando, 5, 10 ou 20 itens por vez.
-- Como usuário, desejo clicar em um personagem da lista, para visualizar informações detalhadas. (seja criativo a api contem diversas informaçoes)
-- Como usuário, desejo filtrar os personagens por **nome**, **gênero**, **espécie** e **status**, alguns filtros são enums, seja criativo.
-- Como usuário, desejo combinar varios filtros.
-- Como usuário, gostaria de ter uma forma de acessar a imagem do pensonagem, abrindo a imagem em uma nova aba.
+**TailwindCSS**: Framework CSS focado em fornecer classes utilitarias ao inves de componentes totalmente feitos. Escolhi essa lib pela facilidade e velocidade de construir qualquer design system.
 
-## Etapas
+**React Query**: Uma lib para cache/gerenciamento de estado para requisições HTTP. Escolhi essa lib devido ao seu grande impacto na experiencia do usuario e na Developer experience.
 
-#### 1 - Fazer um fork desse repositório
+Essas foram as principais bibliotecas usadas, mas usei **Jest** junto **Testing Library** para fazer teste de unidade e integração, **eslint** junto com style-guide do **airbnb**, libs como **class-variance-authority e tailwind-merge** foram usadas para melhorar a Developer experience com o **TailwindCSS**.
 
-![https://github.com/dorotech/frontend-test/raw/main/img/print-tutorial-1.png](https://github.com/dorotech/frontend-test/raw/main/img/print-tutorial-1.png)
+## Como rodar
 
+Passo a passo de como rodar esse projeto.
 
-#### 2 - Criar um branch com o seu primeiro e último nome
-```bash
-git checkout -b joao-silva
-```
+1. Clone o projeto
+2. git checkout joao-rodrigues (muda para minha branch)
+3. yarn ou npm i (para instalar todas as dependencias)
+4. yarn dev ou npm run dev (para rodar o projeto em modo desenvolvedor)
 
-#### 3 - Escreva a documentação da sua aplicação
-Você deve, substituir o conteúdo do arquivo **README.md** e escrever a documentação da sua aplicação, com os seguintes tópicos: 
-- **Projeto**: Descreva o projeto e como você o executou. Seja objetivo.
-- **Tecnologias**: Descreva quais tecnologias foram utilizadas, enumerando versões (se necessário) e os links para suas documentações,  qual guia de estilos de código você utilizou com o link para a sua documentação, quais bibliotecas instalou e porque.
-- **Como rodar**: Descreva como iniciar a sua aplicação
-- **Link** para acessar o projeto.
+Quer fazer uma build e rodar ?
 
-#### 4 - Faça uma Pull Request
-Após implementada a solução, crie uma [pull request](https://github.com/dorotech/frontend-test/pulls) com o seu projeto para esse repositório, avise o recrutador.
+1. yarn build ou npm run build (faz uma build)
+2. yarn start ou npm run start (roda a versao de build)
 
-## Critérios de Aceitação
-Para que seu teste tenha o mínimo necessário que atenda aos requisitos esperados, ele deve:
-- Atender ao que foi proposto no [Desafio](https://github.com/dorotech/frontend-test#Desafio).
-- Utilização de pré-processadores CSS (Sass, Less).
-- Interfaces responsivas para desktop, tablets e smartphones.
-- Compatibilidade entre browsers.
-- Padrão de escrita CSS (BEM, OOCSS, SMACSS).
-- Código TS escrito com base em algum guia de estilos: [AirBnB Standards](https://github.com/airbnb/javascript) ou [TypeScript Google Guide](https://google.github.io/styleguide/tsguide.html).
-- Utilizar padrões semânticos em mensagens de commit. (Gostamos do padrão de commits do repositório [AngularJS](http://karma-runner.github.io/3.0/dev/git-commit-msg.html))
-- Projeto feito upload: [Firebase hosting](https://firebase.google.com/docs/hosting/quickstart?hl=pt-br) ou [GitHub Pages](https://pages.github.com/).
-- Caso você nao consiga completar tudo e tenha algum receio, não se preocupe, iremos avaliar o que foi entregue, mesmo com pendências.
-- O diferencial para este desafio: layout, ux e ui, bem como implementação de boas práticas de segurança, performance e/ou estrutura.
-- [JSDOC](https://jsdoc.app/) nos principais itens do projeto. 
+## Link
 
-
-## Dicas e Informações Valiosas
-
-#### O que gostaríamos de ver em seu teste:
-- Upload do projeto em um seviço de hospedagem.
-- Convenção de nome em classes, objetos, variáveis, métodos e etc.
-- Layout encantador
-- Faça commits regulares. Eles são melhores do que um commit gigantesco. Gostaríamos de ver commits organizados e padronizados, então capriche neles!
-- Uso de libs como bootstrap, material, Evergreen e etc...
-- Hooks é bem-vindo.
-- Animações, Sobras, Menus, componentes de Libs de UX implementados. 
-- Projeto feito usando TypeScript
-- **Bônus 1** Dark Mode, implementação sendo um botão que mude o padrão de cores da pagina para escuro e claro com 1 click. 
-- **Bônus 2** QueryParams para buscas, quando uma busca e realizada, exibir na URL o parâmetro da busca realizado, caso recaregar a página com a URL, usar o parâmetro para preencher os itens da pagina.
-- **Bônus 3** Listagem de favoritos, com algum mecanismo de cache.
-- **Bônus 4** Outros filtros além dos sugeridos na descrição inicial
-- **Bônus 5** GitHub action como serviço de publicação do projeto pronto.
-
-**Observação:** Nenhum dos itens acima é obrigatório.
-
-#### O que o seu Teste não deve ter:
-- Saber que não foi você quem implementou o projeto.
-- Varias bibliotecas instaladas sem uso.
-- Falta de organização de código.
-- Falta de documentação.
-- Nome de variáveis sem sentido ou sem padrão de nomes.
-- Histórico de commits desorganizado e despadronizado.
-
-## Boa Sorte!! 
+Deploy: https://rick-morty-beta-orpin.vercel.app/

rick-morty/.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_RICK_MORTY_BASE_URL="https://rickandmortyapi.com/api"

rick-morty/.eslintrc.json

@@ -0,0 +1,24 @@
+{
+  "env": {
+    "jest": true
+  },
+  "extends": ["airbnb-base/legacy", "prettier", "next/core-web-vitals"],
+  "overrides": [
+    // Only uses Testing Library lint rules in test files
+    {
+      "files": ["./src/**/*.test.tsx"],
+      "extends": ["plugin:testing-library/react"]
+    },
+    {
+      "files": ["*.tsx"],
+      "rules": {
+        "no-undef": "off"
+      }
+    }
+  ],
+  "rules": {
+    "class-methods-use-this": "off",
+    "consistent-return": "off",
+    "no-unused-vars": "off"
+  }
+}

rick-morty/.gitignore

@@ -0,0 +1,38 @@
+# 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*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.vercel

rick-morty/README.md

@@ -0,0 +1,38 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

rick-morty/jest.config.js

@@ -0,0 +1,20 @@
+const nextJest = require('next/jest');
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+});
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  moduleNameMapper: {
+    // Handle module aliases (this will be automatically configured for you soon)
+    '@/(.*)': '<rootDir>/src/$1',
+  },
+  testEnvironment: 'jest-environment-jsdom',
+  transformIgnorePatterns: ['/node_modules'],
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig);

rick-morty/jest.setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

rick-morty/next.config.js

@@ -0,0 +1,14 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'rickandmortyapi.com',
+      },
+    ],
+  },
+};
+
+module.exports = nextConfig;

rick-morty/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "rick-morty",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "test": "jest --watch"
+  },
+  "dependencies": {
+    "@headlessui/react": "^1.7.8",
+    "@next/font": "13.1.6",
+    "@tanstack/react-query": "^4.24.4",
+    "axios": "^1.2.6",
+    "class-variance-authority": "^0.4.0",
+    "next": "13.1.6",
+    "phosphor-react": "^1.4.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tailwind-merge": "^1.9.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/node": "^18.11.18",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "autoprefixer": "^10.4.13",
+    "eslint": "^8.33.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-next": "^13.1.6",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-testing-library": "^5.10.0",
+    "jest": "^29.4.1",
+    "jest-environment-jsdom": "^29.4.1",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.4",
+    "typescript": "^4.9.4"
+  }
+}

rick-morty/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

rick-morty/src/features/browse/components/character-details-modal/index.tsx

@@ -0,0 +1,49 @@
+import Image from 'next/image';
+import { TCharacter } from '@/features/common/services/rick-morty/types';
+import { Modal } from '@/features/common/components/modal';
+
+interface ICharacterDetailsModal {
+  isOpen: boolean;
+  onClose(): void;
+  character: TCharacter;
+}
+
+const Detail = ({ name, value }: { name: string; value: string | number }) => (
+  <div className="flex flex-col">
+    <span className="">{name}</span>
+    <span className="py-1 px-3 bg-gray-400 dark:bg-zinc-900 rounded-lg text-center overflow-hidden whitespace-nowrap overflow-ellipsis">
+      {value}
+    </span>
+  </div>
+);
+
+export function CharacterDetailsModal({ character, ...rest }: ICharacterDetailsModal) {
+  if (!character) return null;
+
+  return (
+    <Modal {...rest}>
+      <div className="relative flex flex-col gap-5 items-center justify-center">
+        <div className="absolute -top-5 translate-y-[-100%] transition-all ease-out rounded-[50%] hover:rounded-lg border-[10px] border-gray-300 dark:border-zinc-800 dark:bg-zinc-800 bg-gray-300 overflow-hidden">
+          <Image
+            src={character.image}
+            alt={character.name}
+            className="object-contain rounded-lg"
+            width={180}
+            height={180}
+          />
+        </div>
+
+        <h1 className="font-bold text-3xl sm:text-4xl">{character.name}</h1>
+
+        <div className="w-full max-w-[400px] grid grid-cols-2 gap-5 place-content-center">
+          <Detail value={character.status} name="Status" />
+          <Detail value={character.gender} name="Gender" />
+          <Detail value={character.species} name="Specie" />
+          <Detail value={character.origin.name} name="Origin" />
+          <Detail value={character.episode.length} name="Featured in" />
+          <Detail value={new Date(character.created).toDateString()} name="Created at" />
+        </div>
+      </div>
+    </Modal>
+  );
+}