feat/luiz-fernando-looqbox-challenge

.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?

.prettierrc

@@ -0,0 +1,19 @@
+{
+  "bracketSpacing": true,
+  "embeddedLanguageFormatting": "auto",
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "bracketSameLine": false,
+  "jsxSingleQuote": true,
+  "proseWrap": "preserve",
+  "quoteProps": "preserve",
+  "requirePragma": false,
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "printWidth": 90,
+  "endOfLine": "auto",
+  "arrowParens": "avoid"
+}

README.md

@@ -1,52 +1,28 @@
-### Would you like to work with us? Apply [here](https://looqbox.gupy.io/)!
+# Pokedex
 
-# Looqbox FrontEnd Challenge
-![Looqbox](https://github.com/looqbox/looqbox-frontend-challenge/blob/master/logo.png)
+Pokedex developed for the Looqbox challenge.
 
-## Challenge
-In this challenge you will need to build a **S**ingle **P**age **A**pplication using ReactJS and a provided api
+## Technologies used
 
-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
+- React
 - 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:
+- React Router
+- Ant Design
+- TanStack Query
+- Vite
 
-- 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.
+## How to run
 
-You may use any libraries or dependencies you like (e.g., Axios, Bootstrap, Material UI...).
+```bash
+npm install # To install dependencies
+npm run dev # To run the project
+npm run test # To run the tests
+```
 
-## Bonus points!
-- Pagination
-- Error handling
-- Documentation
-- Linting
-- Charts
-- Unit Testing
-- Ant Design
+## Features
 
-## Useful links
-- [React docs](https://react.dev/)
-- [PokeApi docs](https://pokeapi.co/docs/v2)
-- [Redux](https://redux.js.org/)
+- Pokémon listing
+- Pokémon search
+- Pokémon details
+- Infinite pagination
+- Responsiveness

eslint.config.ts

@@ -0,0 +1,119 @@
+import js from '@eslint/js'
+import { Linter } from 'eslint'
+import configPrettier from 'eslint-config-prettier'
+import pluginImport from 'eslint-plugin-import'
+// @ts-expect-error - No types available
+import pluginImportHelpers from 'eslint-plugin-import-helpers'
+import pluginPrettier from 'eslint-plugin-prettier'
+import pluginReact from 'eslint-plugin-react'
+import pluginReactHooks from 'eslint-plugin-react-hooks'
+// @ts-expect-error - No types available
+import pluginStyledComponentsA11y from 'eslint-plugin-styled-components-a11y'
+import pluginUnusedImports from 'eslint-plugin-unused-imports'
+import globals from 'globals'
+import tseslint from 'typescript-eslint'
+
+const reactConfig = pluginReact.configs.flat.recommended
+
+export default [
+  {
+    files: ['**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.es2021,
+        ...globals.jest,
+      },
+      ecmaVersion: 12,
+      sourceType: 'module',
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+  },
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...(Array.isArray(reactConfig) ? reactConfig : []),
+  configPrettier,
+  {
+    files: ['**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    plugins: {
+      react: pluginReact,
+      import: pluginImport,
+      'react-hooks': pluginReactHooks,
+      prettier: pluginPrettier,
+      'import-helpers': pluginImportHelpers,
+      'styled-components-a11y': pluginStyledComponentsA11y,
+      'unused-imports': pluginUnusedImports,
+    },
+    rules: {
+      '@typescript-eslint/no-var-requires': 'off',
+      'camelcase': 'off',
+      'class-methods-use-this': 'off',
+      'import/prefer-default-export': 'off',
+      'no-shadow': 'off',
+      'no-console': 'off',
+      'no-useless-constructor': 'off',
+      'no-empty-function': 'off',
+      'lines-between-class-members': 'off',
+      'import/extensions': [
+        'error',
+        'ignorePackages',
+        {
+          js: 'never',
+          jsx: 'never',
+          ts: 'never',
+          tsx: 'never',
+        },
+      ],
+      'import-helpers/order-imports': [
+        'warn',
+        {
+          newlinesBetween: 'always',
+          groups: ['module', '/^@shared/', ['parent', 'sibling', 'index']],
+          alphabetize: {
+            order: 'asc',
+            ignoreCase: true,
+          },
+        },
+      ],
+      '@typescript-eslint/no-unused-vars': 'error',
+      'unused-imports/no-unused-imports': 'error',
+      'import/no-extraneous-dependencies': [
+        'error',
+        {
+          devDependencies: true,
+        },
+      ],
+      'prettier/prettier': [
+        'error',
+        {
+          endOfLine: 'auto',
+        },
+      ],
+      'react/jsx-filename-extension': [
+        1,
+        {
+          extensions: ['.jsx', '.tsx'],
+        },
+      ],
+      'react/jsx-props-no-spreading': 'off',
+      'react/react-in-jsx-scope': 'off',
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+      'no-use-before-define': 'off',
+      'react/require-default-props': 'off',
+      '@typescript-eslint/no-use-before-define': ['error'],
+      'no-case-declarations': 'off',
+    },
+    settings: {
+      'import/resolver': {
+        typescript: {
+          project: '.',
+        },
+      },
+    },
+  },
+] as Linter.Config[]

index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+    rel="stylesheet">
+  <title>Pokemon | Pokédex</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>