O projeto consiste em efetuar um site responsivo que possa fazer requisições na API criada pela a marvel, sendo possível navegar pela biblioteca de personagens da Marvel. O site criado conta com três funções feitas:
- Lista de Personagens - Página com a possibilidade de carregar todos os personagens da API, através de múltiplas requisições em formato de "Load More", ou seja, conforme o usuário quiser mais personagens na página, basta apertar o botão de "Carregar Mais"
- Filtragem de Resultados - Função com o objetivo de pesquisar personagens que começam com a string inserida no Input de filtro, esta função é capaz de pesquisar na API toda e retornar os resultados desejados pelo usuário, sendo possível conferir os detalhes de cada personagem do filtro ao clicar no icone da sua divisão.
- Detalhes do Personagem - Página com a possibilidade de requisitar todos os principais detalhes do personagem na API, foi programado para que o usuário possa ver os seguintes itens:
Foto do personagem, Nome, Descrição,além dos Quadrinhos, Histórias, Séries e Eventos que o personagem participa
Para o projeto ser realizado, foi utilizado as seguintes dependências para ReactJS:
- Estudei o esboço do projeto com base nas aulas e projetos feitos durante as aulas do Estartando Devs
- Criei o projeto e mapeei as rotas através do React-router-dom, além de fazer a configuração dos requests da API com o Axios e Blueimp-md5
- Criei os componentes comuns que poderiam ser utilizados no projeto todo
- Montei as páginas principais e estilizei usando Sass
- Efetuei um Code Review em cada um dos componentes e páginas para buscar bugs e otimizar os códigos produzidos
Para instalar as dependências do projeto localmente, utilize a instrução abaixo:
- Após baixar o projeto, crie um arquivo .env com as váriaveis locais que podem ser encontradas no arquivo .env.example do repositório
- Digite no terminal
yarn installe espere pela instalação das dependências, após isso, siga para a etapa de Execução
Para executar o programa é necessário instalar as dependências utilizadas, que estão no package.json e após isso executar o projeto,para estar operações, utilize os comandos abaixo:
- Digite no terminal
yarn startpara rodar o projeto em modo desenvolvimento. - Caso queira testar a aplicação em um ambiente de produção, utilize o Deploy totalmente funcional feito durante o projeto
- Vítor Ribeiro (MrVtR)
