Front-End
Stack Tecnológica
Linguagem
JavaScript (ES6+) – Utilizado pela flexibilidade e compatibilidade com frameworks modernos.
Framework/Lib
Figma – Escolhido devido à sua capacidade de criar interfaces de usuário dinâmicas, eficientes e reutilizáveis por meio de componentes.
Biblioteca do Estilo
Material UI (ou outra como Bootstrap) – Facilita a criação de uma interface amigável e responsiva, além de proporcionar consistência visual.
Ferramentas de Build
Webpack ou Vite – Para compilar o código e otimizar a performance da aplicação.
Gestão de Rotas
React Router – Utilizado para navegar entre diferentes telas da aplicação, como a tela do totem, a tela de visualização da TV e a tela de gerenciamento de atendimentos.
Integração com a API
Axios
Para realizar as chamadas HTTP, foi utilizada a biblioteca Axios, que facilita a comunicação com a API do backend (Django Rest Framework). As requisições são feitas para endpoints que fornecem e atualizam dados sobre as senhas e atendimentos em tempo real.
Comunicação em Tempo Real com WebSocket
WebSocket
O WebSocket é usado para atualizações em tempo real, permitindo que o frontend receba e exiba dados atualizados instantaneamente. Isso é essencial para a sincronização entre as telas do Totem, Sistema e TV.