Future Screen

Production-сайт и внутренние инструменты Future Screen: публичные страницы компании, админ-панель, формы заявок, контентное управление и Visual LED planner для расчета/визуализации LED-проектов.

Production: https://future-screen.vercel.app

Что Внутри

• Публичный сайт: главная, LED, техсопровождение, аренда, кейсы, цены, о компании, контакты.
• Админ-панель: лиды, кейсы, пакеты, категории аренды, контент, privacy policy, Visual LED конфиги и логи.
• Visual LED planner: редактор LED-сцен, загрузка фона/плана, floor-plan режим, кабинеты, pitch, цена, отчеты, share-links, сохранение проектов.
• API на Vercel Functions: заявки, клиентские логи, Telegram webhook, отчеты, Visual LED storage.
• Supabase: контент, лиды, медиа, отчеты, Visual LED проекты/логи/настройки.
• Локальная рабочая память через mempalace.

Быстрый Старт

npm install
npm run dev

По умолчанию Vite стартует на http://localhost:5000.

Для локального фронтенда вместе с Express-сервером:

npm run dev:all

Express-сервер по умолчанию слушает http://localhost:3001.

Рабочий Процесс

Перед началом задачи:

npm run memory:session

Перед широким поиском по коду:

npm run memory:search -- "<запрос>"

После значимых изменений:

npm run memory:session:save

Перед пушем или handoff:

npm run check:prepush

check:prepush запускает lint, build и work:end, который сохраняет memory session.

Основные Команды

Команда	Назначение
npm run dev	Vite dev-server на порту 5000
npm run server	Локальный Express-сервер
npm run dev:all	Express + Vite одновременно
npm run build	TypeScript build, проверка API TS, Vite production build
npm run preview	Preview production build
npm run lint	ESLint для src, server, api
npm run test	Unit/component тесты Vitest
npm run test:e2e	E2E Playwright
npm run test:all	Vitest + Playwright
npm run gen:types	Обновить Supabase types
npm run secrets:scan	Проверить секреты
npm run work:start	Начало рабочей сессии helper-скриптом
npm run work:end	Завершение рабочей сессии и сохранение памяти
npm run check:prepush	Обязательная проверка перед push

Стек

Frontend:

• React 18 + TypeScript
• Vite
• React Router
• Tailwind CSS
• React Hook Form + Zod
• TanStack Query
• React Helmet Async
• Supabase JS

Backend / API:

• Vercel Functions в api/
• Express fallback/dev server в server/
• Supabase service-role операции для server-side write/admin сценариев
• Nodemailer для email
• Telegram Bot API/webhook
• Upstash Redis для rate limiting, если env настроен

Testing:

• Vitest + jsdom
• Testing Library
• Playwright Chromium
• v8 coverage

Структура Проекта

future-screen/
├── api/                 # Vercel Functions и serverless endpoints
│   ├── send.ts          # заявки, лиды, email, Telegram
│   ├── telegram-webhook.ts
│   ├── report-share.ts
│   └── visual-led/      # save/load/upload для Visual LED
├── docs/                # проектные заметки, тестирование, Visual LED specs
├── public/              # статические ассеты, legacy Visual LED, presets
├── scripts/             # memory, typegen, secret scan, maintenance scripts
├── server/              # локальный Express server и общая server-логика
├── src/
│   ├── components/      # общие компоненты, admin UI, visualLed UI
│   ├── content/         # UI-тексты и контентные словари
│   ├── context/         # auth/i18n/theme контексты
│   ├── hooks/           # React hooks
│   ├── lib/             # чистая логика, API helpers, Visual LED math
│   ├── pages/           # публичные и admin страницы
│   ├── queries/         # TanStack Query hooks/helpers
│   ├── services/        # Supabase-backed сервисы
│   ├── themes/          # темы оформления
│   └── types/           # общие типы
├── supabase/
│   ├── migrations/      # canonical DB migrations
│   └── legacy/          # исторические SQL-скрипты, не source of truth
├── tests/e2e/           # Playwright specs
├── AGENTS.md            # правила для coding agents
├── CONTRIBUTING.md      # правила коммитов
├── vercel.json          # Vercel rewrites/headers/build config
└── package.json

Маршруты

Публичные:

Путь	Назначение
/	Главная
/led	LED-экраны
/support	Техсопровождение
/rent	Аренда оборудования
/rent/:slug	Категория аренды
/cases	Кейсы
/cases/:slug	Детальная страница кейса
/prices	Цены/пакеты
/about	О компании
/contacts	Контакты
/consult	Консультация
/privacy	Политика конфиденциальности
/visual-led	Актуальный Visual LED planner
/visual-led/v2	Alias для старых beta/share ссылок
/visual-led/legacy	Legacy HTML Visual LED через iframe

Admin:

Путь	Назначение
/admin	Dashboard
/admin/content	Redirect на /admin
/admin/leads	Лиды
/admin/cases	Кейсы
/admin/packages	Пакеты/цены
/admin/categories	Категории
/admin/contacts	Контакты
/admin/rental-categories	Категории аренды
/admin/rental/:id	Редактирование категории аренды
/admin/privacy-policy	Privacy policy
/admin/content/home-equipment	Блок оборудования на главной
/admin/content/history	История контента
/admin/visual-led-logs	Visual LED логи
/admin/visual-led-logs/:sessionId	Visual LED session details
/admin/visual-led/presets	Visual LED presets
/admin/visual-led/pitch-config	Pixel pitch config
/admin/visual-led/storage	Visual LED storage
/admin/visual-led/pricing	Visual LED pricing

Admin routes защищены ProtectedRoute и требуют роль admin.

Visual LED Planner

Основной вход: /visual-led.

Где лежит:

• Page: src/pages/VisualLedV2Page.tsx
• UI: src/components/visualLed/
• State/history/persistence: src/components/visualLed/state/
• Geometry/pricing/report logic: src/lib/visualLed/
• API: api/visual-led/*, api/visual-led-logs/[action].ts
• Admin config: src/pages/admin/AdminVisualLed*Page.tsx
• Legacy fallback: public/visual-led-legacy/
• Preset assets: public/visual-led-presets/
• Подробности: docs/visual-led-functional-overview.md

Ключевые возможности:

• перспектива по загруженному фону;
• floor-plan режим с помещением, стенами, перегородками, дверями, окнами, колоннами и сценой;
• размещение экранов, поворот, высота, тип монтажа;
• расчет кабинетов, разрешения, pixel pitch и ориентировочной стоимости;
• несколько сцен;
• видео/фоновые ассеты;
• сохранение, загрузка и share-links;
• HTML-отчеты;
• event/session logging для админки.

API

Vercel rewrites описаны в vercel.json.

Endpoint	Файл	Назначение
/api/send	api/send.ts	Формы, лиды, email, Telegram
/api/client-log	api/client-log.ts	Клиентские ошибки
/api/telegram-webhook	api/telegram-webhook.ts	Telegram commands/uploads
/api/report-share	api/report-share.ts	Создание/чтение отчетов
/reports/:slug	api/report-share.ts	Public report view
/api/visual-led/save	api/visual-led/save.ts	Сохранение Visual LED проекта
/api/visual-led/load	api/visual-led/load.ts	Загрузка Visual LED проекта
/api/visual-led/upload-background	api/visual-led/upload-background.ts	Upload background image
/api/visual-led-logs/:action	api/visual-led-logs/[action].ts	Visual LED logging/session API

Server-side write/admin операции должны использовать SUPABASE_SERVICE_ROLE_KEY. Не добавляйте fallback на anon key для таких сценариев.

Переменные Окружения

В репозитории сейчас нет tracked .env.example; актуальный набор сверяйте с кодом и docs/PROJECT_CONTEXT.md.

Часто используемые переменные:

VITE_SUPABASE_URL=
VITE_SUPABASE_ANON_KEY=
SUPABASE_URL=
SUPABASE_SERVICE_ROLE_KEY=

VITE_API_URL=
VITE_ERROR_LOG_URL=
PUBLIC_SITE_URL=
ALLOWED_ORIGINS=
SERVER_PORT=

SMTP_USER=
SMTP_PASS=
SMTP_TO=

TG_BOT_TOKEN=
TG_CHAT_ID=
TELEGRAM_WEBHOOK_SECRET=

UPSTASH_REDIS_REST_URL=
UPSTASH_REDIS_REST_TOKEN=

SUPABASE_PROJECT_ID=
FAL_KEY=

Notes:

• VITE_* доступны клиентскому коду, не кладите туда секреты.
• SUPABASE_SERVICE_ROLE_KEY только для server-side окружения.
• Yandex.Metrika id сейчас задан в src/lib/analytics.ts.
• Локальные env-файлы и секреты не коммитить; перед пушем можно запускать npm run secrets:scan.

Supabase

Canonical schema лежит в supabase/migrations/.

supabase migration new <slug>
supabase migration up
supabase db push
npm run gen:types

Правила:

• новые schema changes только через migrations;
• после изменения схемы обновлять типы и зависимые mappers/services;
• supabase/legacy/ только для исторической справки, новые изменения туда не добавлять;
• content/i18n изменения должны учитывать RU и EN flows.

Подробнее: supabase/README.md.

I18n И Контент

Проект разделяет локали:

• public site locale;
• admin UI locale;
• admin content locale.

Глобальная логика: src/context/I18nContext.tsx.

Новые пользовательские строки не добавлять inline в JSX без необходимости. Предпочтительно класть копирайтинг в src/content/** или соответствующие content dictionaries. Для публичной части проверяйте EN, для админки основной язык RU.

Тестирование

npm run test
npm run test:e2e
npm run test:all
npm run test:coverage

Точечные примеры:

npx vitest run src/lib/visualLed/pricing.test.ts
npx playwright test tests/e2e/visual-led-ux.spec.ts

Playwright сам поднимает dev-server по playwright.config.ts; тесты не должны зависеть от текущего браузера или уже запущенного Vite.

Подробнее: docs/TESTING.md.

Деплой

Проект настроен для Vercel:

• framework: Vite;
• build command: npm run build;
• output directory: dist;
• production deploy идет из main.

Ручной production deploy:

vercel --prod

Git И Качество

Перед push:

npm run check:prepush

Коммиты по CONTRIBUTING.md: английский язык, imperative mood, короткая первая строка. Пример:

docs: update project readme

Не коммитить:

• env-файлы с секретами;
• dist/, coverage/, test-results/;
• временные screenshots/logs;
• .mempalace/ артефакты.

Если рабочее дерево уже содержит чужие или локальные изменения, не откатывайте их без явной просьбы.

Документация

Полезные файлы:

• AGENTS.md — обязательный workflow для coding agents.
• CONTRIBUTING.md — правила коммитов.
• docs/PROJECT_CONTEXT.md — расширенный контекст проекта.
• docs/TESTING.md — тестовые конвенции.
• docs/visual-led-functional-overview.md — обзор Visual LED.
• docs/REACT_QUERY_GUIDE.md — паттерны TanStack Query.
• docs/AI_RULES.md — дополнительные правила работы.

Контакты

• Телефон: +7 (912) 246-65-66
• Email: gr@future-screen.ru
• Адрес: Екатеринбург, Большой Конный полуостров, 5а

Лицензия

© 2007-2026 Future Screen. Все права защищены.