{"id":21652032,"url":"https://github.com/gudzsv/goit-react-hw-04","last_synced_at":"2026-04-08T20:03:04.404Z","repository":{"id":240982688,"uuid":"803985097","full_name":"gudzsv/goit-react-hw-04","owner":"gudzsv","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-30T15:11:17.000Z","size":228,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-19T02:58:33.482Z","etag":null,"topics":["css3","goit-react-hw-04","js","jsx","reactjs","vercel","vite"],"latest_commit_sha":null,"homepage":"https://goit-react-hw-04-sigma-puce.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gudzsv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-05-21T18:28:04.000Z","updated_at":"2024-05-30T15:11:21.000Z","dependencies_parsed_at":"2024-11-25T07:50:48.852Z","dependency_job_id":"a1a1175d-7691-43c2-8a46-f9accadc522d","html_url":"https://github.com/gudzsv/goit-react-hw-04","commit_stats":null,"previous_names":["gudzsv/goit-react-hw-04"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gudzsv/goit-react-hw-04","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gudzsv%2Fgoit-react-hw-04","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gudzsv%2Fgoit-react-hw-04/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gudzsv%2Fgoit-react-hw-04/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gudzsv%2Fgoit-react-hw-04/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gudzsv","download_url":"https://codeload.github.com/gudzsv/goit-react-hw-04/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gudzsv%2Fgoit-react-hw-04/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31571601,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["css3","goit-react-hw-04","js","jsx","reactjs","vercel","vite"],"created_at":"2024-11-25T07:50:46.404Z","updated_at":"2026-04-08T20:03:04.379Z","avatar_url":"https://github.com/gudzsv.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Домашнє завдання `goit-react-hw-04`\n\n### Пошук зображень\n\nНапиши застосунок пошуку зображень за ключовим словом. Подивіться демо-відео роботи застосунку.\n\nСервіс пошуку зображень\n\n\n\nhttps://github.com/gudzsv/goit-react-hw-04/assets/49489543/5a4d79ef-bc5b-4b5b-8948-9de71e4a276b\n\n\n\nВ цьому завданні, за допомогою HTTP-запитів, ти будеш отримувати зображення з сервісу зображень [Unsplash](https://unsplash.com/developers).\n\n- Зареєструй аккаунт розробника, щоб отримати доступ до документації та можливості взаємодіяти з бекендом.\n- Створи запис про своєму додатку на їхньому сервісі (блок **New Application**). Це обов'язковий крок. Придумай назву свого додатку, наприклад Image Gallery, Photo Search або щось подібне.\n- Після створення запису про додаток, на його сторінці отримай в розділі **Keys** ключ доступу для HTTP-запитів (**Access Key**).\n\n\u003e ![NOTE] Для безкоштовної (Demo) версії додатків, кількість HTTP-запитів обмежено до 50 штук на годину, врахуй це і не роби багато непотрібних запитів!\n\nКорисні для тебе розділи документації:\n- [Як скласти URL-запиту](https://unsplash.com/documentation#schema)\n- [Як додати ключ доступу до запитів](https://unsplash.com/documentation#public-authentication)\n- [Пошук зображень за ключовим словом](https://unsplash.com/documentation#search-photos)\n\nВідповідь від бекенда приходить об'єктом із всією необхідною інформацією. Там ти знайдеш масив зображень та загальну кількість груп для пагінації. Кожне зображення в масиві представлено об'єктом із великою кількістю інформації. В першу чергу тебе цікавлять посилання на різні за розміром версії зображення у властивості **urls**. Використовуй **small** версію для карток галереї, та **regular** версію для модального вікна.\n\n\u003e ![NOTE] Не обмежуйся завданням, використовуй дані із об'єктів, щоб відобразити більше цікавої інформації в модальному вікні. Наприклад, про автора зображення, кількість лайків, опис і т.д.\n\n**Компоненти**\nУ цьому завданні тобі потрібно самостійно виділити наступні компоненти та додати базову стилізацію інтерфейсу на свій смак. Бери за приклад демо-відео роботи застосунку.\n![alt text](./assets/image-1.png)\n\n**Хедер з формою пошуку**\n\nКомпонент `SearchBar` приймає один проп `onSubmit` – функцію для передачі значення інпуту під час сабміту форми. Створює DOM-елемент наступної структури.\n\n```html\n\u003cheader\u003e\n  \u003cform\u003e\n    \u003cinput\n      type=\"text\"\n      autocomplete=\"off\"\n      autofocus\n      placeholder=\"Search images and photos\"\n    /\u003e\n    \u003cbutton type=\"submit\"\u003eSearch\u003c/button\u003e\n  \u003c/form\u003e\n\u003c/header\u003e\n```\n\nЯкщо під час натискання кнопки відправки форми текстове поле порожнє, покажи користувачеві сповіщення про те, що необхідно ввести текст для пошуку зображень. Ця перевірка виконується в компоненті **SearchBar** в момент відправки форми. Для сповіщень використовуй бібліотеку [React Hot Toast](https://react-hot-toast.com/).\n\n**Галерея зображень**\n\nКомпонент **ImageGallery** – це список карток зображень який створює DOM-елемент наступної структури.\n\n```html\n\u003cul\u003e\n\t{/* Набір елементів списку із зображеннями */}\n\t\u003cli\u003e\n\t\t\u003cdiv\u003e\n\t\t  \u003cimg src=\"\" alt=\"\" /\u003e\n\t\t\u003c/div\u003e\n\t\u003c/li\u003e\n\u003c/ul\u003e\n```\nГалерея повинна рендеритися лише тоді, коли є які-небудь завантажені зображення. Це добра практика не включати елемент **li** в компонент карточки, а залишити його частиною компонента галереї.\n\n**Картка зображення**\n\nКомпонент **ImageCard** рендериться в елементі галереї. Створює DOM-елемент наступної структури.\n\n```html\n\u003cdiv\u003e\n  \u003cimg src=\"\" alt=\"\" /\u003e\n\u003c/div\u003e\n```\n\n**Індикатор завантаження**\n\nКомпонент **Loader** відображається під галереєю поки відбувається завантаження зображень. Використовуй будь-який готовий компонент, наприклад [react-loader-spinner](https://github.com/mhnpd/react-loader-spinner) або інший.\n\nПоки йде завантаження зображень, індикатор завантаження не повинен замінювати галерею, а просто рендеритися під нею. Це буде критичним при додаванні зображень до вже завантажених.\n\n**Повідомлення про помилку**\n\nКомпонент **ErrorMessage** рендериться замість галереї зображень у випадку помилки HTTP-запиту. Достатньо, щоб це було текстове повідомлення.\n\n**Кнопка завантаження додаткових зображень**\nКомпонент **LoadMoreBtn** рендерить кнопку із текстом \"Load more\". При натисканні на кнопку має завантажуватися наступна порція зображень і рендеритися разом із попередніми.\n\n- Кнопка має рендеритися лише тоді, коли є які-небудь завантажені зображення.\n- Якщо масив зображень порожній, кнопка не рендериться.\n\n**Модальне вікно**\n\nКомпонент **ImageModal** повинен рендеритися всередині компоненту **App** та отримувати через пропси з App всі необхідні дані та функції.\n\nПід час натискання на зображення галереї повинно відкриватися модальне вікно **ImageModal** з темним фоном, яке відображатиме зображення у великому форматі. Модальне вікно має бути налаштовано таким чином, щоб воно закривалося при натисканні на клавішу **ESC** або при кліку за його межами. Для реалізації функціональності модального вікна використовуй бібліотеку [React Modal](https://github.com/reactjs/react-modal?tab=readme-ov-file#examples).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgudzsv%2Fgoit-react-hw-04","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgudzsv%2Fgoit-react-hw-04","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgudzsv%2Fgoit-react-hw-04/lists"}