Marvel Heroes

Clique aqui para acessar o projeto

Menu

• Marvel Heroes
  • Apresentação
  • Objetivo
  • Funcionalidades
  • Tecnologias
  • Execução
  • Status
  • Contato

Apresentação

• Esse aplicativo é um desafio front-end proposto pela empresa Fpass, com o objetivo de testar as capacidades do candidato.
• O projeto foi iniciado com Next.js, React.js, typescript.
• Foi instalado a dependência de estilização Styled Components
• Definido as configurações do Styled Components no arquivo registry.tsx para ingetar automáticamente a estilização nos arquivos html.
• As tipagens separadas na pasta interfaces e a lógica na pasta utils para facilitar a manutenção.
• Foi criado pastas para armazenar arquivos de estilização e componentes reutilizáveis.
• Dentro da pasta app tem o arquivo page.tsx que é a página inicial, a página search para pesquisar pelos personagens e a página description para mostrar a descrição de cada personagem selecionado, seja na página inicial, seja na página de busca.
• Na página inicial é listado 21 personagens para desktop, e 20 para tablet e mobile
• Foi criado dois botões na página inicial, o botão para mostrar os próximos 21 ou 20 personagens, e o botão para voltar para os personagens anteriores.
• Na página de busca, se o campo estiver vazio, irá renderizar todos os personagens, se digitar um nome que não existe, aparecerá uma mensagem avisando que não foi encontrado o personagem, se o nome do heroi pesquisado existir no array, será listado os personagens referente ao valor do input.

Objetivo

O objetivo deste projeto é criar uma aplicação de que exiba os personagens da marvel por cartas, e ao selecionar uma carta específica, mostrar detalhes desse personagem, podendo pesquisar também pelo nome na página de busca.

Funcionalidades

• Exibir as cartas dos herois na página principal.
• Ao selecionar uma carta, será redirecionado para a página onde contem mais detalhes sobre esse personagem.
• Você também pode pesquisar pelo personagem específico indo em Search.

Tecnologias

As seguintes tecnologias foram utilizadas neste projeto:

• Next.js.
• TypeScript.
• Styled Components.
• Axios.

Execução

Para executar o projeto você pode fazer um clone com o commando

npm git clone git@github.com:MarceloKade/desafio-frontend-fpass.git

e no terminal digitar

npm install

após instalar as dependências.

npm run dev

Status

• Completed:

Contato