Новостное приложение на Nuxt 3

Проект представляет собой SPA для просмотра новостей с возможностью фильтрации, поиска и переключения между режимами отображения (сетка/список).

🚀 Функциональность

✅ Реализовано

• Фильтрация новостей по источнику (source)
• Поиск по заголовку/содержанию с debounce
• Переключение между режимами отображения (Grid/List)
• Сохранение выбранного режима в localStorage
• Синхронизация фильтров и поиска с URL-параметрами
• Адаптивный заголовок и панель управления
• Пагинация новостей
• Ресет данных, оптимизация запросов
• Полная адаптация под мобильные устройства
• Частичная оптимизация загрузки данных (кеширование)
• Добавлена документация

⏳ В планах

• Написание тестов (Vitest + Testing Library)

📱 Адаптивные брейкпоинты

Приложение использует следующие контрольные точки для адаптивного дизайна:

• 1200px - Оптимизация для широких экранов
• 992px - Стандартные планшеты (ландшафт)
• 768px - Планшеты (портрет) / маленькие ноутбуки
• 500px - Мобильные устройства (смартфоны)

🛠 Технологии

• Nuxt 3 (Vue 3)
• Pinia (стейт-менеджмент)
• TypeScript
• SCSS (стилизация)

🛠 Установка зависимостей

npm install

🖥 Разработка

Запуск dev-сервера:

npm run dev

Приложение будет доступно по адресу:

http://localhost:3000

Сборка для production

npm run build
npm run preview

🏗 Структура проекта

📦 news-app

├── assets/         # CSS, изображения, шрифты
├── components/     # UI компоненты (Vue)
├── composables/    # Логика приложения (хуки)
├── constants/      # Константы и конфигурации приложения
├── layouts/        # Шаблоны страниц
├── pages/          # Страницы приложения
├── public/         # Публичные файлы
├── server/         # Серверная часть
│   └── api/        # API эндпоинты
├── stores/         # Pinia хранилища
├── types/          # Типы TypeScript
├── utils/          # Вспомогательные утилиты
├── app.vue         # Корневой компонент (входная точка)
├── nuxt.config.ts  # Конфигурация Nuxt
└── package.json    # Зависимости и скрипты