Смоляное чучелко — официальный сайт группы

Официальный сайт музыкальной группы Смоляное чучелко, опубликованный на smolyanoechuchelko.ru.

---

Описание проекта

Сайт решает задачу представления группы в интернете: каталог альбомов с треками и синхронизированными текстами, статьи, медиаплеер, мультиязычность (RU/EN) и личный кабинет для управления контентом. Контент (альбомы, треки, тексты, синхронизации, статьи, изображения hero) хранится в PostgreSQL (Supabase), медиафайлы — в Supabase Storage. Для продакшена используется хостинг Netlify и serverless-функции для API.

Основные возможности:

• Просмотр альбомов и треков с аудиоплеером и синхронизированными текстами
• Статьи и новости с мультиязычной поддержкой
• Двуязычный интерфейс (русский / английский)
• Админ-панель: управление альбомами, треками, синхронизациями, статьями, hero-изображениями, профилем
• Оплата и личный кабинет покупателя (просмотр покупок, скачивание)

Стек технологий:

• Frontend: React 18, TypeScript, Redux Toolkit, React Router, i18next, Webpack 5, SCSS
• Backend: Netlify Functions (Node.js), PostgreSQL (Supabase), JWT-аутентификация
• Хранилище: Supabase Storage (изображения, аудио)
• Деплой: Netlify (статический билд + serverless API)

---

Системные требования и развёртывание

Требования

• Node.js — рекомендуется LTS (18.x или 20.x)
• npm — 9.x или новее (или yarn/pnpm)
• Для полной локальной разработки: Netlify CLI (npm i -g netlify-cli), аккаунт Netlify и доступ к переменным окружения проекта

Установка и запуск

1. Клонируйте репозиторий и установите зависимости:

   git clone <url-репозитория>
   cd my-project-copy
   npm install

2. Настройте переменные окружения.

   Вариант 1 (рекомендуется для локальной разработки): загрузить из Netlify:

   source scripts/load-netlify-env.sh

   Вариант 2: создать локальный .env на основе примера:

   cp .env.local.example .env.local
   # Заполните переменные вручную (см. docs/FILL-ENV-FILE.md и docs/LOCAL-DEVELOPMENT.md)

   Обязательные переменные для работы API и БД:

   • DATABASE_URL — строка подключения к PostgreSQL (Supabase)
   • JWT_SECRET — секрет для JWT-токенов
   • JWT_EXPIRES_IN — время жизни токена (например, 7d)
   • Для медиа и хранилища: SUPABASE_URL, SUPABASE_SERVICE_ROLE_KEY (и при необходимости VITE_SUPABASE_* для клиента)

3. Запуск:

   Команда	Назначение
   npm start	Только frontend (webpack dev server на порту 8080), без Netlify Functions
   npm run dev или netlify dev	Полный dev: frontend + Netlify Functions. Сайт: http://localhost:8888
   npm run build	Production-сборка в папку dist

   Для проверки работы после клонирования:

   npm install
   source scripts/load-netlify-env.sh   # если есть доступ к Netlify
   netlify dev

   Откройте в браузере http://localhost:8888 и убедитесь, что главная страница и разделы открываются.

4. Деплой на Netlify:
   Сборка: npm run build, каталог публикации: dist. Функции лежат в netlify/functions. Переменные окружения задаются в Netlify Dashboard. Подробнее — в docs/NETLIFY-QUICK-START.md и netlify.toml.

Дополнительная документация

• Локальная разработка и переменные: docs/LOCAL-DEVELOPMENT.md, docs/FILL-ENV-FILE.md
• База данных и миграции: docs/database-setup.md, database/
• Платежи (ЮKassa): docs/SETUP-PAYMENTS.md, docs/yookassa-setup.md

---

Планы по доработке

• Обработка ошибок: добавить retry для неудачных запросов и более понятные сообщения об ошибках для пользователя; вынести логирование в единый сервис (например, с последующей интеграцией Sentry).
• Тесты: расширить покрытие критичных сценариев (сохранение синхронизаций, авторизация, оплата) и добавить e2e для основных пользовательских сценариев.
• Производительность: проверить и при необходимости донастроить кэширование и предзагрузку для тяжёлых страниц (каталог альбомов, статьи).
• Доступность: довести контраст и фокус-индикаторы до соответствия WCAG 2.1 там, где ещё есть замечания.
• Миграции и админка: при добавлении новых полей в БД — сохранять обратную совместимость и обновлять админ-формы с валидацией.

Конкретные шаги и приоритеты зафиксированы в docs/IMPROVEMENTS.md.