Miguel Silva Barbosa

README.md

@@ -1,58 +1,34 @@
-# Teste de Desenvolvimento Web
-
-Olá Dev! Tudo bem?
-
-A RedFox está sempre em busca de profissionais interessantes e interessados, com boa capacidade de aprendizado, adaptação e principalmente motivação!
-
-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.
-
-Agora vamos ao teste!
-
-
-## Desafio Pokémon
-
-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.
-
-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.
-
-Fique à vontade com o layout, precisamos de uma interface que consiga entregar as funcionalidades principais e substituir o excel, só isso.
-
-
-## Consigo fazer tudo isso?
-
-Consegue sim!
-
-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.
-
-
-## Por onde começo?
-
-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.
-
-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.
-
-
-## E o Layout??
-
-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. 
-
-
-## Regras
-
-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
-
-
-## Só isso?
-
-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! (^_^)
+# Pokedex
+
+Olá! Meu nome é Miguel!
+
+# Getting Started:
+## Back-end 
+Desenvolvido com NodeJS e ExpressJS.
+Database postgreSQL com Docker compose
+### Inicindo e configurando server back-end e database:
+Rode os seguintes comandos:
+```bash
+cd backend
+yarn
+
+yarn db:dev:up
+npx prisma generate
+npx prisma db push
+
+yarn build
+yarn start
+```
+URL da API [http://localhost:3001](http://localhost:3001)
+
+## Front-end
+Desenvolvido com NextJS e tecnologias relacionadas.
+### Iniciar server front-end:
+```bash
+cd frontend
+yarn
+
+yarn build
+yarn start
+```
+Abra pra visualizar o projeto: [http://localhost:3000](http://localhost:3000).

backend/.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = false

backend/.env

@@ -0,0 +1 @@
+DATABASE_URL="postgresql://m1guelsb:123@localhost:5434/pokemondb?schema=public"

backend/.eslintrc.json

@@ -0,0 +1,20 @@
+{
+  "env": {
+    "es2021": true,
+    "node": true
+  },
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  "overrides": [],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "indent": ["error", 2],
+    "linebreak-style": ["error", "unix"],
+    "quotes": ["error", "single"],
+    "semi": ["error", "always"]
+  }
+}

backend/.gitignore

@@ -0,0 +1,40 @@
+# compiled output
+/dist
+/node_modules
+
+# env files
+# .env
+# .env*.local
+# .env*.test
+
+# Logs
+logs
+*.log
+npm-debug.log*
+pnpm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# OS
+.DS_Store
+
+# Tests
+/coverage
+/.nyc_output
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json

backend/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": false
+}

backend/docker-compose.yml

@@ -0,0 +1,10 @@
+version: '3.8'
+services:
+  dev-db:
+    image: postgres:13
+    ports:
+      - 5434:5432
+    environment:
+      POSTGRES_USER: m1guelsb
+      POSTGRES_PASSWORD: 123
+      POSTGRES_DB: pokemondb

backend/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "pokemon-back",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "build": "tsc",
+    "start": "ts-node -r tsconfig-paths/register src/server.ts",
+    "dev": "ts-node-dev -r tsconfig-paths/register --transpile-only --respawn --ignore-watch node_modules --exit-child src/server.ts",
+    "prisma:dev:deploy": "prisma migrate deploy",
+    "db:dev:up": "docker compose up dev-db -d",
+    "db:dev:rm": "docker compose rm dev-db -s -f -v",
+    "db:dev:restart": "yarn db:dev:rm && yarn db:dev:up && sleep 3 && yarn prisma:dev:deploy"
+  },
+  "dependencies": {
+    "@prisma/client": "^4.12.0",
+    "axios": "^1.3.5",
+    "cors": "^2.8.5",
+    "express": "^4.18.2"
+  },
+  "devDependencies": {
+    "@types/cors": "^2.8.12",
+    "@types/express": "^4.17.14",
+    "@types/multer": "^1.4.7",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "@typescript-eslint/parser": "^5.43.0",
+    "dotenv": "^16.0.3",
+    "eslint": "^8.27.0",
+    "ts-node": "^10.9.1",
+    "ts-node-dev": "^2.0.0",
+    "tsconfig-paths": "^4.1.0",
+    "typescript": "^4.9.3",
+    "delayed-stream": "~1.0.0"
+  }
+}

backend/prisma/migrations/20230412230923_add_pokemon_table/migration.sql

@@ -0,0 +1,19 @@
+-- CreateEnum
+CREATE TYPE "PokemonTypes" AS ENUM ('normal', 'fire', 'water', 'grass', 'flying', 'fighting', 'poison', 'electric', 'ground', 'rock', 'psychic', 'ice', 'bug', 'ghost', 'steel', 'dragon', 'dark', 'fairy');
+
+-- CreateTable
+CREATE TABLE "pokemons" (
+    "id" INTEGER NOT NULL,
+    "name" TEXT NOT NULL,
+    "evolutionStage" INTEGER NOT NULL,
+    "type1" "PokemonTypes" NOT NULL,
+    "type2" "PokemonTypes",
+    "statsTotal" INTEGER NOT NULL,
+    "atk" INTEGER NOT NULL,
+    "def" INTEGER NOT NULL,
+    "sta" INTEGER NOT NULL,
+    "isEvolved" BOOLEAN NOT NULL,
+    "isLegendary" BOOLEAN NOT NULL,
+
+    CONSTRAINT "pokemons_pkey" PRIMARY KEY ("id")
+);

backend/prisma/migrations/20230413204115_add_image_column_to_pokemon_table/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - Added the required column `image` to the `pokemons` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "pokemons" ADD COLUMN     "image" TEXT NOT NULL;

backend/prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"

backend/prisma/schema.prisma

@@ -0,0 +1,46 @@
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+model Pokemon {
+  id             Int           @id
+  name           String
+  image          String
+  evolutionStage Int
+  type1          PokemonTypes
+  type2          PokemonTypes?
+  statsTotal     Int
+  atk            Int
+  def            Int
+  sta            Int
+  isEvolved      Boolean
+  isLegendary    Boolean
+
+  @@map("pokemons")
+}
+
+enum PokemonTypes {
+  normal
+  fire
+  water
+  grass
+  flying
+  fighting
+  poison
+  electric
+  ground
+  rock
+  psychic
+  ice
+  bug
+  ghost
+  steel
+  dragon
+  dark
+  fairy
+}

backend/src/app.module.ts

@@ -0,0 +1,7 @@
+import { PokemonModule } from "./modules/pokemon/pokemon.module";
+
+export class AppModule {
+  instantiate() {
+    new PokemonModule().instantiate();
+  }
+}

backend/src/helpers/HttpError.ts

@@ -0,0 +1,20 @@
+type HttpStatusCode = 200 | 400 | 404 | 500;
+
+export interface iHttpError extends Error {
+  name: string;
+  statusCode: HttpStatusCode;
+  message: string;
+}
+
+export class HttpError extends Error {
+  name: string;
+  statusCode: HttpStatusCode;
+  message: string;
+
+  constructor({ name, statusCode, message }: iHttpError) {
+    super();
+    this.name = name;
+    this.statusCode = statusCode;
+    this.message = message;
+  }
+}

backend/src/helpers/api/getPokemonsWithImages.ts

@@ -0,0 +1,27 @@
+import axios from "axios";
+import { POKEMON_DATA } from "@/static/POKEMON_DATA";
+import { Pokemon } from "@prisma/client";
+
+export const getPokemonsWithImages = async (): Promise<Pokemon[]> => {
+  return await Promise.all(
+    POKEMON_DATA.map(async (pokemon) => {
+      try {
+        const res = await axios.get(
+          `https://pokeapi.co/api/v2/pokemon/${pokemon.id}`
+        );
+        const pokeImg = res.data.sprites.other.dream_world
+          .front_default as string;
+
+        return {
+          ...pokemon,
+          image: pokeImg,
+        };
+      } catch {
+        return {
+          ...pokemon,
+          image: "",
+        };
+      }
+    })
+  );
+};

backend/src/main.ts

@@ -0,0 +1,28 @@
+import "dotenv/config";
+import cors from "cors";
+import express, { Request, Response, Router } from "express";
+import { AppModule } from "./app.module";
+import { PrismaClient } from "@prisma/client";
+
+export const prisma = new PrismaClient();
+
+export const router = Router();
+const app = express();
+
+app.use(express.urlencoded({ extended: false }));
+app.use(express.json());
+app.use(cors());
+
+app.use(router);
+
+app.use((err: Error, request: Request, response: Response) => {
+  if (err instanceof Error) {
+    return response.status(500).json({
+      message: err.message,
+    });
+  }
+});
+
+new AppModule().instantiate();
+
+export { app };