Разработка учебного приложения «Лента новостей» с бесконечным скроллом, поиском и сложным медиа-контентом. Основной фокус — глубокая проработка алгоритмов виртуализации для элементов с динамической высотой.
- Динамический расчет высоты: Рендеринг элементов, размер которых зависит от длины текста и загруженных медиа (картинки/видео).
- Кэширование геометрии: Сохранение рассчитанных высот для каждого
idпоста. - Scroll Anchoring: Удержание позиции скролла при изменении контента внутри элементов (например, при разворачивании текста).
- Global Search: Полнотекстовый поиск по ленте (через бэкенд).
- Reset & Re-calculate: Полный сброс виртуализированного списка и кэша высот при обновлении поискового запроса.
- Highlighting: Подсветка найденных слов внутри виртуализированных карточек.
- Медиа: Картинки с разными соотношениями сторон и видео-плееры.
- Интерактив: Кнопка «Показать больше» (expand) для длинных текстов, меняющая высоту карточки «на лету».
- Backend: NestJS (Node.js framework), TypeORM (Data Mapper pattern).
- Database: PostgreSQL (хранение 10,000+ постов для тестов).
- Frontend: React.js, TypeScript, Vite (сборщик).
- State Management: React Hooks (useRef, useMemo, useCallback) — фокус на минимизации ререндеров.
- Intersection Observer vs Scroll Event: Выбор оптимального способа отслеживания видимых элементов.
- Resize Observer: Отслеживание изменений размера карточки (например, при загрузке картинки или ресайзе окна).
- Batching: Логика подгрузки данных с бэкенда (Chunking) для обеспечения бесшовности.