Readme init
This commit is contained in:
Degradin
parent
d5899c137d
commit
0f5d1f51ee
255
README.md
255
README.md
@ -1,187 +1,130 @@
|
||||
# CampFire Critics
|
||||
|
||||
CampFire Critics — это веб-приложение, созданное с использованием React, Vite и Tailwind CSS, предназначенное для каталогизации медиаконтента (фильмов, сериалов, игр, аниме) и управления пользовательскими отзывами. Приложение включает в себя систему аутентификации, подробные страницы медиа, профили пользователей, систему достижений, систему поддержки и административную панель для модерации контента и управления данными. В качестве бэкенда используется PocketBase.
|
||||
CampFire Critics — это современное веб-приложение для управления медиаконтентом и пользовательскими отзывами, построенное на React, Vite и Tailwind CSS. Приложение предоставляет богатый функционал для работы с медиа, рецензиями и пользовательскими профилями.
|
||||
|
||||
## Функции
|
||||
## Основные возможности
|
||||
|
||||
* **Аутентификация пользователей**: Полная система регистрации, входа, выхода и сброса пароля с использованием PocketBase Auth.
|
||||
* **Профили пользователей**: Просмотр профилей пользователей, отображение их статистики (количество рецензий, средний рейтинг, XP, уровень), списка достижений и витрины избранных рецензий. Возможность редактирования собственного профиля (описание, аватар, баннер, витрина).
|
||||
* **Каталог медиа**: Просмотр списка медиа с фильтрацией по типу (фильмы, сериалы, игры, аниме) и поиском.
|
||||
* **Страницы обзора медиа**: Подробные страницы для каждого медиа, включающие информацию о нем, список сезонов (для сериалов/аниме), а также раздел с пользовательскими рецензиями и рейтингами.
|
||||
* **Система рецензий**: Пользователи могут оставлять рецензии на медиа или отдельные сезоны, выставлять оценки по нескольким характеристикам, указывать прогресс просмотра/прохождения и отмечать спойлеры. Рецензии отображаются на страницах медиа/сезонов и в профилях пользователей.
|
||||
* **Система лайков рецензий**: Пользователи могут ставить лайки рецензиям других пользователей.
|
||||
* **Система XP и уровней**: Пользователи получают XP за создание рецензий и получение достижений, что повышает их уровень. Уровень и XP отображаются в профиле.
|
||||
* **Система достижений**: Пользователи могут получать достижения за различные действия. Список достижений отображается в профиле.
|
||||
* **Система поддержки**: Пользователи могут создавать тикеты поддержки с выбором категории и описанием проблемы.
|
||||
* **Административная панель**: Раздел для администраторов с возможностью управления медиа, пользователями, сезонами, достижениями и тикетами поддержки. Включает дашборд с общей статистикой.
|
||||
* **Адаптивный дизайн**: Приложение адаптировано для корректного отображения на различных устройствах с использованием Tailwind CSS.
|
||||
* **Управление медиаконтентом**
|
||||
- Просмотр и поиск фильмов, сериалов и игр
|
||||
- Детальная информация о медиа с рейтингами и отзывами
|
||||
- Карусель и карточный интерфейс для удобной навигации
|
||||
- Анимированные переходы и интерактивные элементы
|
||||
|
||||
## Технологии
|
||||
* **Система рецензий**
|
||||
- Создание и редактирование рецензий
|
||||
- Рейтинговая система с визуализацией
|
||||
- Последние рецензии в бегущей строке
|
||||
- Интеграция с профилями пользователей
|
||||
|
||||
* **Фронтенд**:
|
||||
* React: Библиотека для построения пользовательских интерфейсов.
|
||||
* Vite: Быстрый сборщик фронтенда.
|
||||
* Tailwind CSS: Утилитарный CSS-фреймворк для быстрой стилизации.
|
||||
* React Router DOM: Для маршрутизации в приложении.
|
||||
* `react-icons`: Набор популярных иконок.
|
||||
* `chart.js` и `react-chartjs-2`: Для построения графиков рейтингов.
|
||||
* `react-datepicker`: Для выбора дат.
|
||||
* `react-fast-marquee`: Для бегущей строки (если используется).
|
||||
* `react-quill`: WYSIWYG редактор для контента рецензий/описаний.
|
||||
* `react-select`: Кастомизируемый компонент выбора.
|
||||
* `react-toastify`: Для уведомлений (тостов).
|
||||
* `dompurify`: Для очистки HTML контента.
|
||||
* `uuid`: Для генерации уникальных ID.
|
||||
* **Бэкенд**:
|
||||
* PocketBase: Опенсорсный бэкенд в одном файле (Go) с базой данных SQLite, системой аутентификации, файловым хранилищем, realtime подписками и хуками.
|
||||
* **Внешние API**:
|
||||
* TMDB (The Movie Database): Используется для получения информации о фильмах, сериалах и, возможно, другом медиаконтенте (подразумевается, исходя из предыдущего README).
|
||||
* **Пользовательские профили**
|
||||
- Персонализированные профили с аватарами
|
||||
- История рецензий и активности
|
||||
- Рейтинг пользователей
|
||||
- Настройки профиля
|
||||
|
||||
## Настройка проекта
|
||||
* **Административные функции**
|
||||
- Модерация контента
|
||||
- Управление медиа
|
||||
- Административная панель
|
||||
- Статистика и аналитика
|
||||
|
||||
1. **Клонирование репозитория** (стандартный шаг, не применимо в WebContainer):
|
||||
## Технологический стек
|
||||
|
||||
```bash
|
||||
git clone https://github.com/your-username/campfire-critics.git
|
||||
cd campfire-critics
|
||||
```
|
||||
* **Фронтенд**
|
||||
- React 18+
|
||||
- Vite
|
||||
- Tailwind CSS
|
||||
- Framer Motion для анимаций
|
||||
- React Router для маршрутизации
|
||||
- React Icons для иконок
|
||||
|
||||
2. **Установка зависимостей**:
|
||||
* **Бэкенд**
|
||||
- PocketBase для аутентификации и базы данных
|
||||
- REST API
|
||||
- Файловое хранилище
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
* **Инструменты разработки**
|
||||
- ESLint для линтинга
|
||||
- PostCSS для обработки CSS
|
||||
- Git для контроля версий
|
||||
|
||||
3. **Настройка PocketBase**:
|
||||
* Скачайте и запустите PocketBase с [официального сайта](https://pocketbase.io/docs/getting-started/).
|
||||
* Перейдите в Admin UI (обычно `http://127.0.0.1:8090/_/`).
|
||||
* Создайте следующие коллекции (убедитесь, что включены необходимые поля и связи):
|
||||
* `users` (тип `auth`): Стандартная коллекция пользователей PocketBase. Добавьте поля: `role` (select, options: `user`, `admin`), `is_critic` (bool), `description` (text), `profile_picture` (file), `banner_picture` (file), `review_count` (number, default 0), `average_rating` (number, default 0), `xp` (number, default 0), `level` (number, default 1), `showcase` (relation to `reviews`, multiple).
|
||||
* `media`: Поля: `title` (text), `type` (select, options: `movie`, `tv`, `game`, `anime`), `path` (text, unique), `overview` (text), `release_date` (date), `poster` (file), `backdrop` (file), `trailer_url` (url), `characteristics` (json), `average_rating` (number, default 0), `review_count` (number, default 0), `is_published` (bool, default false), `is_popular` (bool, default false), `progress_type` (select, options: `percentage`, `episodes`, `chapters`, `none`), `created_by` (relation to `users`), `created` (datetime), `updated` (datetime).
|
||||
* `seasons`: Поля: `media_id` (relation to `media`, required), `season_number` (number, required), `title` (text), `overview` (text), `release_date` (date), `poster` (file), `average_rating` (number, default 0), `review_count` (number, default 0), `is_published` (bool, default false), `created_by` (relation to `users`), `created` (datetime), `updated` (datetime).
|
||||
* `reviews`: Поля: `user_id` (relation to `users`, required), `media_id` (relation to `media`, required), `season_id` (relation to `seasons`, optional), `content` (text), `ratings` (json), `overall_rating` (number, default 0), `has_spoilers` (bool, default false), `progress` (number), `created` (datetime), `updated` (datetime).
|
||||
* `achievements`: Поля: `name` (text), `description` (text), `icon` (file), `xp_reward` (number, default 0), `created` (datetime), `updated` (datetime).
|
||||
* `user_achievements`: Поля: `user_id` (relation to `users`, required), `achievement_id` (relation to `achievements`, required), `awarded_at` (datetime), `awarded_by` (relation to `users`, optional), `created` (datetime), `updated` (datetime).
|
||||
* `review_likes`: Поля: `review_id` (relation to `reviews`, required), `user_id` (relation to `users`, required), `created` (datetime).
|
||||
* `support_tickets`: Поля: `user_id` (relation to `users`, required), `category` (select, options: `bug`, `feature_request`, `question`, `other`), `subject` (text), `message` (text), `status` (select, options: `open`, `in_progress`, `closed`, default `open`), `admin_notes` (text), `created` (datetime), `updated` (datetime).
|
||||
* **Настройте RLS (Row Level Security)** для каждой коллекции, чтобы определить, кто может просматривать, создавать, обновлять и удалять записи.
|
||||
* **Настройте Hooks/Triggers** в PocketBase для автоматического обновления полей `average_rating` и `review_count` в коллекциях `media`, `seasons` и `users` при создании, обновлении или удалении записей в коллекциях `reviews` и `review_likes`. Также настройте хуки для обновления `xp` и `level` пользователя при создании рецензии или получении достижения. *Это критически важный шаг для корректной работы статистики.*
|
||||
|
||||
4. **Настройте переменные окружения**:
|
||||
|
||||
* Создайте файл `.env` в корне проекта, если его нет.
|
||||
* Добавьте URL вашего PocketBase инстанса:
|
||||
```
|
||||
VITE_POCKETBASE_URL=http://127.0.0.1:8090
|
||||
```
|
||||
Замените URL на адрес вашего запущенного PocketBase.
|
||||
|
||||
5. **Запустите сервер разработки**:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Приложение будет доступно по адресу, указанному Vite (обычно `http://localhost:5173`).
|
||||
|
||||
## Структура проекта и описание модулей
|
||||
|
||||
Проект организован следующим образом:
|
||||
## Структура проекта
|
||||
|
||||
```
|
||||
src/
|
||||
├── App.jsx # Основной компонент приложения, определяет маршруты.
|
||||
├── main.jsx # Точка входа в приложение, инициализирует React и оборачивает App в контекст-провайдеры и роутер.
|
||||
├── index.css # Основной файл стилей, импортирует Tailwind CSS.
|
||||
├── pages/ # Компоненты, представляющие целые страницы приложения.
|
||||
│ ├── HomePage.jsx # Главная страница с обзорами и статистикой.
|
||||
│ ├── CatalogPage.jsx # Страница каталога медиа.
|
||||
│ ├── MediaOverviewPage.jsx# Страница с подробным обзором конкретного медиа.
|
||||
│ ├── ProfilePage.jsx # Страница профиля пользователя.
|
||||
│ ├── RatingPage.jsx # Страница с рейтингами пользователей (по рецензиям, по уровню).
|
||||
│ ├── SupportPage.jsx # Страница для создания тикетов поддержки.
|
||||
│ ├── NotFoundPage.jsx # Страница 404.
|
||||
│ ├── LoginPage.jsx # Страница входа.
|
||||
│ ├── RegisterPage.jsx # Страница регистрации.
|
||||
│ ├── ForgotPasswordPage.jsx# Страница сброса пароля.
|
||||
│ └── admin/ # Страницы административной панели.
|
||||
│ ├── AdminDashboard.jsx
|
||||
│ ├── AdminMediaPage.jsx
|
||||
│ ├── AdminUsersPage.jsx
|
||||
│ ├── AdminSeasonsPage.jsx
|
||||
│ ├── AdminAchievementsPage.jsx
|
||||
│ ├── AdminTicketsPage.jsx
|
||||
│ └── AdminTicketDetailPage.jsx
|
||||
├── components/ # Переиспользуемые UI-компоненты.
|
||||
│ ├── auth/ # Компоненты и логика, связанные с аутентификацией (AuthRoute, GuestRoute).
|
||||
│ ├── layout/ # Компоненты макета (Header, Footer, Layout).
|
||||
│ ├── admin/ # Компоненты для административной панели (AdminLayout).
|
||||
│ ├── MediaCard.jsx # Карточка медиа для каталога/списков.
|
||||
│ ├── ReviewCard.jsx # Карточка рецензии.
|
||||
│ ├── RatingChart.jsx # Компонент графика рейтинга.
|
||||
│ ├── SearchBar.jsx # Компонент поиска.
|
||||
│ ├── UserRankCard.jsx # Карточка пользователя для рейтингов.
|
||||
│ ├── AchievementCard.jsx # Карточка достижения.
|
||||
│ ├── SupportTicketCard.jsx# Карточка тикета поддержки.
|
||||
│ └── ... другие компоненты
|
||||
├── contexts/ # React Context провайдеры для глобального состояния.
|
||||
│ ├── AuthContext.jsx # Управляет состоянием аутентификации пользователя.
|
||||
│ └── ProfileActionsContext.jsx # Управляет действиями, связанными с профилем (например, витрина).
|
||||
├── services/ # Утилиты и сервисы для взаимодействия с API/бэкендом.
|
||||
│ └── pocketbaseService.js # **Основной модуль для взаимодействия с PocketBase API.**
|
||||
├── assets/ # Статические файлы (изображения, шрифты и т.д.).
|
||||
└── ... другие файлы конфигурации (tailwind.config.js, postcss.config.js, vite.config.js)
|
||||
├── components/ # React компоненты
|
||||
│ ├── home/ # Компоненты главной страницы
|
||||
│ ├── media/ # Компоненты для работы с медиа
|
||||
│ ├── navigation/ # Навигационные компоненты
|
||||
│ ├── profile/ # Компоненты профиля
|
||||
│ ├── reactbits/ # Переиспользуемые UI компоненты
|
||||
│ └── reviews/ # Компоненты для рецензий
|
||||
├── contexts/ # React контексты
|
||||
├── pages/ # Страницы приложения
|
||||
├── services/ # Сервисы и API
|
||||
└── utils/ # Вспомогательные функции
|
||||
```
|
||||
|
||||
### Описание ключевых модулей:
|
||||
## Установка и запуск
|
||||
|
||||
* **`src/services/pocketbaseService.js`**:
|
||||
Этот файл является центральным слоем для всех операций взаимодействия с бэкендом PocketBase. Он инициализирует PocketBase SDK и экспортирует функции для:
|
||||
* **Аутентификации**: `signUp`, `signIn`, `signOut`, `getCurrentUser`, `requestPasswordReset`.
|
||||
* **Пользователей**: `getUserProfile`, `getUserProfileByUsername`, `updateUserProfile`, `updateUserShowcase`, `listUsersRankedByReviews`, `listUsersRankedByLevel`.
|
||||
* **Медиа**: `createMedia`, `getMediaByPath`, `getMediaById`, `listMedia`, `listPopularMedia`, `updateMedia`, `deleteMedia`, `searchMedia`.
|
||||
* **Рецензий**: `getLatestReviews`, `getReviewsByMediaId`, `getReviewsByUserId`, `getUserReviewForMedia`, `createReview`, `updateReview`, `deleteReview`.
|
||||
* **Сезонов**: `getSeasonsByMediaId`, `getSeasonById`, `createSeason`, `updateSeason`, `deleteSeason`.
|
||||
* **Достижений**: `getAllAchievements`, `getUserAchievements`, `awardAchievement`.
|
||||
* **Лайков рецензий**: `likeReview`, `unlikeReview`, `getReviewLikeCount`, `hasUserLikedReview`.
|
||||
* **Тикетов поддержки**: `createSupportTicket`, `getUserTickets`, `getAllTickets`, `getTicketById`, `updateSupportTicket`.
|
||||
* **Файлового хранилища**: `uploadFile`, `deleteFile`, `getFileUrl`.
|
||||
* **Утилит**: `calculateLevel`, `getXpForNextLevel`, `getXpForCurrentLevel`, `validateMediaData`, `formatMediaData`, `updateRatingStats` (функция для пересчета средних рейтингов и количества рецензий, часто вызывается после операций с рецензиями).
|
||||
Этот модуль абстрагирует логику работы с API, делая компоненты более чистыми.
|
||||
1. **Клонируйте репозиторий**
|
||||
```bash
|
||||
git clone https://git.campfiregg.ru/CampFire/CampFireCritics.git
|
||||
cd CampFireCritics
|
||||
```
|
||||
|
||||
* **`src/contexts/AuthContext.jsx`**:
|
||||
Предоставляет глобальный доступ к состоянию аутентификации текущего пользователя. Использует `pocketbaseService` для выполнения операций входа/выхода/регистрации и хранит информацию о пользователе в состоянии React Context. Компоненты могут использовать хук `useAuth` для доступа к данным пользователя и функциям аутентификации.
|
||||
2. **Установите зависимости**
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
* **`src/contexts/ProfileActionsContext.jsx`**:
|
||||
Предоставляет контекст для управления действиями, специфичными для страницы профиля, такими как обновление витрины рецензий.
|
||||
3. **Настройте переменные окружения**
|
||||
Создайте файл `.env` в корне проекта:
|
||||
```env
|
||||
VITE_POCKETBASE_URL=your_pocketbase_url
|
||||
```
|
||||
|
||||
* **`src/App.jsx`**:
|
||||
Определяет структуру маршрутизации приложения с использованием `react-router-dom`. Здесь настраиваются публичные маршруты, маршруты только для гостей (`GuestRoute`) и защищенные маршруты (`AuthRoute`), включая маршруты административной панели.
|
||||
4. **Запустите сервер разработки**
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
* **`src/components/auth/AuthRoute.jsx` и `src/components/auth/GuestRoute.jsx`**:
|
||||
Вспомогательные компоненты маршрутизации, которые используют `AuthContext` для проверки статуса аутентификации пользователя и его роли, перенаправляя пользователя на другие страницы при необходимости (например, перенаправление неаутентифицированных пользователей с защищенных маршрутов или аутентифицированных пользователей со страниц входа/регистрации).
|
||||
5. **Соберите проект для продакшена**
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
* **`src/pages/` и `src/components/`**:
|
||||
Эти директории содержат компоненты пользовательского интерфейса. `pages` содержат компоненты верхнего уровня, представляющие целые страницы, а `components` содержат более мелкие, переиспользуемые блоки UI. Стилизация в основном выполняется с помощью классов Tailwind CSS.
|
||||
## Разработка
|
||||
|
||||
* **Административная панель (`src/pages/admin/`, `src/components/admin/AdminLayout.jsx`)**:
|
||||
Набор страниц и компонентов, доступных только пользователям с ролью 'admin'. `AdminLayout` предоставляет общую структуру макета для всех страниц админки (навигация, заголовок). Страницы внутри `pages/admin/` используют функции из `pocketbaseService` для управления данными (создание, чтение, обновление, удаление) медиа, пользователей, сезонов, достижений и тикетов поддержки.
|
||||
### Основные команды
|
||||
|
||||
* `npm run dev` - Запуск сервера разработки
|
||||
* `npm run build` - Сборка проекта
|
||||
* `npm run lint` - Проверка кода линтером
|
||||
* `npm run preview` - Предпросмотр собранного проекта
|
||||
|
||||
### Стиль кода
|
||||
|
||||
Проект использует ESLint для поддержания качества кода. Основные правила:
|
||||
- Использование функциональных компонентов
|
||||
- Строгая типизация пропсов
|
||||
- Следование принципам чистого кода
|
||||
- Комментирование сложных участков кода
|
||||
|
||||
## Вклад в проект
|
||||
|
||||
1. Откройте issue для обсуждения новой функции или исправления.
|
||||
2. Сделайте fork репозитория.
|
||||
3. Создайте новую ветку (`git checkout -b feature-name`).
|
||||
4. Зафиксируйте изменения.
|
||||
5. Запушьте ветку (`git push origin feature-name`).
|
||||
6. Создайте Pull Request.
|
||||
|
||||
## Требования
|
||||
|
||||
* Node.js 18+
|
||||
* npm 8+
|
||||
* Запущенный инстанс PocketBase с настроенными коллекциями, RLS и хуками.
|
||||
1. Создайте форк репозитория
|
||||
2. Создайте ветку для новой функции (`git checkout -b feature/amazing-feature`)
|
||||
3. Зафиксируйте изменения (`git commit -m 'Add amazing feature'`)
|
||||
4. Отправьте изменения в форк (`git push origin feature/amazing-feature`)
|
||||
5. Создайте Pull Request
|
||||
|
||||
## Лицензия
|
||||
|
||||
MIT License. Подробнее см. [LICENSE](LICENSE).
|
||||
|
||||
## Контакты
|
||||
|
||||
CampFire Team - [@campfiregg](https://t.me/campfiregg)
|
||||
|
||||
Project Link: [https://git.campfiregg.ru/CampFire/CampFireCritics](https://git.campfiregg.ru/CampFire/CampFireCritics)
|
||||
|
||||
77
src/components/README.md
Normal file
77
src/components/README.md
Normal file
@ -0,0 +1,77 @@
|
||||
# Компоненты
|
||||
|
||||
Эта директория содержит все React компоненты приложения, организованные по функциональным категориям.
|
||||
|
||||
## Структура
|
||||
|
||||
```
|
||||
components/
|
||||
├── home/ # Компоненты главной страницы
|
||||
├── media/ # Компоненты для работы с медиа
|
||||
├── navigation/ # Навигационные компоненты
|
||||
├── profile/ # Компоненты профиля
|
||||
├── reactbits/ # Переиспользуемые UI компоненты
|
||||
└── reviews/ # Компоненты для рецензий
|
||||
```
|
||||
|
||||
## Описание категорий
|
||||
|
||||
### home/
|
||||
Компоненты, используемые на главной странице приложения:
|
||||
- `HeroSection` - Главный баннер с призывом к действию
|
||||
- `GridSection` - Сетка с популярным контентом
|
||||
- `FeaturedMedia` - Выделенные медиа
|
||||
- `StatsSection` - Статистика платформы
|
||||
|
||||
### media/
|
||||
Компоненты для работы с медиаконтентом:
|
||||
- `MediaCard` - Карточка медиа для каталога
|
||||
- `MediaDetails` - Детальная информация о медиа
|
||||
- `MediaGrid` - Сетка медиа
|
||||
- `MediaSearch` - Поиск медиа
|
||||
|
||||
### navigation/
|
||||
Навигационные компоненты:
|
||||
- `AppDock` - Док приложения
|
||||
- `Navbar` - Верхняя навигационная панель
|
||||
- `Sidebar` - Боковая панель навигации
|
||||
- `Breadcrumbs` - Навигационные хлебные крошки
|
||||
|
||||
### profile/
|
||||
Компоненты для работы с профилями пользователей:
|
||||
- `ProfileHeader` - Заголовок профиля
|
||||
- `ProfileStats` - Статистика пользователя
|
||||
- `ProfileReviews` - Рецензии пользователя
|
||||
- `ProfileSettings` - Настройки профиля
|
||||
|
||||
### reactbits/
|
||||
Переиспользуемые UI компоненты:
|
||||
- `TiltedCard` - Карточка с эффектом наклона
|
||||
- `GridMotion` - Анимированная сетка
|
||||
- `ClickSpark` - Эффект искры при клике
|
||||
- `RotateText` - Вращающийся текст
|
||||
|
||||
### reviews/
|
||||
Компоненты для работы с рецензиями:
|
||||
- `ReviewCard` - Карточка рецензии
|
||||
- `ReviewForm` - Форма создания/редактирования рецензии
|
||||
- `ReviewList` - Список рецензий
|
||||
- `LatestReviewsMarquee` - Бегущая строка последних рецензий
|
||||
|
||||
## Использование
|
||||
|
||||
Все компоненты следуют единому стилю кодирования и используют:
|
||||
- Функциональные компоненты
|
||||
- React Hooks
|
||||
- Tailwind CSS для стилизации
|
||||
- Framer Motion для анимаций
|
||||
- PropTypes для типизации пропсов
|
||||
|
||||
## Лучшие практики
|
||||
|
||||
1. Компоненты должны быть максимально переиспользуемыми
|
||||
2. Используйте мемоизацию для оптимизации производительности
|
||||
3. Следуйте принципу единственной ответственности
|
||||
4. Документируйте пропсы и их типы
|
||||
5. Используйте контекст для глобального состояния
|
||||
6. Тестируйте компоненты на разных размерах экрана
|
||||
102
src/contexts/README.md
Normal file
102
src/contexts/README.md
Normal file
@ -0,0 +1,102 @@
|
||||
# Контексты
|
||||
|
||||
Эта директория содержит React Context провайдеры, которые управляют глобальным состоянием приложения.
|
||||
|
||||
## Структура
|
||||
|
||||
```
|
||||
contexts/
|
||||
├── AuthContext.jsx # Контекст аутентификации
|
||||
├── ProfileActionsContext.jsx # Контекст действий профиля
|
||||
└── ClickSparkContext.jsx # Контекст для эффекта искры при клике
|
||||
```
|
||||
|
||||
## Описание контекстов
|
||||
|
||||
### AuthContext
|
||||
Управляет состоянием аутентификации пользователя:
|
||||
- Хранит информацию о текущем пользователе
|
||||
- Предоставляет методы для входа, выхода и регистрации
|
||||
- Обрабатывает обновление профиля
|
||||
- Управляет состоянием загрузки и ошибками
|
||||
|
||||
```javascript
|
||||
const { user, login, logout, register, updateProfile } = useAuth();
|
||||
```
|
||||
|
||||
### ProfileActionsContext
|
||||
Управляет действиями, связанными с профилем пользователя:
|
||||
- Обновление витрины рецензий
|
||||
- Управление настройками профиля
|
||||
- Обработка действий с достижениями
|
||||
- Управление статистикой пользователя
|
||||
|
||||
```javascript
|
||||
const { updateShowcase, updateSettings, handleAchievement } = useProfileActions();
|
||||
```
|
||||
|
||||
### ClickSparkContext
|
||||
Управляет эффектом искры при клике:
|
||||
- Добавление и удаление искр
|
||||
- Анимация искр
|
||||
- Настройка параметров эффекта
|
||||
|
||||
```javascript
|
||||
const { addSpark, removeSpark, setSparkConfig } = useClickSpark();
|
||||
```
|
||||
|
||||
## Использование
|
||||
|
||||
1. Импортируйте нужный контекст:
|
||||
```javascript
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
```
|
||||
|
||||
2. Используйте хук в компоненте:
|
||||
```javascript
|
||||
const MyComponent = () => {
|
||||
const { user } = useAuth();
|
||||
// ...
|
||||
};
|
||||
```
|
||||
|
||||
## Лучшие практики
|
||||
|
||||
1. Используйте контексты только для глобального состояния
|
||||
2. Разделяйте контексты по функциональности
|
||||
3. Мемоизируйте значения контекста
|
||||
4. Обрабатывайте случаи, когда контекст не доступен
|
||||
5. Документируйте API контекста
|
||||
6. Используйте TypeScript для типизации контекста
|
||||
|
||||
## Пример создания контекста
|
||||
|
||||
```javascript
|
||||
import React, { createContext, useContext, useState } from 'react';
|
||||
|
||||
const MyContext = createContext();
|
||||
|
||||
export const MyProvider = ({ children }) => {
|
||||
const [state, setState] = useState(initialState);
|
||||
|
||||
const value = {
|
||||
state,
|
||||
setState,
|
||||
// другие методы
|
||||
};
|
||||
|
||||
return (
|
||||
<MyContext.Provider value={value}>
|
||||
{children}
|
||||
</MyContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useMyContext = () => {
|
||||
const context = useContext(MyContext);
|
||||
if (!context) {
|
||||
throw new Error('useMyContext must be used within a MyProvider');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
```
|
||||
138
src/pages/README.md
Normal file
138
src/pages/README.md
Normal file
@ -0,0 +1,138 @@
|
||||
# Страницы
|
||||
|
||||
Эта директория содержит компоненты страниц приложения. Каждая страница представляет собой отдельный маршрут в приложении.
|
||||
|
||||
## Структура
|
||||
|
||||
```
|
||||
pages/
|
||||
├── HomePage.jsx # Главная страница
|
||||
├── MediaPage.jsx # Страница медиа
|
||||
├── ProfilePage.jsx # Страница профиля
|
||||
├── ReviewsPage.jsx # Страница рецензий
|
||||
├── SearchPage.jsx # Страница поиска
|
||||
├── SettingsPage.jsx # Страница настроек
|
||||
└── admin/ # Административные страницы
|
||||
├── DashboardPage.jsx # Панель управления
|
||||
├── MediaPage.jsx # Управление медиа
|
||||
├── UsersPage.jsx # Управление пользователями
|
||||
└── ReviewsPage.jsx # Управление рецензиями
|
||||
```
|
||||
|
||||
## Описание страниц
|
||||
|
||||
### HomePage
|
||||
Главная страница приложения:
|
||||
- Отображает популярный контент
|
||||
- Показывает последние рецензии
|
||||
- Предоставляет быстрый доступ к основным функциям
|
||||
- Включает статистику платформы
|
||||
|
||||
### MediaPage
|
||||
Страница с информацией о медиа:
|
||||
- Детальная информация о медиа
|
||||
- Список рецензий
|
||||
- Возможность оставить рецензию
|
||||
- Похожие медиа
|
||||
|
||||
### ProfilePage
|
||||
Страница профиля пользователя:
|
||||
- Информация о пользователе
|
||||
- История рецензий
|
||||
- Достижения
|
||||
- Настройки профиля
|
||||
|
||||
### ReviewsPage
|
||||
Страница с рецензиями:
|
||||
- Список рецензий
|
||||
- Фильтрация и сортировка
|
||||
- Возможность создания рецензии
|
||||
- Лайки и комментарии
|
||||
|
||||
### SearchPage
|
||||
Страница поиска:
|
||||
- Поиск по медиа
|
||||
- Фильтры и категории
|
||||
- Результаты поиска
|
||||
- Быстрый доступ к найденному
|
||||
|
||||
### SettingsPage
|
||||
Страница настроек:
|
||||
- Настройки профиля
|
||||
- Настройки приложения
|
||||
- Уведомления
|
||||
- Безопасность
|
||||
|
||||
### admin/
|
||||
Административные страницы:
|
||||
- DashboardPage: Общая статистика и управление
|
||||
- MediaPage: Управление медиаконтентом
|
||||
- UsersPage: Управление пользователями
|
||||
- ReviewsPage: Модерация рецензий
|
||||
|
||||
## Использование
|
||||
|
||||
1. Импортируйте страницу в маршрутизатор:
|
||||
```javascript
|
||||
import HomePage from '../pages/HomePage';
|
||||
```
|
||||
|
||||
2. Добавьте маршрут:
|
||||
```javascript
|
||||
<Route path="/" element={<HomePage />} />
|
||||
```
|
||||
|
||||
## Лучшие практики
|
||||
|
||||
1. Разделяйте логику и представление
|
||||
2. Используйте контексты для глобального состояния
|
||||
3. Реализуйте ленивую загрузку для больших страниц
|
||||
4. Обрабатывайте состояния загрузки и ошибок
|
||||
5. Оптимизируйте производительность
|
||||
6. Следуйте принципам доступности
|
||||
|
||||
## Пример структуры страницы
|
||||
|
||||
```javascript
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { getMediaById } from '../services/pocketbaseService';
|
||||
|
||||
const MediaPage = () => {
|
||||
const { id } = useParams();
|
||||
const { user } = useAuth();
|
||||
const [media, setMedia] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchMedia = async () => {
|
||||
try {
|
||||
const data = await getMediaById(id);
|
||||
setMedia(data);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchMedia();
|
||||
}, [id]);
|
||||
|
||||
if (loading) return <LoadingSpinner />;
|
||||
if (error) return <ErrorMessage message={error} />;
|
||||
if (!media) return <NotFound />;
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<MediaHeader media={media} />
|
||||
<MediaContent media={media} />
|
||||
<ReviewsSection mediaId={media.id} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MediaPage;
|
||||
```
|
||||
172
src/services/README.md
Normal file
172
src/services/README.md
Normal file
@ -0,0 +1,172 @@
|
||||
# Сервисы
|
||||
|
||||
Эта директория содержит сервисы для взаимодействия с API и внешними сервисами.
|
||||
|
||||
## Структура
|
||||
|
||||
```
|
||||
services/
|
||||
└── pocketbaseService.js # Сервис для работы с PocketBase API
|
||||
```
|
||||
|
||||
## Описание сервисов
|
||||
|
||||
### pocketbaseService
|
||||
Основной сервис для взаимодействия с PocketBase API. Предоставляет методы для:
|
||||
|
||||
#### Аутентификация
|
||||
```javascript
|
||||
signUp(email, password, username)
|
||||
signIn(email, password)
|
||||
signOut()
|
||||
getCurrentUser()
|
||||
requestPasswordReset(email)
|
||||
```
|
||||
|
||||
#### Пользователи
|
||||
```javascript
|
||||
getUserProfile(userId)
|
||||
getUserProfileByUsername(username)
|
||||
updateUserProfile(userId, data)
|
||||
updateUserShowcase(userId, reviewIds)
|
||||
listUsersRankedByReviews(limit)
|
||||
listUsersRankedByLevel(limit)
|
||||
```
|
||||
|
||||
#### Медиа
|
||||
```javascript
|
||||
createMedia(data)
|
||||
getMediaByPath(path)
|
||||
getMediaById(id)
|
||||
listMedia(filters, page, perPage, userProfile, includeSeasons, includeReviews, sort)
|
||||
listPopularMedia(limit)
|
||||
updateMedia(id, data)
|
||||
deleteMedia(id)
|
||||
searchMedia(query)
|
||||
```
|
||||
|
||||
#### Рецензии
|
||||
```javascript
|
||||
getLatestReviews(limit)
|
||||
getReviewsByMediaId(mediaId)
|
||||
getReviewsByUserId(userId)
|
||||
getUserReviewForMedia(userId, mediaId)
|
||||
createReview(data)
|
||||
updateReview(id, data)
|
||||
deleteReview(id)
|
||||
```
|
||||
|
||||
#### Сезоны
|
||||
```javascript
|
||||
getSeasonsByMediaId(mediaId)
|
||||
getSeasonById(id)
|
||||
createSeason(data)
|
||||
updateSeason(id, data)
|
||||
deleteSeason(id)
|
||||
```
|
||||
|
||||
#### Достижения
|
||||
```javascript
|
||||
getAllAchievements()
|
||||
getUserAchievements(userId)
|
||||
awardAchievement(userId, achievementId)
|
||||
```
|
||||
|
||||
#### Лайки рецензий
|
||||
```javascript
|
||||
likeReview(reviewId, userId)
|
||||
unlikeReview(reviewId, userId)
|
||||
getReviewLikeCount(reviewId)
|
||||
hasUserLikedReview(reviewId, userId)
|
||||
```
|
||||
|
||||
#### Тикеты поддержки
|
||||
```javascript
|
||||
createSupportTicket(data)
|
||||
getUserTickets(userId)
|
||||
getAllTickets()
|
||||
getTicketById(id)
|
||||
updateSupportTicket(id, data)
|
||||
```
|
||||
|
||||
#### Файловое хранилище
|
||||
```javascript
|
||||
uploadFile(file, collection, recordId, field)
|
||||
deleteFile(collection, recordId, field)
|
||||
getFileUrl(record, field, options)
|
||||
```
|
||||
|
||||
#### Утилиты
|
||||
```javascript
|
||||
calculateLevel(xp)
|
||||
getXpForNextLevel(level)
|
||||
getXpForCurrentLevel(level)
|
||||
validateMediaData(data)
|
||||
formatMediaData(data)
|
||||
updateRatingStats(collection, recordId)
|
||||
```
|
||||
|
||||
## Использование
|
||||
|
||||
1. Импортируйте нужные методы:
|
||||
```javascript
|
||||
import { getMediaById, createReview } from '../services/pocketbaseService';
|
||||
```
|
||||
|
||||
2. Используйте в компонентах:
|
||||
```javascript
|
||||
const MyComponent = () => {
|
||||
const fetchMedia = async () => {
|
||||
const media = await getMediaById(id);
|
||||
// ...
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
## Лучшие практики
|
||||
|
||||
1. Обрабатывайте ошибки API
|
||||
2. Используйте мемоизацию для кэширования данных
|
||||
3. Реализуйте механизм повторных попыток для нестабильных запросов
|
||||
4. Логируйте важные операции
|
||||
5. Валидируйте данные перед отправкой
|
||||
6. Используйте TypeScript для типизации
|
||||
|
||||
## Пример использования
|
||||
|
||||
```javascript
|
||||
import { getMediaById, createReview } from '../services/pocketbaseService';
|
||||
|
||||
const MediaPage = () => {
|
||||
const [media, setMedia] = useState(null);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchMedia = async () => {
|
||||
try {
|
||||
const data = await getMediaById(id);
|
||||
setMedia(data);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
fetchMedia();
|
||||
}, [id]);
|
||||
|
||||
const handleReview = async (reviewData) => {
|
||||
try {
|
||||
await createReview({
|
||||
...reviewData,
|
||||
mediaId: media.id,
|
||||
userId: currentUser.id
|
||||
});
|
||||
// Обновить UI
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
// ...
|
||||
};
|
||||
```
|
||||
Loading…
Reference in New Issue
Block a user