🦸 Code Hero

Mini projeto experimental usando dados da Marvel API para:

• Listar alguns personagens;
• Persquisar por nome de personagem;
• Exibir tela com detalhes do personagem (Descrição se houver, até 3 séries e eventos que o personagem tenha participado).

Screenshots

Versão Desktop

Modal com detalhes do personagem

Versão responsiva

Demo

https://codehero-vanillajs.netlify.app/

🛠 Tecnologias usadas

• HTML5
• CSS (CSS Grid e Flexbox)
• JavaScript (Destructuring, slice(), map() e Fetch API)

⚠️ Problemas encontrados

• Fazer a API funcionar seguindo a fraca documentação;
• API lenta para testar no portal;
• Carregamento lento de imagens.

🚀 Desafios e lições

• Nunca tinha feito um app somente com JS puro sem depender do jQuery;
• Treinar conhecimentos com JS moderno;
• Treinar CSS Grid;
• Treinar Responsividade;
• Aprender mais sobre consumo de APIs RESTful.

📝 TODO

• Testar formas de Lazy Loading;
• Melhorar o README;
• Experimentar commitizen;
• Mudar a forma de busca para "nome começa com";
• Mudar a fonte para títulos;
• Melhor validação do campo de busca;
• Paginação;
• Refinar responsividade;
• Testes!

API Reference

É necessário criar uma conta no Marvel Developer Portal para gerar as chaves para usar a API.

Endpoints usados

Listar todos os personagens

  GET /v1/public/characters

Busca por nome

  GET /v1/public/characters?name=${characterName}

Carregar detalhes por id

  GET /v1/public/characters/${characterId}