Entrega do Desafio Frontend - Douglas Landim

.env.example

@@ -0,0 +1,2 @@
+
+VITE_POKEAPI_BASE_URL=https://pokeapi.co/api/v2/

.eslintignore

@@ -0,0 +1,2 @@
+dist
+node_modules

.gitignore

@@ -0,0 +1,28 @@
+# 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?
+
+# envs locais
+.env
+.env.*.local

.prettierignore

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

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "semi": true,
+  "printWidth": 100
+}

README.md

@@ -1,52 +1,151 @@
-### Would you like to work with us? Apply [here](https://looqbox.gupy.io/)!
-
-# Looqbox FrontEnd Challenge
-![Looqbox](https://github.com/looqbox/looqbox-frontend-challenge/blob/master/logo.png)
-
-## Challenge
-In this challenge you will need to build a **S**ingle **P**age **A**pplication using ReactJS and a provided api
-
-We will not use anything from your project other than evaluate your skills and you are free to use it in your portfolio
-
-## Stack
-We use:
-- ReactJS
-- Redux
-- TypeScript
-- AntDesign
-
-## Submitting
-- Make a fork of this repository
-- Create your branch
-- ⚠️ Do a initial Commit when you start
-- ⚠️ Do a final commit when you finish
-- When you're done send us a pull request
-
-# Guidelines
-You need to create a Single Page Application (SPA) that displays a list of Pokémon and allows users to search for them, using the [Pokeapi](https://pokeapi.co/docs/v2). Your app must be dynamic, meaning you **must not** reload the page to show new content.
-
-The PokeAPI was chosen for its simplicity in making requests. Since it is an open API, please **be mindful of how many requests** you make.
-
-## Requirements:
-
-- On the main page, include a search bar and a preloaded list of Pokémon.
-- Clicking on any Pokémon should display a card, modal, or page with that Pokémon’s information.
-- Typing in the search bar and pressing Enter should display the search result instead of the list.
-- Your app must include at least two different routes (e.g., /home, /details — be creative!).
-- Add a README file to document your project.
-
-You may use any libraries or dependencies you like (e.g., Axios, Bootstrap, Material UI...).
-
-## Bonus points!
-- Pagination
-- Error handling
-- Documentation
-- Linting
-- Charts
-- Unit Testing
-- Ant Design
-
-## Useful links
-- [React docs](https://react.dev/)
-- [PokeApi docs](https://pokeapi.co/docs/v2)
-- [Redux](https://redux.js.org/)
+# 📦 Looqbox Frontend Challenge
+
+Aplicação desenvolvida como desafio técnico para exibir uma Pokédex interativa, com listagem, busca e detalhes de Pokémon utilizando a **PokeAPI**.
+
+---
+
+## 🚀 Como executar
+
+Clone o repositório:
+
+```bash
+git clone https://github.com/Landim013/looqbox-frontend-challenge.git
+cd looqbox-frontend-challenge
+```
+
+Instale as dependências:
+
+```bash
+npm install
+```
+
+Execute o projeto:
+
+```bash
+npm run dev
+```
+
+Acesse no navegador:  
+👉 [http://localhost:5173](http://localhost:5173)
+
+---
+
+## 🧪 Testes
+
+### Testes unitários
+
+Rodar todos os testes unitários:
+
+```bash
+npm run test
+```
+
+Rodar em modo "watch":
+
+```bash
+npm run test:watch
+```
+
+Rodar em CI (com reporter junit):
+
+```bash
+npm run test:ci
+```
+
+### Testes end-to-end (Cypress)
+
+Suba a aplicação:
+
+```bash
+npm run dev
+```
+
+Em outro terminal, execute o Cypress:
+
+```bash
+npx cypress open
+```
+
+Ou para rodar em modo headless:
+
+```bash
+npx cypress run
+```
+
+---
+
+## ✅ Funcionalidades
+
+- Listagem inicial de Pokémon paginados
+- Busca por nome com resultado imediato
+- Exibição de detalhes do Pokémon (peso, altura, tipos e estatísticas)
+- Gráficos interativos (barras e radar) das estatísticas
+- Navegação entre **próximo/anterior Pokémon**
+- Responsividade para mobile e desktop
+- Componentes reutilizáveis com Styled Components
+- Tratamento de **loading** e mensagens de erro personalizadas
+- Testes unitários (Jest + Testing Library)
+- Testes end-to-end (Cypress)
+
+---
+
+## 📊 Dados consumidos da API
+
+A aplicação consome dados da **PokeAPI**:
+
+- `/pokemon` → lista de Pokémon
+- `/pokemon/:id` → detalhes de um Pokémon
+- `/pokemon-species/:id` → descrição em diferentes idiomas
+
+---
+
+## 📷 Visualização da aplicação
+
+💻 **Página inicial (listagem + busca)**  
+<img width="1686" height="1156" alt="image" src="https://github.com/user-attachments/assets/50e6a74d-2284-42ef-b798-5c2a60e64d83" />
+
+
+📄 **Página de detalhes do Pokémon**  
+<img width="1666" height="1282" alt="image" src="https://github.com/user-attachments/assets/cb02997f-aa96-46da-9adb-4d11df5c1bac" />
+
+
+📊 **Gráfico de estatísticas**  
+<img width="1608" height="1244" alt="image" src="https://github.com/user-attachments/assets/cd21adcf-cadf-4388-ab38-e0a6b4d98066" />
+
+
+📱 **Versão mobile**  
+<img width="426" height="1205" alt="image" src="https://github.com/user-attachments/assets/3cfa68ea-2906-45d0-806a-03b11e38ccdf" />
+
+<img width="418" height="1165" alt="image" src="https://github.com/user-attachments/assets/1646e449-8c09-4687-b97c-a44473b3c31e" />
+
+
+---
+
+## 🛠️ Tecnologias utilizadas
+
+- [React.js](https://react.dev/)
+- [Vite](https://vitejs.dev/)
+- [Redux Toolkit](https://redux-toolkit.js.org/)
+- [React Router DOM](https://reactrouter.com/)
+- [Ant Design](https://ant.design/)
+- [Styled Components](https://styled-components.com/)
+- [Axios](https://axios-http.com/)
+- [Jest](https://jestjs.io/) + [Testing Library](https://testing-library.com/)
+- [Cypress](https://www.cypress.io/)
+
+---
+
+## 💡 Arquitetura
+
+- **Modularidade**: componentes e hooks reutilizáveis
+- **Escalabilidade**: Redux para gerenciar estado global
+- **Responsividade**: design adaptado para telas pequenas e grandes
+- **Testabilidade**: cobertura com testes unitários e E2E
+- **Boas práticas**: ESLint, Prettier, Husky e lint-staged
+
+---
+
+## ✨ Autor
+
+**Douglas Landim**  
+[LinkedIn](https://www.linkedin.com/in/douglas-landim/) | [GitHub](https://github.com/Landim013)

cypress.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:5173',
+  },
+});

cypress/e2e/home-and-details.cy.ts

@@ -0,0 +1,26 @@
+describe('Home -> Details', () => {
+  it('renderiza a lista e navega para o detalhe do Bulbasaur', () => {
+    cy.intercept('GET', '**/api/v2/pokemon?*', { fixture: 'pokemon-list.json' }).as('getList');
+
+    cy.intercept('GET', '**/api/v2/pokemon/1', { fixture: 'pokemon-1.json' }).as('getBulbasaur');
+    cy.intercept('GET', '**/api/v2/pokemon-species/1', { fixture: 'species-1.json' }).as(
+      'getSpecies1',
+    );
+
+    cy.intercept('GET', '**/api/v2/pokemon?*', { fixture: 'pokemon-list.json' }).as('getList');
+
+    cy.intercept('GET', '**/api/v2/pokemon/bulbasaur*', { fixture: 'pokemon-1.json' }).as(
+      'getBulbasaurByName',
+    );
+    cy.intercept('GET', '**/api/v2/pokemon/ivysaur*', { fixture: 'pokemon-2.json' }).as(
+      'getIvysaurByName',
+    );
+
+    cy.intercept('GET', /\/api\/v2\/pokemon\/1\/?$/, { fixture: 'pokemon-1.json' }).as(
+      'getBulbasaurById',
+    );
+    cy.intercept('GET', /\/api\/v2\/pokemon-species\/1\/?$/, { fixture: 'species-1.json' }).as(
+      'getSpecies1',
+    );
+  });
+});

cypress/e2e/search-error.cy.ts

@@ -0,0 +1,25 @@
+// cypress/e2e/search-error.cy.ts
+describe('busca com erro mostra ErrorMessage', () => {
+  it('mostra mensagem quando o Pokémon não existe', () => {
+    // lista inicial
+    cy.intercept('GET', '**/api/v2/pokemon?*', { fixture: 'pokemon-list.json' }).as('getList');
+
+    cy.visit('/');
+    cy.wait('@getList');
+
+    cy.intercept('GET', '**/api/v2/pokemon/naoexiste*', {
+      statusCode: 404,
+      body: { detail: 'Not found' },
+    }).as('getNotFound');
+
+    cy.get('[data-testid="search-input"] input', { timeout: 10000 })
+      .should('be.visible')
+      .type('naoexiste{enter}');
+
+    cy.wait('@getNotFound');
+
+    cy.get('[data-testid="error-message"]', { timeout: 10000 })
+      .should('be.visible')
+      .contains(/pokémon não encontrado/i);
+  });
+});

cypress/fixtures/bulbasaur.json

@@ -0,0 +1,18 @@
+{
+  "id": 1,
+  "name": "bulbasaur",
+  "height": 7,
+  "weight": 69,
+  "types": [
+    { "slot": 1, "type": { "name": "grass", "url": "" } },
+    { "slot": 2, "type": { "name": "poison", "url": "" } }
+  ],
+  "stats": [
+    { "base_stat": 45, "effort": 0, "stat": { "name": "hp", "url": "" } },
+    { "base_stat": 49, "effort": 0, "stat": { "name": "attack", "url": "" } },
+    { "base_stat": 49, "effort": 0, "stat": { "name": "defense", "url": "" } },
+    { "base_stat": 45, "effort": 0, "stat": { "name": "speed", "url": "" } },
+    { "base_stat": 65, "effort": 0, "stat": { "name": "special-defense", "url": "" } },
+    { "base_stat": 65, "effort": 0, "stat": { "name": "special-attack", "url": "" } }
+  ]
+}

cypress/fixtures/list.json

@@ -0,0 +1,6 @@
+{
+  "count": 1,
+  "next": null,
+  "previous": null,
+  "results": [{ "name": "bulbasaur", "url": "https://pokeapi.co/api/v2/pokemon/1/" }]
+}

cypress/fixtures/pokemon-1.json

@@ -0,0 +1,18 @@
+{
+  "id": 1,
+  "name": "bulbasaur",
+  "height": 7,
+  "weight": 69,
+  "types": [
+    { "slot": 1, "type": { "name": "grass", "url": "" } },
+    { "slot": 2, "type": { "name": "poison", "url": "" } }
+  ],
+  "stats": [
+    { "base_stat": 45, "effort": 0, "stat": { "name": "hp", "url": "" } },
+    { "base_stat": 49, "effort": 0, "stat": { "name": "attack", "url": "" } },
+    { "base_stat": 49, "effort": 0, "stat": { "name": "defense", "url": "" } },
+    { "base_stat": 45, "effort": 0, "stat": { "name": "speed", "url": "" } },
+    { "base_stat": 65, "effort": 0, "stat": { "name": "special-defense", "url": "" } },
+    { "base_stat": 65, "effort": 0, "stat": { "name": "special-attack", "url": "" } }
+  ]
+}

cypress/fixtures/pokemon-2.json

@@ -0,0 +1,8 @@
+{
+  "id": 2,
+  "name": "ivysaur",
+  "height": 10,
+  "weight": 130,
+  "types": [{ "slot": 1, "type": { "name": "grass", "url": "" } }],
+  "stats": [{ "base_stat": 60, "effort": 0, "stat": { "name": "hp", "url": "" } }]
+}

cypress/fixtures/pokemon-list.json

@@ -0,0 +1,9 @@
+{
+  "count": 2,
+  "next": null,
+  "previous": null,
+  "results": [
+    { "name": "bulbasaur", "url": "https://pokeapi.co/api/v2/pokemon/1/" },
+    { "name": "ivysaur", "url": "https://pokeapi.co/api/v2/pokemon/2/" }
+  ]
+}

cypress/fixtures/species-1.json

@@ -0,0 +1,14 @@
+{
+  "flavor_text_entries": [
+    {
+      "flavor_text": "Uma semente estranha foi plantada em suas costas.",
+      "language": { "name": "pt" },
+      "version": { "name": "qualquer" }
+    },
+    {
+      "flavor_text": "A strange seed was planted on its back at birth.",
+      "language": { "name": "en" },
+      "version": { "name": "red" }
+    }
+  ]
+}