Este é um projeto React criado para o Desafio React proposto no processo seletivo da vaga de Desenvolvedor Front End da Tiflux. Você pode usar este guia para configurar e iniciar a aplicação em seu ambiente de desenvolvimento local. Além disso, abaixo há uma breve explicação da aplicação e suas funcionalidades.
Antes de começar, certifique-se de ter o Node.js e o npm (ou yarn) instalados em sua máquina.
-
Clone o Repositório:
No terminal, navegue até a pasta onde você deseja clonar o repositório e execute o seguinte comando para clonar o repositório:
git clone https://github.com/VitorComin/desafio-react.git
-
Navegue até a Pasta do Projeto:
Use o comando 'cd' para entrar na pasta do projeto recém-clonado:
cd desafio-react -
Instale as dependências:
Execute o seguinte comando para instalar as dependências do projeto:
npm install
ou
yarn
-
Inicie o Servidor de Desenvolvimento:
Após a conclusão da instalação das dependências, você pode iniciar o servidor de desenvolvimento com o seguinte comando:
npm start
ou
yarn start
A aplicação consiste em uma aplicação Web que apresenta os dados da API do Starwars por meio de um dashboard com estatísticas e tabelas, usando a biblioteca ANTD.
A aplicação apresenta uma página home, que é a página inicial, onde é carregado os dados da API simbolizados por um spin e, após carregados, os apresenta de forma formatada conforme o modelo disponibilizado.
O layout, as tabelas, inputs, área de estatisticas e mais componentes foram utilizados da biblioteca ANTD.
As ferramentas de search funcionam pesquisando sempre pela primeira coluna da tabela, onde é apresentado os resultados. Caso a pesquisa não contenha nada, todos os resultados serão apresentados.
No canto superior direito da tela, onde aparece o avatar do usuário e o "User", há um link que te leva ao caminho "/login", que troca o content da aplicação por outra página, onde coloquei inputs de username, senha e um botao para enviar, simulando um login. O foco de fazer essa página é aproveitar esse avatar e "User" que já era proposto pro canto superior da tela para mostrar o React Router, sem alterar a proposta originial, não alterando o menu e afins.
Para voltar a página inicial, os itens do canto superior esquerdo da tela, no caso o logo da Tiflux e a opção Dashboard do menu, estão dentro de um Link também, que direcionam ao caminho "/", que é a página inicial, onde se encontram os dashboards.
Também, no canto inferior esquerdo da página, temos um icone que, ao clicar, leva para o caminho "/", servindo como uma opção de voltar para a tela inicial. Esse icone aparece na parte de baixo do menu sider nas duas páginas.
