Desafio Pokedex com Angular

Desafio do Bootcamp Desenvolvimento Frontend com Angular no qual deveria ser feito uma Pokedex consumindo uma API (https://pokeapi.co/). O projeto deveria ser feito em html, css e javascript, mas como deixei para fazer depois das aulas de Angular, acabei fazendo no Angular e fiz o deploy na vercel: https://luiz-poke-dex.vercel.app/

github: https://github.com/luizsant/luiz-poke-dex

Sobre o Projeto

Este projeto, originalmente concebido para ser realizado em JavaScript, HTML e CSS como parte de um desafio da Digital Innovation One (DIO) no Bootcamp Desenvolvimento Frontend com Angular, foi adaptado para usar Angular em um esforço de aprofundar e aplicar o conhecimento adquirido nas aulas de Angular. A ideia era transformar o desafio inicial de criar uma aplicação Pokédex em uma oportunidade de explorar as capacidades avançadas do Angular, um framework moderno e poderoso para desenvolvimento web.

Tecnologias Utilizadas

• Angular: Escolhido pelo seu poderoso ecossistema e arquitetura baseada em componentes, o Angular foi utilizado para estruturar a aplicação de forma modular e eficiente.
• HTML: Utilizado para estruturar o conteúdo da aplicação.
• CSS: Aplicado para estilizar e apresentar o conteúdo de forma atraente e responsiva.
• TypeScript: Como linguagem principal do Angular, foi usada para adicionar tipagem forte e recursos modernos de programação.

Funcionalidades Principais

• Listagem de Pokémon: A aplicação apresenta uma lista interativa de Pokémon, permitindo aos usuários explorar uma variedade de espécies.
• Detalhes do Pokémon: Ao selecionar um Pokémon, os usuários podem visualizar informações detalhadas, incluindo habilidades, tipos e estatísticas.
• Integração com PokéAPI: A aplicação consome dados da PokéAPI para garantir informações atualizadas e completas.

Desafios e Soluções

• Gerenciamento de Estado dos Modais: Um dos principais desafios foi gerenciar a exibição dos modais de detalhes dos Pokémon. Implementamos um sistema centralizado de controle utilizando BehaviorSubject do Angular, permitindo que apenas um modal seja exibido por vez e adicionando suporte para fechá-los com a tecla "Esc".

Conclusão

Este projeto não só foi um desafio enriquecedor proposto pela DIO, mas também uma oportunidade valiosa para aplicar e expandir nossos conhecimentos em Angular. Ele demonstra a flexibilidade do Angular em adaptar projetos existentes e a eficácia de suas ferramentas e metodologias para criar aplicações web modernas e funcionais.