yaru.nixg.ru/docs/frontend

Frontend документация

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

Компонент	Технология	Примечание
Фреймворк	Svelte 4+	Проверка достаточности возможностей
Язык	TypeScript	Строгая типизация
Сборщик	Vite	Быстрая разработка
Стили	SCSS + CSS Modules	Или Tailwind CSS
Состояние	Svelte Stores	Или Zustand-like решение
Роутинг	SvelteKit	Если нужен SSR

---

Требования к фронтенду

1. Основные страницы

• Лента (Home) — посты подписок, бесконечный скролл
• Публичная лента — все посты сервера
• Профиль пользователя — аватар, био, карма, посты
• Создание поста — текстовый редактор + загрузка медиа
• Пост (детальный просмотр) — комментарии, лайки, репосты
• Подписки/Подписчики — списки пользователей
• Настройки — профиль, безопасность, экспорт данных

2. Компоненты интерфейса

• PostCard — отображение поста (текст, медиа, карма)
• UserProfile — карточка пользователя
• Composer — форма создания поста
• Timeline — лента постов с пагинацией
• MediaGallery — галерея изображений/видео
• KarmaDisplay — отображение кармы
• FollowButton — кнопка подписки/отписки

3. Интеграция с редактором

Временно: Используем готовые решения:

• TipTap — расширяемый WYSIWYG редактор
• Quill — простой редактор с Markdown поддержкой
• Markdown textarea — резервный вариант

В будущем: Интеграция с Chronicle.nixg.ru

4. Управление состоянием

• Глобальное состояние: текущий пользователь, настройки
• Кэш постов: оптимистичное обновление UI
• Real-time обновления: WebSocket для новых постов

5. Адаптивный дизайн

• Mobile first подход
• Поддержка тёмной темы
• PWA возможности (оффлайн режим, push уведомления)

6. Экспорт данных (UI)

• Кнопка "Экспортировать мои данные" в настройках
• Прогресс-бар экспорта
• Скачивание ZIP архива с контентом

---

Вопросы для проверки Svelte

• Хватит ли Svelte Stores для сложного состояния (лента + real-time)?
• Нужен ли SSR через SvelteKit для SEO?
• Поддержка WebSocket в Svelte (для live обновлений)?
• Производительность при большом количестве постов в ленте?

---

План разработки фронтенда

1. Настройка Svelte + Vite + TypeScript
2. Базовая структура проекта (роуты, layout)
3. Компоненты: PostCard, UserProfile, Timeline
4. Интеграция с REST API бэкенда
5. Страница создания поста (редактор + медиа)
6. Real-time обновления (WebSocket)
7. Экспорт данных (UI + download)
8. Адаптивность + тёмная тема

---

Вопросы для обсуждения

• Нужен ли SSR (SvelteKit) или достаточно SPA?
• Какой редактор выбрать для MVP (TipTap/Quill/Markdown)?
• Требуется ли поддержка PWA (оффлайн, push)?
• Нужна ли локализация интерфейса (только русский или мультиязычность)?