Desafio Front-End Dinheirow | Tarcísio Almeida

Meu portfolio: https://tarcisio-portfolio.vercel.app/

Linkedin: https://www.linkedin.com/in/tarcisio-a-0a5577207/

Acesse: https://marvel-heroes-frontendchallenge-tarcisio.vercel.app/

🧑‍💻 Sobre o Projeto

Pontos a se destacar:

1. SEO: Utilização de tags semânticas para o conteúdo, h1 para o texto principal > button > img , main, section, header, footer e etc.
2. Image CDN: Utilização de serviços CDN para garantir otimização das imagens
3. Prettier: Utilização de sorting para manter um padrão de organização e posição das classes tailwind e imports em cada arquivo.
4. Husky: Utilização de pre-scripts para garantir a prevenção de erros antes de cada commit.
5. Actions: workflows para automação de testes e2e e lint
6. Padrão de commits: Husky está rodando com commitlint para garantir a padronização dos commits e utilizando o commitizen para forçar o uso dos padrões sempre que algum commit for realizado.
   
   
   
   
7. Auto-formating: Husky está garantindo a autoformatação dos arquivos em cada commit rodando o prettier.
8. Metadata dinâmico: para garantir uma boa experiência no compartilhamento de personagens, o metadata da rota está de acordo com o personagem que está sendo compartilhado:
   
   
   Card exemplo de personagem compartilhado via Discord.
   
   
9. Ícones espciais: alguns personagens possuem ícones especiais como mostrado abaixo
   
   
   Personagens que possuem ícone especial: Wolverine, Deadpool, Thor, Thanos, Spider Man, Captain America, Captain Marvel, Magneto, Iron Man
   

🎨 Animações

As animações são muito importantes, com elas podemos direcionar 100% da atenção do usuário para o que importa.

• Comic background: animação utilizada pra destacar de forma sutil o fundo de quadrinhos (somente no lightmode)
• Characater card floating: animação sutil para destacar o card do personagem selecionado
• Color brightness change: animação sutil para destacar a mudança de cor dos cards dos personagens ao hover

---

✅ Testes e2e

Utilizei cypress para testar os fluxos de busca de personagem com sugestão, filtro de personagens, paginação e rota para detalhes de personagem e etc

📚 Stack de desenvolvimento e decisões

• Next.js, última versão usando App router (experimental), ainda não usaria em um projeto em produção.
• Typescript, Eslint com rotina automatizada usando Husky para otimizar código antes do commit.
• React Query para encapsular os dados
• Tailwind css e CSS para animações, estilização
• Headless UI para utilizar na criação de alguns componentes
• yet-another-react-lightbox para feature de galeria
• lodash para garantir qualiade nas requests de input
• slick-carousel para o showcase dos comics

⌚️ Features que poderia ter feito com mais tempo

• Melhoria na paginação da tela principal
• Paginação na tela de detalhes do personagem
• Melhoria no input de pesquisa para garantir a funcionalidade sem erros inesperados
• Dockerização do frontend
• Testes unitários com jest
• Cobrir mais possíveis use cases no cypress

💼 Agradecimento

Agradeço a oportunidade de participar do processo. Espero que gostem.

---

💻 Pré-requisitos

Antes de começar, verifique se você atendeu aos seguintes requisitos:

• Node.js 18.15.0+
• Ter uma public api key da marvel api
• Gerar um hash md5 para as requests

Site para gerar md5 para hash: https://www.md5hashgenerator.com/
Marvel API: https://developer.marvel.com/

👇 Instalando Desafio Front-End Dinheirow

Para instalar o Desafio Front-End Dinheirow, siga estas etapas:

Linux e macOS:

npm install
npm run prepare

Windows:

npm install
npm run prepare

☕ Usando Desafio Front-End Dinheirow

Para usar Desafio Front-End Dinheirow, siga estas etapas:

npm run dev
# or
yarn dev
# or
pnpm dev

Abra http://localhost:3000 no seu navegador e veja o resultado.

Para compilar Desafio Front-End Dinheirow, siga estas etapas:

npm run build

Esse é um projeto Next.js criado com create-next-app.