Kennedy barreto

.gitignore

@@ -0,0 +1,2 @@
+.env
+node_modules

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Kennedy Barreto
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,58 +1,69 @@
-# Teste de Desenvolvimento Web
+# Pokedex
 
-Olá Dev! Tudo bem?
+This is a technical test involving front-end and back-end development. The mission is to create a system to replace an Excel file, adding new functionalities while maintaining the core features. The goal is to create a practical and enjoyable way to search for data, including listing, filtering, pagination, and displaying details about each Pokémon.
 
-A RedFox está sempre em busca de profissionais interessantes e interessados, com boa capacidade de aprendizado, adaptação e principalmente motivação!
+## Technologies Used
 
-Este teste tem como objetivo avaliar e desafiar você. Não é obrigatório realizá-lo completamente, queremos apenas conhecer você, seu esforço e potencial para aprender, se adaptar e tomar decisões.
+- [React](https://react.dev/): Front-end library for building user interfaces.
+- [Node.js](https://nodejs.org/en): JavaScript runtime environment for server-side development.
+- [Express.js](https://expressjs.com/): Web application framework for Node.js.
+- [MongoDB](https://www.mongodb.com/): NoSQL database for storing data.
+- [Mongoose](https://mongoosejs.com/): MongoDB object modeling tool for Node.js.
+- [Docker](https://www.docker.com/): Containerization platform for packaging applications into containers.
 
-Agora vamos ao teste!
+## Getting Started
 
+This project is developed  to run the front-end and back-end with Docker, with easy-to-follow configuration steps, anyone should be able to run it locally. Follow the steps below to get the project up and running on your local machine:
 
-## Desafio Pokémon
+Prerequisites
 
-Nós temos um problema, atualmente nosso sistema é só um excel, cheio de informações sobre Pokémon. Nós usamos ele como banco de dados e ao mesmo tempo interface de gerenciamento, inserindo, editando, deletando e filtrando os dados.
+- [Node.js](https://nodejs.org/en) and [Yarn](https://yarnpkg.com/) (Node Package Manager) installed on your machine.
+- [Docker](https://www.docker.com/) installed on your machine.
 
-A missão é criar um sistema para substituir este excel, pois queremos expandir e acrescentar funcionalidades. Queremos manter o básico, mas principalmente queremos uma forma prática e agradável de buscar os dados, com listagem, filtros, paginação e detalhes sobre cada Pokémon.
+### Installation
 
-Fique à vontade com o layout, precisamos de uma interface que consiga entregar as funcionalidades principais e substituir o excel, só isso.
+1 - Clone the repository to your local machine:
 
+```clipboard
+[email protected]:kennedybm/teste-desenvolvimento-web.git
+```
 
-## Consigo fazer tudo isso?
+2 - At the root of the project, you will find a **`docker-compose.yml`** file. Open the docker-compose.yml file and modify the environment (username, password, database) as shown in the following image:
 
-Consegue sim!
+![environment example](https://user-images.githubusercontent.com/91641613/232124340-37917f83-2b2f-4436-88ac-c23b8aad869f.png)
 
-O teste é flexível, você pode escolher alguma parte específica dele para fazer, em que se sinta mais confortável e confiante, por exemplo: a interface, as funcionalidades, o banco de dados, etc...O importante é tentar atingir o objetivo de alguma forma.
 
-Aqui na RedFox queremos aproveitar ao máximo suas habilidades e aptidões, mas também desafiar você a adquirir novas, então nossa equipe tem a liberdade de trasitar entre frontend, backend, infraestrutura, etc...Sem se restringir, tudo depende do esforço e vontade de cada um.
+Make the necessary changes according to the image to configure the docker-compose file.
 
+3 - Navigate to the **`server`** folder, and then open the **`src`** directory. Create a new **`.env`** file and copy and paste the variables from the
+**`.env.example`**, which is in the same directory. Replace the **`user`** and **`password`** fields in the **`.env`** file with the same variables that you set in the previous step. Your **`.env`** file should look like this:
 
-## Por onde começo?
+![pokedex-env](https://user-images.githubusercontent.com/91641613/232124922-3de71272-66b8-4b56-bfc3-5a7e3866ab98.png)
 
-Primeiramente, você pode fazer um fork desse repositório aqui, para sua conta do Github, depois disso crie uma branch nova com o seu nome, para podermos indentificá-lo.
+4 - Open the project terminal and run this command:
 
-Após terminar o desafio, você pode solicitar um pull request para a branch master do nosso repositório. Vamos receber e fazer a avaliação de todos.
+```clipboard
+docker compose up
+```
 
+5 - After completing all the necessary setup, you can access the front-end at:
 
-## E o Layout??
+```clipboard
+http://localhost:3000/
+```
 
-Fique a vontade quanto a isso, não vamos avaliar o design da sua interface. Se quiser desenhar algo bacana, diferente, pensar até em UI/UX, etc...é claro que vamos valorizar o seu esforço e considerar como um diferencial, mas não se preocupe. 
 
+and the back-end at:
 
-## Regras
+```clipboard
+http://localhost:5500/pokemons
+```
+When the 'Running on port 5500' message appears in the terminal, simply refresh the front-end page.
 
-Para o desafio ficar mais interessante, decidimos criar algumas regras:
-- No layout, deve utilizar algum framework CSS (ex: Bootstrap, MaterializeCSS, Bulma...)
-- No frontend, deve utilizar algum framework JS (ex: VueJS, ReactJS, Angular...tente não usar jQuery)
-- No backend, deve utilizar NodeJS
-- Documentar um pouco o projeto, o que você fez e de que forma devemos executar-lo
+## Usage
 
+This project is developed with a script that populates the back-end with a collection of Pokémon data to be displayed in the front-end for initial use. The script sets up the necessary data in the back-end database, allowing the application to showcase a list of Pokémon with their details on the front-end. This feature provides a ready-to-use dataset for users to explore and interact with the application without the need for manual data entry.
 
-## Só isso?
+## License
 
-Só!...mas se quiser ir além, tente preparar o projeto para ser executado de maneira simples e prática, se coloque no lugar de alguém com menos conhecimentos, que precisa ver o que você desenvolveu. 
-
-ps: Se fizer deploy em algum servidor ou utilizar alguma ferramenta que facilite a execução (ex: docker), será um diferencial.
-
-
-Boa sorte! (^_^)
+[MIT](https://github.com/kennedybm/teste-desenvolvimento-web/blob/kennedy-barreto/LICENSE)

client/.dockerignore

@@ -0,0 +1,5 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+dist

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

client/Dockerfile

@@ -0,0 +1,14 @@
+FROM node:16.15.1
+
+WORKDIR /app
+
+COPY ./package*.json ./
+COPY ./yarn.lock ./
+
+RUN yarn install
+
+COPY . .
+
+EXPOSE 3000
+
+CMD ["yarn", "dev"]

client/index.html

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

client/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "client",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.3.5",
+    "bootstrap": "^5.2.3",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.7.3",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.8.0",
+    "react-paginate": "^8.2.0",
+    "react-router-dom": "5",
+    "styled-components": "^5.3.9"
+  },
+  "devDependencies": {
+    "@types/axios": "^0.14.0",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@types/react-paginate": "^7.1.1",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/styled-components": "^5.1.26",
+    "@vitejs/plugin-react": "^3.1.0",
+    "typescript": "^4.9.3",
+    "vite": "^4.2.0"
+  }
+}

client/src/App.tsx

@@ -0,0 +1,14 @@
+import Routes from "./routes";
+import GlobalStyle from "./style/global";
+import "bootstrap/dist/css/bootstrap.min.css";
+
+const App = () => {
+  return (
+    <>
+      <GlobalStyle />
+      <Routes />
+    </>
+  );
+};
+
+export default App;

client/src/components/header/index.tsx

@@ -0,0 +1,25 @@
+import Container from "react-bootstrap/Container";
+import Navbar from "react-bootstrap/Navbar";
+import Form from "react-bootstrap/Form";
+import Button from "react-bootstrap/Button";
+
+export const Header = () => {
+  return (
+    <>
+      <Navbar bg="light" variant="light" sticky="top" expand="md">
+        <Container>
+          <Navbar.Brand href="header">Pokedex</Navbar.Brand>
+          <Form className="d-flex">
+            <Form.Control
+              type="search"
+              placeholder="Search"
+              className="me-2"
+              aria-label="Search"
+            />
+            <Button variant="outline-success">Search</Button>
+          </Form>
+        </Container>
+      </Navbar>
+    </>
+  );
+};

client/src/components/index.ts

@@ -0,0 +1,5 @@
+import { Header } from "./header";
+import { Pokemons } from "./pokemons";
+import { Pagination } from "./pagination";
+
+export { Header, Pokemons, Pagination };

client/src/components/pagination/index.tsx

@@ -0,0 +1,19 @@
+import ReactPaginate from "react-paginate";
+import { IPagination } from "./interfaces";
+
+export const Pagination = ({ switchPage, pageCount }: IPagination) => {
+  return (
+    <ReactPaginate
+      previousLabel={"<"}
+      nextLabel={">"}
+      pageCount={pageCount}
+      onPageChange={switchPage}
+      containerClassName={"paginationUl"}
+      previousLinkClassName={"previousBttn"}
+      nextLinkClassName={"nextBttn"}
+      disabledClassName={"paginationDisabled"}
+      activeClassName={"paginationActive"}
+      pageClassName={"paginationPages"}
+    />
+  );
+};

client/src/components/pagination/interfaces.ts

@@ -0,0 +1,4 @@
+export interface IPagination {
+  switchPage: ({ selected }: { selected: number }) => void;
+  pageCount: number;
+}

client/src/components/pokemons/cards/index.tsx

@@ -0,0 +1,44 @@
+import { useApi } from "../../../providers/api";
+import { IPokemonsProps } from "./interfaces";
+import * as Styled from "./styles";
+import * as BsIcons from "react-icons/bs";
+
+export const Cards = ({
+  id,
+  name,
+  pokedexNumber,
+  type1,
+  type2,
+  weather1,
+  atk,
+  def,
+  sta,
+  statTotal,
+}: IPokemonsProps) => {
+  const { pokemonsData } = useApi();
+
+  return (
+    <>
+      <Styled.CardSection>
+        <Styled.TitleSection>
+          <Styled.NameBox>{name}</Styled.NameBox>
+          <Styled.ExcludeBox>
+            <BsIcons.BsTrash3Fill />
+          </Styled.ExcludeBox>
+        </Styled.TitleSection>
+        <Styled.ContentSection>
+          <ul>
+            <li>Number: {pokedexNumber}</li>
+            <li>Type1: {type1}</li>
+            <li>Type2: {type2}</li>
+            <li>Weather1: {weather1}</li>
+            <li>ATK: {atk}</li>
+            <li>DEF: {def}</li>
+            <li>STA: {sta}</li>
+            <li>Stat Total: {statTotal}</li>
+          </ul>
+        </Styled.ContentSection>
+      </Styled.CardSection>
+    </>
+  );
+};

client/src/components/pokemons/cards/interfaces.ts

@@ -0,0 +1,32 @@
+export interface IPokemonsProps {
+  id?: string;
+  name?: string;
+  pokedexNumber?: number;
+  imgName?: string;
+  generation?: number;
+  evolutionStage?: string;
+  evolved?: number;
+  familyID?: number;
+  crossGen?: number;
+  type1?: string;
+  type2?: string;
+  weather1?: string;
+  weather2?: string;
+  statTotal?: number;
+  atk?: number;
+  def?: number;
+  sta?: number;
+  legendary?: number;
+  aquireable?: number;
+  spawns?: number;
+  regional?: number;
+  raidable?: number;
+  hatchable?: number;
+  shiny?: number;
+  nest?: number;
+  new?: number;
+  notGettable?: number;
+  futureEvolve?: number;
+  cp40?: number;
+  cp39?: number;
+}