---

Техническое задание (ТЗ) на разработку сайта

1. Общие сведения

· Название проекта: SkillDrop
· Тип сайта: Веб-приложение (SPA), адаптивное под мобильные устройства.
· Цель: Создать платформу для публикации и прохождения коротких образовательных курсов.

2. Целевая аудитория

1. Студенты/Новички: Хотят быстро получить базовый навык.
2. Эксперты-любители: Хотят поделиться опытом и получить обратную связь (или монетизацию).

3. Функциональные требования

3.1. Роли пользователей

1. Гость: Может просматривать каталог курсов, но не может проходить их.
2. Студент (Авторизованный пользователь): Может проходить курсы, оставлять отзывы, сохранять курсы в "Избранное".
3. Автор: Может создавать курсы, редактировать их, видеть статистику (просмотры/прохождения).
4. Администратор: Модерация контента, управление пользователями.

3.2. Основной функционал (Страницы и модули)

Главная страница:

· Hero-секция с поисковой строкой и призывом к действию.
· Блок «Популярное» (сортировка по просмотрам).
· Блок «Новое» (последние добавленные курсы).
· Категории (например: IT, Дизайн, Языки, Быт, Финансы).

Каталог курсов:

· Фильтрация: по категории, длительности (до 3 мин, до 5 мин), уровню сложности.
· Поиск по ключевым словам.
· Карточка курса: Обложка, Название, Автор, Длительность, Рейтинг.

Страница курса:

· Плеер (видео) или контентная часть (текст + картинки).
· Прогресс-бар прохождения.
· Кнопка «Завершить».
· Блок комментариев/вопросов.
· Похожие курсы.

Личный кабинет (Профиль):

· Для Студента: Список пройденных курсов, список «Избранное», сертификаты (опционально).
· Для Автора: Кнопка «Создать курс», список своих курсов, статистика (кол-во просмотров).

Создание курса (Конструктор):

· Загрузка обложки.
· Добавление шагов (слайдов): Текст + Фото/Видео.
· Указание категории и тегов.

4. Дизайн и UX/UI

· Стиль: Минимализм, чистота, много «воздуха». Акцентные цвета — яркие (например, лаймовый или электрик).
· Анимации: Плавные переходы при скролле и переключении слайдов курса.
· Адаптивность: Mobile-first (так как курсы короткие, многие будут заходить с телефона).

5. Технический стек (Рекомендация)

· Frontend: React.js или Next.js (для SEO-оптимизации), Tailwind CSS (для быстрой верстки).
· Backend: Node.js (Express) или Python (Django/FastAPI).
· База данных: PostgreSQL.
· Хостинг: Vercel (фронт) + Railway/Heroku (бэк).

6. Этапы разработки (Roadmap)

1. MVP (Минимально жизнеспособный продукт):
   · Верстка главной страницы и каталога.
   · Возможность регистрации/входа.
   · Просмотр курса (без конструктора создания).
   · Тестовые данные (3-5 курсов).
2. Этап 2:
   · Личный кабинет автора.
   · Конструктор курсов (добавление текста и картинок).
   · Система лайков и комментариев.
3. Этап 3:
   · Загрузка видео.
   · Геймификация (бейджи за пройденные курсы).
   · Монетизация (платные курсы или донат авторам).

---

Пример структуры главной страницы (Wireframe concept)

1. Header: Логотип, Поиск, Войти/Регистрация.
2. Hero: Заголовок «Учись чему угодно за 5 минут». Кнопка «Начать».
3. Категории: Иконки-кнопки (IT, Кулинария, Спорт...).
4. Сетка курсов: Карточки с превью (как в YouTube, но аккуратнее).
5. Footer: О проекте, Контакты, Правила.

Если нужно, могу расписать подробнее структуру базы данных или написать код для одной из карточек курса (HTML/CSS).