LivePausedLast commit May 2026
Pixel Battle
A shared pixel canvas where people draw together in real time.
What I built
- Built the Next.js canvas: wheel zoom, panning, a grid overlay and a colour palette.
- Pixels arrive over STOMP/SockJS WebSockets, so every change shows up without a reload.
- Login, registration and token refresh flows against the backend API.
- My role
- Frontend engineer in a team of two
- Team
- Backend (Java, Spring Boot) by Dmitro Itsko.
- Stack
- Next.js
- React
- TypeScript
- Tailwind CSS
- STOMP / SockJS
- Docker
- Nginx
How it fits together
Drawn from the public repositories. The outline shows who built each part — credit is part of the fact.
- CanvasNext.js · React — Built by me
- Auth flowslogin · token refresh — Built by me
- Reverse proxyNginx — Built by me
- Game serverSpring Boot · JWT — Built by a teammate
- StorageRedis · PostgreSQL — Built by a teammate
The same, step by step
- Canvas (Next.js · React) with Reverse proxy (Nginx), both waysSTOMP / SockJS
- Auth flows (login · token refresh) to Reverse proxy (Nginx)REST · tokens
- Reverse proxy (Nginx) to Game server (Spring Boot · JWT)REST · WebSocket
- Game server (Spring Boot · JWT) to Storage (Redis · PostgreSQL)pixel history