Личный pet-проект
Spark Space - сайт к моему дню рождения
Интерактивный личный сайт для друзей: поздравления, донаты, лидерборд, wishlist, магазин и мини-игры. Цветовая тема меняется вместе с суммой сбора.
- 13 дней
- первая версия к событию
- 3 недели
- полная переработка v2
- 4 игры
- во второй версии
Задача
Собрать сложный продукт и сделать его понятным
Собрать необычный сайт для собственного дня рождения, в котором друзья могут поздравить, поддержать сбор и поучаствовать в игровых механиках.
Моя роль
Самостоятельно разработал личный проект. Первая версия работала на Vue, Quasar и Supabase; позже ради эксперимента переписал техническую часть на NestJS, Prisma и PostgreSQL.
Ключевое в проекте
Инженерная часть
Что пришлось решить под капотом
Полный переход с BaaS на собственный backend
Supabase Auth, БД и realtime заменены на NestJS, Prisma и PostgreSQL, а Vercel - на Docker, Traefik и собственный VPS.
Баланс как журнал операций
Внутренняя валюта не хранится одним изменяемым числом: баланс вычисляется как сумма начислений минус сумма списаний, сохраняя историю каждой операции.
Интерфейс реагирует на результат события
Палитра сайта построена на CSS-переменных и меняется по мере роста собранной суммы. В первой версии обновление происходило в реальном времени через Supabase.
Реализация
Что вошло в продукт
- Геймификация: рулетка, слоты, колесо фортуны, карты
- Внутренняя валюта с журналом начислений и списаний
- Донаты с лидербордом топ-донатеров
- Вишлисты для сбора на подарки
- Магазин мерча со скидками
- Динамическая тема: дизайн меняется от суммы сборов
- Собственный NestJS API и Docker-развёртывание
Результат
Сайт использовался друзьями во время моего дня рождения; позднее я переработал его как личный full-stack эксперимент.
Для события был собран полноценный интерактивный сценарий: поздравления, сбор, рейтинг участников, wishlist, магазин, внутренняя валюта и четыре мини-игры.