Skip to content

Código fonte de um desafio técnico onde realizei a criação de um CRUD de Baralho de Pokémon utilizando a API do PokemonTCG

Notifications You must be signed in to change notification settings

https-ruan/pokemon-deck

Repository files navigation

Pokemon Deck

Disponível AQUI

Este projeto é um CRUD para criação de baralhos de Pokémon, utilizando a API PokemonTCG. Ele permite aos usuários criar, visualizar, atualizar e excluir baralhos de Pokémon, além de gerenciar as cartas em cada baralho.

Todos os baralhos criados estão sendo salvos no local storage da máquina.

Tecnologias Utilizadas

  • Angular 16
  • Tailwind CSS
  • Ignite UI (Infragistics)

Estrutura do Projeto

📦 src
┣ 📂 app
┃ ┣ 📂 @core
┃ ┃ ┣ 📂 constants
┃ ┃ ┃ ┗ 📜 [arquivos de constantes principais para o projeto, como `deck-rules.ts`]
┃ ┃ ┗ 📂 interfaces
┃ ┃   ┗ 📜 [arquivos de interfaces principais para o projeto, como `environment.interface.ts`]
┃ ┣ 📂 @shared
┃ ┃ ┣ 📂 components
┃ ┃ ┃ ┣ 📂 go-to-home
┃ ┃ ┃   ┗ 📜 [componente para navegação para a página inicial]
┃ ┃ ┃ ┣ 📂 loader
┃ ┃ ┃   ┗ 📜 [componente para exibição de loader]
┃ ┃ ┃ ┣ 📂 title
┃ ┃ ┃   ┗ 📜 [componente para exibição de título]
┃ ┃ ┃ ┗ 📂 toast
┃ ┃ ┃   ┗ 📜 [componente para exibição de toast]
┃ ┃ ┣ 📂 enums
┃ ┃ ┃ ┗ 📜 [enumeradores compartilhados, como `super-type.enum.ts`]
┃ ┃ ┣ 📂 functions
┃ ┃ ┃ ┣ 📂 validators
┃ ┃ ┃   ┗ 📜 [arquivos de funções de validação, como uma validação personalizada para um reactive form]
┃ ┃ ┣ 📂 guards
┃ ┃ ┃ ┗ 📜 [guardas de rotas, que validam a entrada do usuário em determinada rota.]
┃ ┃ ┣ 📂 interfaces
┃ ┃ ┃ ┗ 📜 [interfaces compartilhadas]
┃ ┃ ┗ 📂 services
┃ ┃   ┗ 📜 [serviços compartilhados]
┃ ┣ 📂 create
┃ ┃ ┗ 📜 [componente da tela de criação de baralhos]
┃ ┣ 📂 home
┃ ┃ ┗ 📜 [componente da tela de inicial]
┃ ┣ 📂 list
┃ ┃ ┗ 📜 [componente da tela de listagem de baralhos]
┣ 📂 assets
┃ ┗ 📜 [ativos do projeto, como imagens]
┣ 📂 environments
┃ ┗ 📜 [arquivos de configuração de ambiente]

Telas e Funcionalidades

Página Inícial (home.component.ts | http://localhost:4200/):

Tela de entrada do projeto contendo a logo personalizada e 2 botões de redirecionamento sendo eles: Meus baralhos e Criar baralho. O botão que vai para a tela de listagem dos baralhos criado fica desabilitado enquanto você não possuir uma coleção.

Quando usuário não possui baralhos criados: alt text

Quando o usuário possui baralhos criados: alt text

Página de Criação de Baralho (create.component.ts | http://localhost:4200/create):

Tela principal do projeto contendo um formulário básico para definir o baralho.

  • Requisitos do baralho: Nome; Mínimo 24 cartas; Máximo 60 cartas; Até 4 cartas com o mesmo nome (Todos os valores podem ser alterados em src/app/@core/constants/deck-rules.ts).
  • Input [TEXT] Nome do baralho (required): Define um nome para o baralho;
  • Select Página de cartas: Seleciona a página de cartas que você gostaria de visualizar (consulta a API do PokemonTCG quando página não foi visitada ainda, se a página selecionada já foi escolhida anteriormente apenas carrega as cartas da respectiva página, para otimização de performance);
  • Lista de cartas: Espaço reservado para o usuário clicar nas cartas que deseja incluir em seu baralho,

alt text

Página de Edição de Baralho (create.component.ts | http://localhost:4200/update/:ID):

Mesmo componente utilizado na tela de listagem, porém adaptado para receber um ID de um baralho criado para que seja realizada alterações se necessário. Trás os dados atuais do baralho (Nome preenchido e Cartas selecionadas) e permite o usuário atualiza-lo.

alt text

Página de Listagem de Baralhos Criados (list.component.ts | http://localhost:4200/list):

Tela de listagem contendo os baralhos criados anteriormente, podemos clicar em cada baralho para visualizar seus detalhes, editar ou apaga-lo.

Baralhos criados alt text

Detalhes do baralho alt text

Exclusão de baralho alt text

Edição de baralho

Quando clicar será redirecionado para a Página de Edição de Baralho

alt text

Componentes compartilhados

Loader

Texto exibido é dinâmico e pode ser alterado.

alt text

Go to home

Botão disponível em todas as telas que não forem a inicial, pois ao clicar redireciona para a raiz.

alt text

Toast

Mensagem exibida é dinâmica e pode ser alterada.

alt text

About

Código fonte de um desafio técnico onde realizei a criação de um CRUD de Baralho de Pokémon utilizando a API do PokemonTCG

Topics

Resources

Stars

Watchers

Forks