Job Test (frontend)

Esse é o repositório frontend do teste para Dev Jr proposto pela Devnology.

➡ Descrição do teste

➡ Documentação da API online

➡ Repositório backend

➡ Link da API (status: off ❌)

➡ Link do site (status: on ✔) - Caso demore para servidor responder, considere esperar um tempo para a chegada das informações.

📕 Sumário

1. Features
2. Tecnologias usadas
3. Para rodar localmenteu
4. Para fazer deploy na Vercel
5. Como ficou cada tela

1. ⚙ Features

Proposto pelo teste

• Cadastrar a compra de um veículo, modelo, marca, ano de fabricação, placa, cor, chassi, data da compra e valor da compra.
• Registrar a venda de um veículo, com data da venda, valor da venda e comissão do vendedor (10% sobre o lucro da venda).
• Listar todos os veículos
• Listar veículos disponíveis
• Listar histórico de veículos vendidos
• Listar o valor todal de compras
• Listar o valor todal de vendas
• Lucro/pejuízo
• Valor pago em comissão

ToDO

• Editar histórico de vendas

  • Não sei se seria algo legal de se ter, mas basta adicionar a opção de editar no frontend, pois no backend já existe

• Configurar o Electron e criar um app desktop

  • Aqui eu encontrei dificuldades, pois apesar de ter conseguido criar o app desktop, eu não consegui fazer com ele fizesse requisições para API

• Bug ao renderizar o form de venda

• Verificar placa, para ela ser única (backend)

• Bug em listar veículos disponíveis

• Bug no mobile (setando a propriedade do controle responsivo como true)

• Vender veículo

• Editar veículo

• Excluir veículo

• Excluir venda do histórico

• Tentar transformar SaleForm em um componente que aparece suspenso ao clicar em 'Vender

• Mobile

2. 💻 Tecnologias usadas

• React
• React router dom
• React Toastify
• Styled component
• Axios
• Prop types
• Lodash
• ESLint AirBnB
• Prettier

3. 🎉 Para rodar LOCALMENTE

1. Clone o repositório:

   git clone https://github.com/GustavoGomesDias/test-001-frontend.git
   

2. Instale todas es tec's usadas junto do Node JS:

   npm install
   

3. Rode o aplicativo e então será aberta uma nova aba no seu navegador padrão:

   npm start
   

4. Para que ele funcione totalmente, seria necessário que ele tivesse uma conexão com a API que foi desenvolvida junto desse app, mas como esse é apenas um teste, eu provavelmente vou limitar quem pode fazer requisições a API caso ela estaja on, então siga a sessão Para rodar o projeto LOCALMENTE do repositório backend para ter a API servindo está parte aqui.

5. Configurando a API para servir a parte de frontend:

   • Vá até o arquivo app.js
   • Configure a whitelist para que a parte de frontend consiga fazer requisições:

     const whiteList = [
       'http://localhost:3000', // <=== Esse link deverá ser adicionado
       'https://test-001-frontend.vercel.app',
     ];

6. Configurando o axios no frontend:

• Configure o local onde o Axios vai chamar (path: src/config):

  export default axios.create({
    baseURL: 'http://localhost:3001',
  });

4. 🚀 Para fazer deploy na Vercel:

1. Crie uma conta na Vercel
2. Clique em "New Project"

3. Importe um repositório

5. 🎨 Como ficou cada Tela

Compras

Vendas

Receitas

Responsivo

Autor

Gustavo 😎