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.
Это React-приложение, отображающее популярные изображения из Unsplash. Приложение поддерживает бесконечную прокрутку, возможность ставить и отменять лайки, фильтрацию по залайканным изображениям и просмотр деталей изображения на отдельной странице.
Перед началом убедитесь, что у вас установлены:
Клонируйте репозиторий:
git clone https://github.com/NotACat1/Card-Management-App.git
cd unsplash-card-viewer
Установите зависимости:
# для npm
npm install
# для yarn
yarn install
Создайте файл .env
в корневой директории и добавьте ваш API-ключ Unsplash:
REACT_APP_UNSPLASH_ACCESS_KEY=your_unsplash_access_key
Запустите сервер разработки:
npm start
Откройте 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.Приложение использует Unsplash API для получения популярных изображений. API сервис реализован в src/services/unsplashService.ts
с использованием Axios.
Состояние приложения управляется с помощью Redux Toolkit. Хранилище настроено в src/store/index.ts
, а состояние, связанное с карточками, обрабатывается в src/store/cards/cardsSlice.ts
.
npm test
Тесты запускаются с использованием Jest, обеспечивая проверку основных функций приложения.
Вклад приветствуется! Если у вас есть идеи или улучшения, создайте pull request
.
Этот Readme-файл должен предоставить вам четкое представление о структуре, установке и функциях приложения. Если у вас возникнут дополнительные вопросы, не стесняйтесь обращаться!