Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/augustodevjs/pokemon-challenge

Pokemon Challenge com .NET & React e Angular
https://github.com/augustodevjs/pokemon-challenge

Last synced: 6 days ago
JSON representation

Pokemon Challenge com .NET & React e Angular

Awesome Lists containing this project

README 

        
## 🖼️ Frontend - React & Angular





  

  

  

  

  









  A organização de pastas dos projetos Angular e React é feita dividindo as responsabilidades em módulos para organizar o projeto como um todo e facilitar o desenvolvimento. Os modulos são:




- **components**: Módulo que comporta todos os componentes feitos no projeto;

- **core**: Módulo que possui arquivos e utilitarios essenciais para o funcionamento da aplicação;

- **domain-types**: Módulo referente a todos os tipos criados com o auxilio do Typescript;

- **services**: Módulo que comporta todos os services que fazem comunicação com o Back-End;

- **styles**: Módulo que comporta estilizações globais;

- **pages ou modules**: Módulo que comporta todos os componentes referentes às páginas, seus modais, hooks, serviços que se comunicam e etc.



## 💡 Rodando o Front-End



### Pre-requisitos



Antes de tudo é necessário instalar: 



- Node.js



- Instalando o TypeScript



  ```sh

  npm install -g typescript

  ```



- Instalando o yarn

  ```sh

  npm install --global yarn

  ```

- Verificando se o yarn está instalado



  ```sh

  yarn --version

  ```



- Clonando o respositório



  ```sh

  git clone https://github.com/augustodevjs/undefined-challenge

  ```



- Entre no diretório do (Angular)



  ```sh

  cd ./frontend/angular

  ```



- Instale as dependencias do projeto (Angular)



  ```sh

  npm install

  ```



- Rodando o projeto no modo de desenvolvimento (Angular)



  ```sh

  ng server || ng s || npm start

  ```



- Entre no diretório do (React)



  ```sh

  cd ./frontend/react

  ```



- Instale as dependencias do projeto (React)



  ```sh

  yarn

  ```



- Variável de Ambiente (React & Angular)



  ```sh

  lembre-se de mudar a variável de ambiente



  (Angular) - mude no arquivo environment.development

  (React) - siga o exemplo do arquivo .env.example e crie um arquivo .env

  ```



- Rodando o projeto no modo de desenvolvimento (React)



  ```sh

  yarn run dev

  ```



- Na imagem do Pokemon você pode seguir esse formato da api do pokemon

  ```sh

  https://img.pokemondb.net/artwork/large/{nome-do-pokemon}.jpg

  ```



## :desktop_computer: Principais tecnologias utilizadas no Front-End



- React

- Angular

- Ng Boostrap

- Axios

- TypeScript

- Sweet Alert

- React Select

- React Modal

- React Hook Form

- Styled Components



## ⌨️ Back-End





Utilizei o framework .NET 7 junto com o Entity Framework para desenvolver a aplicação. Dividi os módulos e conectei tudo ao banco de dados MySQL. Organizei o código seguindo a abordagem de Domain Driven Design (DDD), o que facilitou bastante a implementação de regras de negócios e outros processos complexos. Além disso, incluí testes abrangentes na camada de aplicação, atingindo uma cobertura total de 100%.





  Dito isso, o projeto foi estruturado em 5 "camadas" que são:




- **API**: Comporta configurações da aplicação e controllers;

- **application**: Cuida da comunicação com o Domain, comportando: classes de serviços, interfaces, DTOs, etc;

- **infra**: Comporta o suporte geral às demais implementações como repositories, contextos e etc;

- **domain**: Comporta todas as entidades, interfaces e validações;

- **tests**: Comporta todos os testes das services.



## 💡 Rodando o Back-End



### Pre-requisitos



- NET SDK

- MySql

- DBeaver



- Entre no diretório do back



  ```sh

  cd ./backend/src/Pokemon.API

  ```



- Rode a API



  ```sh

  dotnet run

  ```



- Para vê os testes unitários do backend entre no diretório



  ```sh

  cd ./backend/tests/Pokemon.Application.Tests

  ```



- Rode os Testes



  ```sh

  dotnet test

  ```



## :desktop_computer: Principais tecnologias utilizadas no Back-End



- C#

- xUnit

- .NET 7

- MySql

- DBeaver

- AutoMapper

- FluentValidation

- Entity Framework