Запуск сайта
Как выложить Киноринг в интернет
Киноринг — это сайт. Человек открывает ссылку в браузере, входит в аккаунт, покупает баллы, смотрит рекламу. Ниже — что уже работает и что сделать, чтобы на сайт заходили со стороны.
1. Что уже готово
Вход: Google, X и почта. Баллы, заказы и колода — на сервере, привязаны к аккаунту. Касса пакетов, ролики за баллы, баннеры рекламы, согласие cookie, политика, правила, оферта, поддержка. Исходники скачиваются с главной кнопкой «Скачать исходники».
2. Люди заходят по ссылке
После публикации этого проекта платформа даёт постоянный HTTPS-адрес. Его можно слать в мессенджер, ставить на визитку, вешать на домен. Сайт открывается с компьютера, Android и iPhone.
Свой домен: в DNS домена сделай запись на адрес публикации (CNAME или A, как скажет хостинг). В шапке сайта появятся твои /privacy, /terms, /offer, /support.
3. Если хочешь править код сам
Скачай ZIP с главной. Это весь проект: экраны, вопросы, кадры, сервер баллов. На своём компьютере:
Нужны Node 22 и npm. В папке проекта: npm install, затем npm run dev — локальный запуск. Сборка: npm run build.
Куда заливать: Vercel (этот стек заточен под него), любой Node-хостинг или свой VPS. На хостинге нужны переменные окружения:
- DATABASE_URL — Postgres (удобно Neon, бесплатный старт).
- Секреты входа — если публикуешь через эту платформу, они подставляются сами. На своём хостинге без них остаются вход по почте (он в базе сайта).
- YOOKASSA_SECRET_KEY — только когда подключишь живые платежи.
Не клади секреты в код и не создавай файл .env в репозитории. На Vercel — раздел Environment Variables.
4. База и баллы
Схема лежит в папке migrations/. Сборка сама накатывает её на Postgres. Кошелёк, заказы, рекламные сессии и колода пишутся с user_id вошедшего человека. Клиент не может начислить себе баллы: покупка идёт через заказ, реклама — через сессию на сервере.
5. Реклама и заработок баллами
Сейчас в слотах крутится партнёрский ролик Киноринга, за полный просмотр сервер даёт баллы. Чтобы встроить свою сеть:
- Заведи аккаунт Яндекс.РТБ (РСЯ) и/или Google AdSense.
- Вставь ID в src/lib/ads/config.ts (yandex.id, yandex.blockId или adsense.client и adsense.slot).
- Пересобери сайт. Скрипты сетей грузятся только после «Принять все».
Деньги от баннеров приходят на счёт рекламной сети. Баллы зрителю за ролик — отдельно, это внутриигровая награда. Накрутку режет пауза и суточный лимит на сервере.
6. Живые платежи
1) Юрстатус (самозанятый, ИП, ТОО) и касса ЮKassa. 2) В src/lib/wallet/prices.ts поставь PAYMENT_PROVIDER = "yookassa". 3) Секрет — в переменную YOOKASSA_SECRET_KEY. 4) В кабинете ЮKassa webhook: https://твой-домен/api/payments/yookassa. 5) В оферте и src/lib/legal.ts укажи ФИО/ИП и контакты. Пока провайдер demo — карта не списывается.
7. Юридическое
Страницы: конфиденциальность, правила, оферта, cookie, поддержка. Перед живыми деньгами заполни оператора в src/lib/legal.ts. Возраст 12+. Налоги с продаж цифровых услуг — твоя обязанность в своей стране.
8. Где править в исходниках
- Вопросы — src/lib/quiz/questions.ts и вкладка «Колода»
- Тир-листы — src/lib/tiers/catalog.ts
- Цены пакетов — src/lib/wallet/prices.ts
- Сервер баллов — src/lib/wallet/api.ts
- Реклама — src/lib/ads/config.ts
- Экраны (этот сайт) — src/components/cine/
- Фронт Vue 3 + Nuxt 4 — nuxt-app/
- Кадры — public/stills/ и public/tiers/
Vue-фронт говорит с тем же сервером: /api/progress (колода, картинки, тиры, настройки) и /api/wallet (баллы). В папке nuxt-app: npm install && npm run dev.
Почта поддержки: support@kinoring.app. Короче про магазины приложений — площадки.