https://github.com/hellsgor/cats
https://github.com/hellsgor/cats
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/hellsgor/cats
- Owner: hellsgor
- Created: 2025-04-22T19:03:10.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-22T20:25:57.000Z (about 1 year ago)
- Last Synced: 2025-04-22T20:27:05.363Z (about 1 year ago)
- Language: CSS
- Size: 37.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Приложение "Cats Viewer"
"**Cats Viewer**" — это приложение для просмотра случайных фотографий котиков. Оно позволяет пользователю загружать новые изображения, включать или отключать автоматическое обновление, а также управлять состоянием загрузки. Приложение разработано с использованием современных технологий и демонстрирует подходы к работе с состоянием, запросами к API и стилизацией компонентов.
---
## Функциональность
- **Загрузка случайных фотографий котиков**: Нажмите кнопку "Get cat", чтобы загрузить новое изображение.
- **Автоматическое обновление**: Включите опцию "Auto-refresh", чтобы изображения обновлялись каждые 5 секунд.
- **Управление состоянием загрузки**: Приложение отображает индикатор загрузки, пока данные не будут получены.
- **Обработка ошибок**: Если загрузка изображения не удалась, пользователь увидит сообщение об ошибке.
---
## Стек технологий
- **React** — библиотека для создания пользовательских интерфейсов.
- **TypeScript** — язык программирования с поддержкой статической типизации.
- **Vite** — инструмент для быстрого сборки и разработки.
- **React Query** — библиотека для управления состоянием данных и запросами к API.
- **Styled Components** — библиотека для стилизации компонентов.
- **Sass** — препроцессор CSS для более удобной работы со стилями.
- **clsx** — утилита для удобного управления классами CSS.
---
## Почему стили написаны по-разному?
В проекте используются разные подходы к стилизации компонентов, чтобы продемонстрировать их возможности:
1. **CSS-модули** (например, в `Button`):
- Используются для изоляции стилей и предотвращения конфликтов.
- Простой и эффективный способ стилизации.
2. **Styled Components** (например, в `Checkbox`):
- Позволяют писать стили прямо в JavaScript/TypeScript.
- Удобны для создания динамических стилей, зависящих от пропсов.
3. **Sass** (например, в `Cat`):
- Используется для глобальных стилей и работы с вложенностью.
- Подходит для компонентов с более сложной структурой.
---
## Использование React Query
В проекте используется **React Query** для управления запросами к API. Это позволяет:
- **Кэшировать данные**: Повторные запросы к одному и тому же ресурсу выполняются быстрее.
- **Управлять состоянием загрузки**: React Query предоставляет флаги `isFetching`, `isLoading` и `error`.
- **Обновлять данные автоматически**: Например, включение автообновления изображений реализовано через `refetchInterval`.
Пример использования React Query в проекте:
```tsx
const { data, error, isFetching } = useQuery({
queryKey: ["cats", "random"],
queryFn: ({ signal }) => catsApi.getRandomCat({ signal }),
enabled: isEnabled,
refetchOnWindowFocus: false,
refetchInterval: autoRefresh.auto ? autoRefresh.delay : false,
});
```
---
## Скрипты проекта
- `npm run dev` — запуск проекта в режиме разработки.
- `npm run build` — сборка проекта для продакшена.
- `npm run preview` — предпросмотр собранного проекта.
- `npm run lint` — запуск линтера для проверки кода.
- `npm run deploy` — деплой проекта на GitHub Pages.
---
## Установка и запуск
1. Клонируйте репозиторий:
```bash
git clone https://github.com/hellsgor/cats.git
cd cats
```
2. Установите зависимости:
```bash
npm install
```
3. Запустите проект в режиме разработки:
```bash
npm run dev
```
4. Для сборки проекта:
```bash
npm run build
```
5. Для деплоя на GitHub Pages:
```bash
npm run deploy
```
---
## API
Приложение использует [The Cat API](https://thecatapi.com/) для получения случайных изображений котиков. Все запросы к API находятся в файле `src/api/cats.ts`.
Пример запроса:
```typescript
export const catsApi = {
getRandomCat: async ({ signal }: { signal: AbortSignal }) => {
return fetch(`${BASE_URL}/search`, { signal }).then(
(response) => response.json() as Promise,
);
},
};
```
---
## Структура проекта
- **src/** — основная папка с исходным кодом:
- **components/** — компоненты React (`Button`, `Card`, `Checkbox`, `Cat`).
- **api/** — функции для работы с API.
- **App.tsx** — главный компонент приложения.
- **public/** — статические файлы.
- **README.md** — документация проекта.
- **package.json** — конфигурация проекта.
---
## Контакты
Если у вас есть вопросы или предложения, вы можете связаться через [GitHub](https://github.com/hellsgor/cats).