Conclusão de desafio técnico - Guilherme Callegari

looqbox/.eslintignore

@@ -0,0 +1,4 @@
+dist
+node_modules
+*.config.js
+*.config.cjs

looqbox/.eslintrc.cjs

@@ -0,0 +1,31 @@
+module.exports = {
+  root: true,
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint", "react", "react-hooks", "unused-imports", "import"],
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "prettier",
+  ],
+  settings: {
+    react: { version: "detect" },
+  },
+  rules: {
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/consistent-type-imports": "warn",
+    "unused-imports/no-unused-imports": "error",
+    "import/order": [
+      "warn",
+      {
+        alphabetize: { order: "asc", caseInsensitive: true },
+        "newlines-between": "always",
+        groups: ["builtin", "external", "internal", "parent", "sibling", "index"],
+      },
+    ],
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+  },
+};

looqbox/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

looqbox/.prettierignore

@@ -0,0 +1,3 @@
+dist
+node_modules
+coverage

looqbox/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "tabWidth": 2
+}

looqbox/README.md

@@ -0,0 +1,92 @@
+# LooqDex — Pokédex SPA
+
+SPA criada como desafio técnico, inspirada no design da [Looqbox](https://looqbox.com/).
+
+## ✨ Funcionalidades
+
+- Busca de Pokémon por nome (Enter executa a pesquisa)
+- Lista inicial de Pokémon com **paginação**
+- Detalhes do Pokémon (tipos, habilidades, imagem oficial e gráfico de stats)
+- Favoritar/Desfavoritar Pokémon (Redux slice)
+- Interface em **Ant Design** customizado (tema dark + gradiente inspirado no Looqbox)
+- Consumo da **PokeAPI** com RTK Query
+- Tratamento de erros e estados de carregamento
+- Testes com Vitest + Testing Library
+
+## 🧱 Stack
+
+- React 18 + TypeScript
+- Redux Toolkit (RTK + RTK Query)
+- React Router v6
+- Ant Design v5
+- Recharts (gráficos)
+- Vite (dev server & build)
+- Vitest + Testing Library
+- ESLint + Prettier
+
+## 🚀 Como rodar
+
+```bash
+# Instale as dependências
+npm install
+
+# Rodar ambiente de desenvolvimento
+npm run dev
+
+# Rodar testes
+npm run test
+
+# Build para produção
+npm run build
+```
+
+Abra `http://localhost:5173` no navegador (ou a porta indicada pelo Vite).
+
+## 🧭 Rotas
+
+- `/` → Home com busca e lista paginada
+- `/pokemon/:name` → Detalhes do Pokémon selecionado
+
+## 🧪 Testes
+
+Exemplo de teste com Vitest + Testing Library:
+
+```tsx
+import { render, screen } from "@testing-library/react";
+import { Provider } from "react-redux";
+import { store } from "../../store";
+import { BrowserRouter } from "react-router-dom";
+import Home from "../Home";
+import { describe, it, expect } from "vitest";
+
+describe("Home", () => {
+  it("renderiza hero corretamente", () => {
+    render(
+      <Provider store={store}>
+        <BrowserRouter>
+          <Home />
+        </BrowserRouter>
+      </Provider>,
+    );
+    expect(screen.getByText(/Inteligência para sua Pokédex/i)).toBeInTheDocument();
+  });
+});
+```
+
+## ✅ Checklist do desafio
+
+- [x] SPA com React
+- [x] Busca que substitui lista ao Enter
+- [x] Lista inicial pré-carregada
+- [x] Clique no card abre detalhes
+- [x] Pelo menos duas rotas
+- [x] Uso de Ant Design
+- [x] Paginação
+- [x] Gráfico de stats
+- [x] Redux (favoritos + RTK Query)
+- [x] Testes iniciais
+- [x] README documentado
+
+---
+
+Feito com React, Redux Toolkit e Ant Design.

looqbox/eslint.config.js

@@ -0,0 +1,23 @@
+import js from "@eslint/js";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import { globalIgnores } from "eslint/config";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs["recommended-latest"],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+]);

looqbox/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Looqdex</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>