Skip to content

Criação de um dashboard em tempo real utilizando Node.js, Express.js, Socket.io, MongoDB, Chart.js, HTML e MateralizeCSS

License

Notifications You must be signed in to change notification settings

vhnegrisoli/realtime_dashboard_socketio

Repository files navigation

Projeto: Dashboard em Real-Time 💹

Tecnologias

Objetivos ✅

Este projeto tem como objetivo colocar em prática meus conhecimentos de desenvolvimento back-end e Node.js na criação de um dashboard em tempo real baseado em operações de CRUD relacionadas a lançamento de vendas.

O usuário terá a possibilidade de registra seus produtos, quais são suas categorias e fornecedores, e em seguida registrar quais foram as vendas destes produtos, e a cada venda lançada, o dashboard principal será atualizado em tempo real conforme cada venda é lançada.

Motivação 🎆

Minha motivação foi de juntar meus conhecimentos em desenvolvimento back-end e front-end com a análise de dados, unindo as duas áreas na tentativa de entregar uma ferramenta que corresponde ao objetivo de muitos gestores e tomadores de decisão: saber o que está acontecendo na hora, em tempo real!

Demonstração da Dashboard

Tecnologias 💻

  • Javascript ES6
  • Node.js
  • Express.js
  • Socket.io
  • MongoDB
  • Handlebars
  • Arquitetura de API REST e MVC
  • HTML
  • Materialize CSS
  • Chart.js
  • Docker
  • Docker-compose
  • Heroku (Deployment)

Instalação 💾

Instalação local

Para instalar o projeto, execute o comando:

yarn

Para rodar localmente, será necessário ter uma instância do MongoDB rodando em seu ambiente na porta 27017.

Execução 📀

Executando local

Para executar o projeto, rode o comando:

yarn start

Instalação e execução via docker-compose

Para instalar via docker-compose, basta apenas executar o comando:

docker-compose up -d

Para parar os containers, apenas execute o comando:

docker-compose stop

O projeto estará disponível no endereço: http://localhost:8080.

Deployment ⭐💥👍👊

Foi feito o deploy do projeto na plataforma Heroku, e pode ser acessado na URL abaixo:

https://socketio-dashboard-realtime.herokuapp.com

Demonstração 🖥️

No GIF abaixo, podemos ver a dashboard atualizando conforme são feitas as vendas. É possível também reiniciar os dados da aplicação clicando no botão Reiniciar dados, logo no menu.

As funcionalidades são de visualizar o dashboard, lançar vendas, cadastrar e listar produtos, fornecedores e categorias.

Demonstração Dashboard API Call

Imagens do dashboard feito com Materialize CSS e Chart.js 💹

Cards (KPIs) de totais vendas finalizadas, abertas, aprovadas e rejeitadas, e gráfico com análise de vendas mensais

Dash 1

Análise de vendas mensais por valor total de venda, total de vendas por produtos e fornecedores

Dash 2

Análise de vendas por aprovações (ABERTA, FECHADA), por situações (APROVADA, REJEITADA e AGUARDANDO_APROVACAO) e vendas por produtos

Dash 3

Autor 🤓

Victor Hugo Negrisoli

Desenvolvedor Full-Stack Pleno & Analista de Dados

About

Criação de um dashboard em tempo real utilizando Node.js, Express.js, Socket.io, MongoDB, Chart.js, HTML e MateralizeCSS

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published