/dsvendas

Dashboard de vendas com ReactJS e Typescript, com dados forneceidos por uma API feita com Spring e Java

Primary LanguageJava

Analise o desempenho das suas vendas por diferentes perspectivas

🚧 Concluído 🚀 🚧

Tabela de conteúdos

💻 Sobre o projeto

DS Vendas - é um simples projeto onde é exibido um dashboard contendo informações sobre as vendas realizadas por um time de vendedores. Estas informações são obtidas a partir de dados fornecidos por um BackEnd construído com Spring Boot.

Projeto desenvolvido durante a Semana Spring React 4 oferecida pela DEVSUPERIOR.

  • OBS.: Ao acessar a página do projeto, espere um momento até que os dados sejam carregados. Isto ocorre porque o plano gratuito do Heroku não mantém a API bem otimizada.

⚙️ Funcionalidades

  • Exibição das iformações em gráficos
  • Exibição das informações em tabelas
    • Tabela exibida com recurso de paginação

Arquitetura

Modelo conceitual

Image

Padrão de camadas escolhido

Image

🎨 Layout

Home

Image

Dashboard

Image


🚀 Como executar o projeto

Este projeto é divido em duas partes:

  1. Backend (pasta back-end)
  2. Frontend (pasta front-end)

💡O front-end precisa que o back-end esteja sendo executado para funcionar.

Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js, Java JDK 11, Spring Tools Suite 4(STS), Yarn.

Além disto é bom ter um editor para trabalhar com o código como VSCode

🎲 Rodando o Servidor (Backend)

# Clone este repositório
$ git@github.com:MarcosWinicios/dsvendas.git

# Importe o projeto no STS na pasta back-end

# Espere o Maven baixar e instalar as dependências

# Execute a aplicação

# O servidor inciará na porta:8080 - acesse http://localhost:8080

Você pode acessar as respostas dos endpoints através do Postman

🧭 Rodando a aplicação web (Frontend)

# Clone este repositório
$ git@github.com:MarcosWinicios/dsvendas.git

# Acesse a pasta do projeto no seu terminal/cmd
$ cd projeto-sds4

# Vá para a pasta da aplicação Front End
$ cd front-end

# Instale as dependências
$ yarn install

# Execute a aplicação em modo de desenvolvimento
$ yarn start

# A aplicação será aberta na porta:3000 - acesse http://localhost:3000

🛠 Tecnologias

As seguintes ferramentas foram usadas na construção do projeto:

FrontEnd (React + TypeScript)

Veja o arquivo package.json

BackEnd (Spring + Java)

Veja o arquivo pom.xml

Utilitários

🦸 Autor

Marcos Winicios
Marcos Winicios
🚀

Linkedin Badge Gmail Badge