Cats Test

React-приложение, отображающее случайные изображения котов с использованием The Cat API. Приложение позволяет включать/отключать загрузку изображений + поддерживает автоматическое получение каждые 5 секунд (по выбору).

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

├── app/              # Точка входа приложения и глобальные стили
├── entities/         # Бизнес-сущности с их моделями и API
│   └── cat/          # Код, связанный с сущностью кота
├── lib/              # Общие библиотеки и UI-компоненты
│   └── ui/           # UI-компоненты и хуки
├── pages/            # Компоненты страниц
│   └── home/         # Главная страница приложения
├── shared/           # Общие утилиты
│   └── api/          # Конфигурация API-клиента
└── widgets/          # Сложные UI-компоненты, объединяющие несколько элементов UI

Основные директории:

• app: Содержит лобальные стили и точку входа в приложение.
• entities: Содержит бизнес-сущности с их API-интерфейсами и моделями данных.
• lib: Содержит переиспользуемые UI-компоненты и утилитарные хуки.
• pages: Содержит компоненты страниц.
• shared: Содержит общие утилиты.
• widgets: Содержит переиспользуемые виджеты приложения.

Технологический стек

• React 19
• TypeScript
• Vite
• Styled Components
• TanStack Query (React Query)
• Axios
• ESLint & Prettier

Настройка и установка

Предварительные требования

• Node.js (рекомендуется версия 18 или выше)
• Пакетный менеджер pnpm

Шаги установки

1. Клонировать репозиторий:

git clone <URL-репозитория>
cd cats_test

2. Установить зависимости:

pnpm install

3. Создать файл .env в корневой директории с учетными данными Cat API:

VITE_API_URL=https://api.thecatapi.com/v1/
VITE_API_KEY=ваш_API_ключ_здесь

Запуск приложения

Режим разработки

Для запуска сервера разработки:

pnpm dev

Это запустит приложение в режиме разработки. Откройте http://localhost:5173 для просмотра в браузере.

Сборка для продакшена

Для сборки приложения для продакшена:

pnpm build

Это создаст оптимизированную сборку в папке dist.

Предварительный просмотр продакшен-сборки

Для предварительного просмотра продакшен-сборки локально:

pnpm preview

Деплой

Приложение настроено на деплой в GitHub Pages:

pnpm deploy

Это соберет приложение и опубликует его на GitHub Pages.

Скрипты проекта

• pnpm dev: Запуск сервера разработки
• pnpm build: Сборка приложения для продакшена
• pnpm lint: Запуск ESLint для проверки проблем в коде
• pnpm preview: Предварительный просмотр продакшен-сборки локально
• pnpm deploy: Деплой приложения на GitHub Pages