ПрацюєНа паузіОстанній коміт трав. 2026
Pixel Battle
Спільне піксельне полотно, на якому люди малюють разом у реальному часі.
Що я зробив
- Зробив полотно на Next.js: масштабування коліщатком, панорамування, сітку поверх полотна та палітру кольорів.
- Пікселі приходять через WebSocket (STOMP/SockJS), тож кожна зміна з’являється без перезавантаження.
- Вхід, реєстрація та оновлення токенів через API бекенду.
- Моя роль
- Фронтенд-розробник у команді з двох людей
- Команда
- Бекенд (Java, Spring Boot) — Дмитро Іцко.
- Стек
- Next.js
- React
- TypeScript
- Tailwind CSS
- STOMP / SockJS
- Docker
- Nginx
Як усе поєднано
Намальовано за публічними репозиторіями. Контур показує, хто створив кожну частину: авторство — теж частина факту.
- ПолотноNext.js · React — Зробив я
- Авторизаціявхід · оновлення токена — Зробив я
- Зворотний проксіNginx — Зробив я
- Ігровий серверSpring Boot · JWT — Зробив учасник команди
- СховищеRedis · PostgreSQL — Зробив учасник команди
Те саме, крок за кроком
- Полотно (Next.js · React) передає Зворотний проксі (Nginx), в обидва бокиSTOMP / SockJS
- Авторизація (вхід · оновлення токена) до Зворотний проксі (Nginx)REST · токени
- Зворотний проксі (Nginx) до Ігровий сервер (Spring Boot · JWT)REST · WebSocket
- Ігровий сервер (Spring Boot · JWT) до Сховище (Redis · PostgreSQL)історія пікселів