Um desafio front-end desenvolvido por @TiagoDiass onde pessoas podem procurar por livros usando a API da Marvel
Resultado final | Funcionalidades | Testes | Tecnologias utilizadas | Deploy | Como rodar
Shimmer effect
Modal de detalhes
Lista de quadrinhos
Shimmer effect
Modal de detalhes
Lista de quadrinhos
- App lista os quadrinhos ao carregar
- Usuário pode procurar por quadrinhos
- Usuário pode carregar mais quadrinhos (páginação)
- Efeito shimmer para o carregamento inicial
- Usuário pode adicionar quadrinhos na sua lista
- Usuário pode enviar um e-mail para alguém com os quadrinhos da sua lista (com um link mailto, o ideal seria ter um back-end para isso, não pude desenvolver isso por falta de tempo)
- Estilos responsivos
- Usuário pode ver mais detalhes do quadrinho através de um modal
Um resumo dos teste são:
- Testes dos contextos de Modal e de Lista de Quadrinhos
- Testes da página Home
- Testes da página ComicsList / Lista de Quadrinhos
- Testes do componente Header
- Testes dos utils
- Next.js- Next.js é um framework front-end construído em cima do React, ele traz algumas funcionalidades prontas como sistema de rotas por arquivos, geração de páginas estáticas e renderizadas no servidor. Eu o usei para desenvolver a app toda no geral.
- TypeScript - Typescript é um superset da linguagem JavaScript, usei ele para ganhar mais produtividade durante o desenvolvimento do projeto. Com ele, podemos tipar nossas variáveis, funções, e afins, o que facilita manutenção do código.
- Styled Components - Styled components é uma biblioteca de CSS-in-JS, nela, escrevemos CSS como SCSS porém dentro de arquivos JavaScript ou TypeScript, o que torna possível deixar nossos estilos mais programáveis. Eu a utilizei para estilizar toda a app.
- Axios - Axios é uma biblioteca para requisições HTTP, eu a utilizei para consumir a API da Marvel.
- React Testing Library - React Testing Library é uma bibloteca que permite que possamos testar nossos componentes React de forma simples e rápida. Eu a utilizei com Jest, para assim poder testar as páginas, componentes e contextos.
- API de Contexto do React - A API de contextos do React permite que possamos gerenciar o estado de nosso app de forma mais simples, ela resolve o famoso problema no universo front-end conhecido como prop-drilling.
- React Modal - A React Modal é uma biblioteca para podermos utilizar Modais dentro de aplicações front-end com React.
- Sweet Alert - Sweet Alert é uma biblioteca para poder mostrar mensagens de alerta e toasts. A utilizei para fazer os toasts quando o usuário adiciona ou remove um quadrinho da sua lista.
- Faker - Faker é uma biblioteca para poder gerar valores aleatórios. Eu a utilizei para os testes automatizados.
Eu fiz o deploy dessa aplicação na Vercel. Ela está configurada com uma integração contínua (continuous integration) com este repositório do Github, isso é, toda vez que o código do repositório no Github na branch main tiver uma atualização, a Vercel rodará o build do projeto e o colocará em produção. Clique aqui para ver o projeto em produção
Antes de tudo, você precisará clonar o repositório e instalar as dependências. Assumindo que você tenha Yarn, siga os passos abaixo:
# Clone o repositório
$ git clone https://github.com/TiagoDiass/south-frontend-challenge.git
# Entre no repositório
$ cd south-frontend-challenge
# Instale as dependências
$ yarn install
Para rodar o projeto, basta realizar os seguintes passos(assumindo que você seguiu os passos iniciais)
# Inicie o app
$ yarn dev
Para rodar os testes, basta realizar os seguintes passos(assumindo que você seguiu os passos iniciais)
# Rode os testes
$ yarn test
# Caso queira rodar os testes de forma a ver a cobertura do código, rode:
$ yarn test:coverage
👋 Espero que você tenha gostado deste projeto 😃