{"id":15156555,"url":"https://github.com/notacat1/card-management-app","last_synced_at":"2026-02-06T07:02:58.882Z","repository":{"id":254614555,"uuid":"845263214","full_name":"NotACat1/Card-Management-App","owner":"NotACat1","description":"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.","archived":false,"fork":false,"pushed_at":"2024-08-24T18:38:09.000Z","size":7821,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-04T09:36:45.608Z","etag":null,"topics":["jest","react","react-router","redux","sass"],"latest_commit_sha":null,"homepage":"https://notacat1.github.io/Card-Management-App/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NotACat1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-20T23:02:50.000Z","updated_at":"2024-08-24T18:38:13.000Z","dependencies_parsed_at":"2024-08-24T19:39:11.497Z","dependency_job_id":null,"html_url":"https://github.com/NotACat1/Card-Management-App","commit_stats":null,"previous_names":["notacat1/card-management-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/NotACat1/Card-Management-App","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NotACat1%2FCard-Management-App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NotACat1%2FCard-Management-App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NotACat1%2FCard-Management-App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NotACat1%2FCard-Management-App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NotACat1","download_url":"https://codeload.github.com/NotACat1/Card-Management-App/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NotACat1%2FCard-Management-App/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266845403,"owners_count":23994062,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-24T02:00:09.469Z","response_time":99,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jest","react","react-router","redux","sass"],"created_at":"2024-09-26T19:22:45.984Z","updated_at":"2026-02-06T07:02:58.829Z","avatar_url":"https://github.com/NotACat1.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Просмотр карточек Unsplash\n\n![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB)\n![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge\u0026logo=react-router\u0026logoColor=white)\n![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge\u0026logo=redux\u0026logoColor=white)\n![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)\n![SASS](https://img.shields.io/badge/SASS-hotpink.svg?style=for-the-badge\u0026logo=SASS\u0026logoColor=white)\n![Jest](https://img.shields.io/badge/-jest-%23C21325?style=for-the-badge\u0026logo=jest\u0026logoColor=white)\n\nЭто React-приложение, отображающее популярные изображения из Unsplash. Приложение поддерживает бесконечную прокрутку, возможность ставить и отменять лайки, фильтрацию по залайканным изображениям и просмотр деталей изображения на отдельной странице.\n\n## Оглавление\n\n- [Просмотр Карточек Unsplash](#просмотр-карточек-unsplash)\n  - [Оглавление](#оглавление)\n  - [Особенности](#особенности)\n  - [Начало работы](#начало-работы)\n    - [Предварительные требования](#предварительные-требования)\n    - [Установка](#установка)\n  - [Структура проекта](#структура-проекта)\n  - [Доступные скрипты](#доступные-скрипты)\n  - [API сервис](#api-сервис)\n    - [Основные функции](#основные-функции)\n  - [Redux хранилище](#redux-хранилище)\n    - [Основные действия](#основные-действия)\n    - [Запуск тестов](#запуск-тестов)\n  - [Используемые технологии](#используемые-технологии)\n  - [Вклад](#вклад)\n  - [Благодарности](#благодарности)\n\n## Особенности\n\n- **Отображение популярных изображений** из Unsplash.\n- **Бесконечная прокрутка** для загрузки новых изображений по мере прокрутки страницы.\n- Возможность **ставить и отменять лайки** на изображениях.\n- **Фильтрация** для отображения только залайканных изображений.\n- **Просмотр деталей** изображения на отдельной странице.\n- **Адаптивный дизайн**, обеспечивающий корректное отображение на всех устройствах.\n\n## Начало работы\n\n### Предварительные требования\n\nПеред началом убедитесь, что у вас установлены:\n\n- [Node.js](https://nodejs.org/en/download/) (версии 14 или выше)\n- npm (устанавливается вместе с Node.js) или [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable)\n\n### Установка\n\n1. **Клонируйте репозиторий:**\n\n   ```bash\n   git clone https://github.com/NotACat1/Card-Management-App.git\n   cd unsplash-card-viewer\n   ```\n\n2. **Установите зависимости:**\n\n   ```bash\n   # для npm\n   npm install\n\n   # для yarn\n   yarn install\n   ```\n\n3. **Создайте файл `.env`** в корневой директории и добавьте ваш API-ключ Unsplash:\n\n   ```bash\n   REACT_APP_UNSPLASH_ACCESS_KEY=your_unsplash_access_key\n   ```\n\n4. **Запустите сервер разработки:**\n\n   ```bash\n   npm start\n   ```\n\n5. **Откройте [http://localhost:3000](http://localhost:3000)** в вашем браузере для просмотра приложения.\n\n## Структура проекта\n\nПроект организован следующим образом:\n\n```bash\nsrc/\n├── assets/                # Медиафайлы, такие как изображения и иконки\n├── components/            # Повторно используемые React-компоненты\n│   ├── App/               # Основной компонент приложения\n│   ├── Card/              # Компонент карточки изображения\n│   ├── CardDetail/        # Компонент отображения деталей карточки\n│   ├── CardList/          # Компонент списка карточек\n│   ├── DeleteButton/      # Кнопка удаления карточки\n│   ├── DownloadButton/    # Кнопка скачивания изображения\n│   ├── Filter/            # Компонент фильтрации карточек\n│   ├── Footer/            # Подвал приложения\n│   ├── Header/            # Заголовок приложения\n│   ├── LikeButton/        # Кнопка лайка\n│   ├── ScrollToTopButton/ # Кнопка прокрутки вверх\n│   └── ThemeSwitcher/     # Переключатель темы\n├── data/                  # Статические данные и константы\n├── fonts/                 # Шрифты, используемые в приложении\n├── pages/                 # Страницы приложения\n│   ├── card/              # Страница с деталями карточки\n│   ├── error/             # Страница с ошибками\n│   ├── list/              # Страница со списком карточек\n│   └── root/              # Корневая страница\n├── services/              # API сервис для взаимодействия с Unsplash\n│   └── unsplashService.ts\n├── store/                 # Конфигурация и слайсы Redux-хранилища\n│   ├── cards/             # Слайс для управления состоянием карточек\n│   └── index.ts           # Основная настройка хранилища\n├── styles/                # Глобальные стили и SCSS переменные\n├── types/                 # Типы данных и интерфейсы TypeScript\n└── index.tsx              # Точка входа приложения\n```\n\n## Доступные скрипты\n\nВ директории проекта доступны следующие команды:\n\n```json\n\"scripts\": {\n  \"prepare\": \"husky install\",\n  \"lint-staged\": \"lint-staged\",\n  \"start\": \"craco start\",\n  \"build\": \"craco build\",\n  \"test\": \"jest\",\n  \"eject\": \"react-scripts eject\",\n  \"predeploy\": \"npm run build\",\n  \"deploy\": \"gh-pages -d build\"\n}\n```\n\n- **`npm start`**: запускает приложение в режиме разработки.\n- **`npm run build`**: создает оптимизированную сборку приложения.\n- **`npm run test`**: запускает тесты с использованием Jest.\n- **`npm run deploy`**: деплоит приложение на GitHub Pages.\n\n## API сервис\n\nПриложение использует Unsplash API для получения популярных изображений. API сервис реализован в `src/services/unsplashService.ts` с использованием Axios.\n\n### Основные функции\n\n- **fetchCards**: получает список популярных изображений.\n- **fetchCardById**: получает детали конкретного изображения по его ID.\n\n## Redux хранилище\n\nСостояние приложения управляется с помощью Redux Toolkit. Хранилище настроено в `src/store/index.ts`, а состояние, связанное с карточками, обрабатывается в `src/store/cards/cardsSlice.ts`.\n\n### Основные действия\n\n- **fetchCards**: загружает и сохраняет список карточек.\n- **fetchCardById**: загружает детали карточки по ID.\n- **likeCard**: отмечает карточку как \"лайкнутую\".\n- **unlikeCard**: снимает отметку \"лайкнутая\" с карточки.\n- **deleteCard**: удаляет карточку из хранилища.\n\n### Запуск тестов\n\n```bash\nnpm test\n```\n\nТесты запускаются с использованием Jest, обеспечивая проверку основных функций приложения.\n\n## Используемые технологии\n\n- **React**: для построения пользовательского интерфейса.\n- **Redux Toolkit**: для управления состоянием приложения.\n- **TypeScript**: для типизации кода.\n- **Axios**: для работы с HTTP запросами.\n- **Sass/SCSS**: для стилизации компонентов.\n- **Jest**: для тестирования кода.\n\n## Вклад\n\nВклад приветствуется! Если у вас есть идеи или улучшения, создайте `pull request`.\n\n## Благодарности\n\n- [Unsplash](https://unsplash.com) за предоставление API для изображений.\n\nЭтот Readme-файл должен предоставить вам четкое представление о структуре, установке и функциях приложения. Если у вас возникнут дополнительные вопросы, не стесняйтесь обращаться!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotacat1%2Fcard-management-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnotacat1%2Fcard-management-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotacat1%2Fcard-management-app/lists"}