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:

Quando o usuário possui baralhos criados:

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,

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.

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

Detalhes do baralho

Exclusão de baralho

Edição de baralho

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

Componentes compartilhados

Loader

Texto exibido é dinâmico e pode ser alterado.

Go to home

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

Toast

Mensagem exibida é dinâmica e pode ser alterada.