https://github.com/notacat1/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.
https://github.com/notacat1/card-management-app
jest react react-router redux sass
Last synced: 4 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/notacat1/card-management-app
- Owner: NotACat1
- Created: 2024-08-20T23:02:50.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-24T18:38:09.000Z (almost 2 years ago)
- Last Synced: 2025-03-04T09:36:45.608Z (about 1 year ago)
- Topics: jest, react, react-router, redux, sass
- Language: TypeScript
- Homepage: https://notacat1.github.io/Card-Management-App/
- Size: 7.46 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Просмотр карточек Unsplash
Это React-приложение, отображающее популярные изображения из Unsplash. Приложение поддерживает бесконечную прокрутку, возможность ставить и отменять лайки, фильтрацию по залайканным изображениям и просмотр деталей изображения на отдельной странице.
## Оглавление
- [Просмотр Карточек Unsplash](#просмотр-карточек-unsplash)
- [Оглавление](#оглавление)
- [Особенности](#особенности)
- [Начало работы](#начало-работы)
- [Предварительные требования](#предварительные-требования)
- [Установка](#установка)
- [Структура проекта](#структура-проекта)
- [Доступные скрипты](#доступные-скрипты)
- [API сервис](#api-сервис)
- [Основные функции](#основные-функции)
- [Redux хранилище](#redux-хранилище)
- [Основные действия](#основные-действия)
- [Запуск тестов](#запуск-тестов)
- [Используемые технологии](#используемые-технологии)
- [Вклад](#вклад)
- [Благодарности](#благодарности)
## Особенности
- **Отображение популярных изображений** из Unsplash.
- **Бесконечная прокрутка** для загрузки новых изображений по мере прокрутки страницы.
- Возможность **ставить и отменять лайки** на изображениях.
- **Фильтрация** для отображения только залайканных изображений.
- **Просмотр деталей** изображения на отдельной странице.
- **Адаптивный дизайн**, обеспечивающий корректное отображение на всех устройствах.
## Начало работы
### Предварительные требования
Перед началом убедитесь, что у вас установлены:
- [Node.js](https://nodejs.org/en/download/) (версии 14 или выше)
- npm (устанавливается вместе с Node.js) или [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable)
### Установка
1. **Клонируйте репозиторий:**
```bash
git clone https://github.com/NotACat1/Card-Management-App.git
cd unsplash-card-viewer
```
2. **Установите зависимости:**
```bash
# для npm
npm install
# для yarn
yarn install
```
3. **Создайте файл `.env`** в корневой директории и добавьте ваш API-ключ Unsplash:
```bash
REACT_APP_UNSPLASH_ACCESS_KEY=your_unsplash_access_key
```
4. **Запустите сервер разработки:**
```bash
npm start
```
5. **Откройте [http://localhost:3000](http://localhost:3000)** в вашем браузере для просмотра приложения.
## Структура проекта
Проект организован следующим образом:
```bash
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 # Точка входа приложения
```
## Доступные скрипты
В директории проекта доступны следующие команды:
```json
"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**: удаляет карточку из хранилища.
### Запуск тестов
```bash
npm test
```
Тесты запускаются с использованием Jest, обеспечивая проверку основных функций приложения.
## Используемые технологии
- **React**: для построения пользовательского интерфейса.
- **Redux Toolkit**: для управления состоянием приложения.
- **TypeScript**: для типизации кода.
- **Axios**: для работы с HTTP запросами.
- **Sass/SCSS**: для стилизации компонентов.
- **Jest**: для тестирования кода.
## Вклад
Вклад приветствуется! Если у вас есть идеи или улучшения, создайте `pull request`.
## Благодарности
- [Unsplash](https://unsplash.com) за предоставление API для изображений.
Этот Readme-файл должен предоставить вам четкое представление о структуре, установке и функциях приложения. Если у вас возникнут дополнительные вопросы, не стесняйтесь обращаться!