/Card-Management-App

This is a React app that displays popular images from Unsplash. It features infinite scrolling, the ability to like/unlike images, filter liked images, and view image details on a separate page.

Primary LanguageTypeScript

Просмотр карточек Unsplash

React React Router Redux TypeScript SASS Jest

Это React-приложение, отображающее популярные изображения из Unsplash. Приложение поддерживает бесконечную прокрутку, возможность ставить и отменять лайки, фильтрацию по залайканным изображениям и просмотр деталей изображения на отдельной странице.

Оглавление

Особенности

  • Отображение популярных изображений из Unsplash.
  • Бесконечная прокрутка для загрузки новых изображений по мере прокрутки страницы.
  • Возможность ставить и отменять лайки на изображениях.
  • Фильтрация для отображения только залайканных изображений.
  • Просмотр деталей изображения на отдельной странице.
  • Адаптивный дизайн, обеспечивающий корректное отображение на всех устройствах.

Начало работы

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

Перед началом убедитесь, что у вас установлены:

  • Node.js (версии 14 или выше)
  • npm (устанавливается вместе с Node.js) или Yarn

Установка

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

    git clone https://github.com/NotACat1/Card-Management-App.git
cd unsplash-card-viewer

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

    # для npm
npm install

# для yarn
yarn install

  3. Создайте файл .env в корневой директории и добавьте ваш API-ключ Unsplash:

    REACT_APP_UNSPLASH_ACCESS_KEY=your_unsplash_access_key

  4. Запустите сервер разработки:

    npm start

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

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

Проект организован следующим образом:

src/
├── assets/                # Медиафайлы, такие как изображения и иконки
├── components/            # Повторно используемые React-компоненты
│   ├── App/               # Основной компонент приложения
│   ├── Card/              # Компонент карточки изображения
│   ├── CardDetail/        # Компонент отображения деталей карточки
│   ├── CardList/          # Компонент списка карточек
│   ├── DeleteButton/      # Кнопка удаления карточки
│   ├── DownloadButton/    # Кнопка скачивания изображения
│   ├── Filter/            # Компонент фильтрации карточек
│   ├── Footer/            # Подвал приложения
│   ├── Header/            # Заголовок приложения
│   ├── LikeButton/        # Кнопка лайка
│   ├── ScrollToTopButton/ # Кнопка прокрутки вверх
│   └── ThemeSwitcher/     # Переключатель темы
├── data/                  # Статические данные и константы
├── fonts/                 # Шрифты, используемые в приложении
├── pages/                 # Страницы приложения
│   ├── card/              # Страница с деталями карточки
│   ├── error/             # Страница с ошибками
│   ├── list/              # Страница со списком карточек
│   └── root/              # Корневая страница
├── services/              # API сервис для взаимодействия с Unsplash
│   └── unsplashService.ts
├── store/                 # Конфигурация и слайсы Redux-хранилища
│   ├── cards/             # Слайс для управления состоянием карточек
│   └── index.ts           # Основная настройка хранилища
├── styles/                # Глобальные стили и SCSS переменные
├── types/                 # Типы данных и интерфейсы TypeScript
└── index.tsx              # Точка входа приложения

Доступные скрипты

В директории проекта доступны следующие команды:

"scripts": {
  "prepare": "husky install",
  "lint-staged": "lint-staged",
  "start": "craco start",
  "build": "craco build",
  "test": "jest",
  "eject": "react-scripts eject",
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}
  • npm start: запускает приложение в режиме разработки.
  • npm run build: создает оптимизированную сборку приложения.
  • npm run test: запускает тесты с использованием Jest.
  • npm run deploy: деплоит приложение на GitHub Pages.

API сервис

Приложение использует Unsplash API для получения популярных изображений. API сервис реализован в src/services/unsplashService.ts с использованием Axios.

Основные функции

  • fetchCards: получает список популярных изображений.
  • fetchCardById: получает детали конкретного изображения по его ID.

Redux хранилище

Состояние приложения управляется с помощью Redux Toolkit. Хранилище настроено в src/store/index.ts, а состояние, связанное с карточками, обрабатывается в src/store/cards/cardsSlice.ts.

Основные действия

  • fetchCards: загружает и сохраняет список карточек.
  • fetchCardById: загружает детали карточки по ID.
  • likeCard: отмечает карточку как "лайкнутую".
  • unlikeCard: снимает отметку "лайкнутая" с карточки.
  • deleteCard: удаляет карточку из хранилища.

Запуск тестов

npm test

Тесты запускаются с использованием Jest, обеспечивая проверку основных функций приложения.

Используемые технологии

  • React: для построения пользовательского интерфейса.
  • Redux Toolkit: для управления состоянием приложения.
  • TypeScript: для типизации кода.
  • Axios: для работы с HTTP запросами.
  • Sass/SCSS: для стилизации компонентов.
  • Jest: для тестирования кода.

Вклад

Вклад приветствуется! Если у вас есть идеи или улучшения, создайте pull request.

Благодарности

  • Unsplash за предоставление API для изображений.

Этот Readme-файл должен предоставить вам четкое представление о структуре, установке и функциях приложения. Если у вас возникнут дополнительные вопросы, не стесняйтесь обращаться!