List Characters Star Wars 🚀

✨ Informações adicionais

API utilizada: https://swapi.dev/api

Bibliotecas utilizadas e recursos desenvolvidos:

1. Create React App - Criação do projeto ReactJs configurado
2. react-router-dom - Para trabalhar com rotas no ReactJs
3. axios - Para trabalhar com requisições de dados
4. jest - Testes unitários para garantir o funcionamento do código
5. Ant Design - como framework de criação dos componentes visuais
6. Typescript - Verificação de tipos estática, autocompletar e detecção de erros durante o processo de desenvolvimento
7. Docker - Ferramenta para simular a construção de um ambiente real de DEV

👉 Desafio

Utilizando a API: https://swapi.dev/ e ReactJS / TypeScript

• Construa uma interface que liste os personagens;
• A tela, além da grid, deverá ter um filtro que permita filtrar pelo nome dos mesmos;
• O grid deverá ser paginado, exibindo 10 registros por vez, e botões de navegação entre os mesmos;
• Deverá ser utilizado o Ant Design como framework de criação dos componentes visuais, incluindo responsividade;
• A aplicação deve ser conteinerizada usando Docker, simulando a construção de um ambiente real de DEV;
• A implementação deverá vir acompanhada da escrita de testes unitários;

---

📸 Imagens da aplicação

---

---

📸 Mobile

---

Abaixo estão instruções detalhadas sobre como configurar e executar o projeto.

✅ Pré-requisitos

Certifique-se de que você tenha o Node.js e o npm instalados no seu sistema.

🎉 Instalação

1. Clone este repositório no seu ambiente local:

   git clone https://github.com/EderJrDev/list-star-wars.git

2. Navegue até o diretório do projeto:

   cd list-star-wars

3. Crie um arquivo .env e adicione no mesmo:

   REACT_APP_SWAPI_URL='https://swapi.dev/api'

4. Instale as dependências do projeto executando:

   npm install

depois:

npm start

💻 Aplicação no Docker

Para visualizar a aplicação conteinerizada usando Docker execute:

docker build -t list-star-wars .

Execute o container

docker run -p 3000:3000 spa-list-star-wars

---

Acesse também o link da Vercel

✨ Divirta-se navegando, e que a força esteja com você! 🚀