Cat Pinterest

Cat Pinterest — это приложение для галереи изображений кошек, вдохновленное Pinterest. В приложении используются функции бесконечной прокрутки для отображения изображений кошек, а также обеспечена адаптивность дизайна под различные устройства.

Описание

Это веб-приложение, которое позволяет пользователям просматривать галерею изображений кошек. Картинки загружаются динамически с помощью механизма бесконечной прокрутки. Когда пользователь прокручивает страницу, новые изображения загружаются автоматически, что позволяет обеспечить плавный пользовательский опыт.

Основные возможности:

• у котика должна есть возможность добавить в "любимые" и убрать из "любимых"
• данные о "любимых" котиках хранятся на клиенте
• на вкладке "любимые котики" отображаются добавленные в "любимые" котики
• приложение адаптируется под разные размеры экранов, включая мобильные устройства.
• для экранов меньше 480px реализовано "бургер" меню.
• автоматически загружает новые изображения кошек, когда пользователь прокручивает страницу.

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

• React: Библиотека для построения пользовательских интерфейсов.
• Redux: Для управления состоянием приложения.
• TypeScript: Для статической типизации и улучшенной разработки.
• Jest: Для написания тестов.
• React Testing Library: Для тестирования компонентов React.
• @reduxjs/toolkit: Для создания Redux хранилища с упрощенной конфигурацией.
• SCSS: Для стилизации компонентов. Применяются преимущества SCSS, такие как переменные, вложенность и миксины.
• CSS Modules: Применяются для изолированной стилизации компонентов, предотвращая конфликты имен классов.
• ESLint: Для обеспечения качества кода и соблюдения стандартов кодирования. Настроен на использование лучших практик JavaScript/TypeScript и React.
• Prettier: Для автоматического форматирования кода, обеспечения единого стиля и упрощения работы с кодом.
• NPM: Для управления зависимостями и скриптами проекта.
• Webpack: Для сборки и бандлинга проекта. Настроен на обработку JavaScript, TypeScript, SCSS и изображений.

Установка

1. Клонируйте репозиторий:

   git clone https://github.com/KirSivogr/cat-pinterest.git
   cd cat-pinterest
   npm install

2. Создайте файл .env в корне проекта:

3. Зарегистрируйтесь или войдите на сайт TheCatAPI.

4. Перейдите в раздел API на сайте.

5. В разделе API вы найдете инструкцию по получению вашего API ключа.

6. Добавление API ключа в файл .env

   В файле .env добавьте ваш API ключ следующим образом:

   REACT_APP_API_KEY='your-api-key-here'

   Важно: Замените 'your-api-key-here' на ваш настоящий API ключ.

7. Запуск:

   npm start

   Откройте браузер и перейдите по адресу http://localhost:3001/

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

• src/: Главная папка с исходным кодом приложения.
  • components/: Компоненты React.
  • hooks/: Пользовательские хуки, такие как useInfiniteScroll.
  • slices/: Логика для Redux.
  • tests/: Тесты для компонентов и функционала.
  • constants/: Константы.
  • types/: Типы используемые в приложении.
  • api/: API.

Тестирование

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

npm test

Тесты написаны с использованием Jest и React Testing Library. Все компоненты протестированы на корректную работу и рендеринг.

Пример теста:

import { render, screen, fireEvent } from '@testing-library/react';
import { CatsGallery } from '@/components/cats-gallery/CatsGallery';

jest.mock('@/hooks/useInfiniteScroll', () => ({
   useInfiniteScroll: jest.fn().mockReturnValue({
      page: 1,
      loadMore: jest.fn(),
   }),
}));

test('загружает новые котиков при прокрутке', async () => {
   const mockLoadMore = jest.fn();

   render(<CatsGallery />);

   fireEvent.scroll(window, { target: { scrollY: 1000 } });

   expect(mockLoadMore).toHaveBeenCalled();
});