https://github.com/paulohenriqueoliveiradealmeida/sensor-metrics-dashboard-web

Dashboard simples em React que se conecta via Websocket com uma API para exibição de métricas de sensores
https://github.com/paulohenriqueoliveiradealmeida/sensor-metrics-dashboard-web

react recharts typescript websocket

Last synced: about 2 months ago
JSON representation

Dashboard simples em React que se conecta via Websocket com uma API para exibição de métricas de sensores

• Host: GitHub
• URL: https://github.com/paulohenriqueoliveiradealmeida/sensor-metrics-dashboard-web
• Owner: PauloHenriqueOliveiradeAlmeida
• Created: 2024-11-17T03:10:33.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-17T03:50:59.000Z (2 months ago)
• Last Synced: 2024-11-17T04:27:58.869Z (2 months ago)
• Topics: react, recharts, typescript, websocket
• Language: TypeScript
• Homepage:
• Size: 11.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🚨 Sensor Metrics Frontend

Projeto desenvolvido como atividade avaliativa para matéria de IOT, o projeto consiste em um frontend que recebe mensagens via websocket para exibições de dados em um dashboard

## 📚 Stack usada

![Stack](https://img.shields.io/badge/typescript-blue?logo=typescript&logoColor=white&style=for-the-badge) ![Stack](https://img.shields.io/badge/react-blue?logo=react&logoColor=white&style=for-the-badge) ![Stack](https://img.shields.io/badge/vite-purple?logo=vite&logoColor=white&style=for-the-badge)

## 🦾 Funcionalidades

- Recebe eventos via websocket

- Exibe os dados recebidos em dois gráficos

## 🔧 Configuração do projeto

#### 📁 Ajustar variáveis

Crie um arquivo `.env` na raiz do projeto e adicione as variáveis necessárias (há um `.env.example` de demonstração):

```ini

VITE_WEBSOCKET_URL=string

```

### 📦 Instalação dos pacotes

Execute a instalação das dependências necessárias:

```ini

yarn

```

### 🚀 Executando o projeto:

Execute os dois sensores:

```ini

yarn build

yarn preview

```

## 🏃 Testando

Para testar, será necessário utilizar algum backend com suporte a MQTT ou algo do gênero, ou, instalar os sensores e o backend do projeto:

Sensores: https://github.com/PauloHenriqueOliveiradeAlmeida/sensor-metrics-sensors

Backend: https://github.com/PauloHenriqueOliveiradeAlmeida/sensor-metrics-dashboard-backend