O repositório tem como objetivo solucionar o desafio proposto pela EuroIT com parceria da Easy Carros para a vaga de Desenvolvedor Front End, a descrição do desafio pode ser encontrada no link.

A base do desafio é criar um Aplicativo ou SPA que conectado a API fornecida pela Easy Carros atue como um controlador de frota para o usuário.

Para o desafio optei por utilizar React e construir uma SPA em conjunto com algumas bibliotecas para chegar ao resultado esperado.

Para utilizar os projetos é necessário ter o Node instalado na máquina, o projeto foi criado utilizando node na versão 12.16.3 download aqui.

Para rodar o projeto basta utilizar o comando:

  $ npm install

  # ou caso utilize yarn
  $ yarn install

$ npm run start
# ou caso utilize yarn
$ yarn start

O projeto irá rodar na porta 3000.

Node foi a principal tecnologia a ser utilizada, o projeto utiliza:

• React (criado a partir do create-react-app)
• Axios (para recuperar os dados da Api)
• React Router Dom (para gerenciar a navegação entre as páginas)
• React Toastify (para os alertas que são exibidos)
• Styled Components (para auxiliar na criação dos componentes, estilos, e temas)
• Styled Icons (para termos opções de ícones para menus, botões e logo)
• EsLint e Prettier (para manter o codigo padronizado e coeso)

O projeto irá funcionar sem a api, porém o não irá conseguir acessar o aplicativo devido o login, caso a api não esteja rodando localmente ou utilizando uma outra porta será necessário modificar o arquivo API.js localizado em:

src/
  -utils/
    API.js

Basta trocar a baseURL para um endereço ou porta que reflita o projeto backend. Para fazer login, confira as credenciais da API Backend aqui.

src/
  -assets/
  -components/
  -pages/
    -Frota/
    -Login/
  -services/
  -utils/

Pasta o nosso reset, nosso css global e o nosso tema padrão, os arquivos são importados pelo arquivo index.js.

Nesse diretório ficam os componentes que podem ser compartilhados no nosso projeto, componentes 'comuns' para o projeto, temos o nosso FormInput que auxilia na construção e validação dos nosso campos de input, o Header que juntamente com o MenuList provém nossa barra na área logada com as opções do menu e por fim os nosso Wrappers de Páginas(PageWrapper) e Alertas(ToastWrapper).

O diretório onde ficam armazenadas as páginas, cada página fica dentro do seu respectivo diretório, a página tem como principal responsabilidade buscar e tratar dados (através do services) para serem repassados para os componentes.

Caso a pagina necessite de estilos própios eles são encontrados no arquivos styled.js que ficam dentro do diretório da página e não devem ser importados por nenhuma outra página, caso isso ocorra ele deve ser deslocado para o diretório _components- e virar dependência de ambas as páginas.

O diretório services armazena os arquivos responsáveis por recuperar e enviar dados para nossas API's.

Por fim o diretório de utilitário está o nosso arquivo de criação da nossa API base e os nossos validadores.