← К шоу

Запуск сайта

Как выложить Киноринг в интернет

Киноринг — это сайт. Человек открывает ссылку в браузере, входит в аккаунт, покупает баллы, смотрит рекламу. Ниже — что уже работает и что сделать, чтобы на сайт заходили со стороны.

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. Короче про магазины приложений — площадки.