Frontend do Pixel Live Canvas, um pequeno experimento inspirado no r/place onde qualquer pessoa pode pintar em um canvas compartilhado de 128×128 pixels.
O projeto foi desenvolvido para colocar em prática conhecimentos de desenvolvimento frontend, TypeScript e comunicação em tempo real com um backend.
- Vue.js
- TypeScript
- Vite
- Server-Sent Events (SSE)
- HTML / CSS
Ao acessar a aplicação, o usuário encontra um canvas de 128×128 pixels.
Cada pixel pode ter sua cor alterada individualmente. Quando uma alteração é realizada, ela é enviada para o backend e posteriormente distribuída para os outros usuários conectados através de Server-Sent Events (SSE).
Isso permite que as alterações apareçam em tempo real sem que seja necessário atualizar a página.
O frontend também mantém algumas preferências localmente no navegador, como as últimas cores utilizadas.