{"id":19174675,"url":"https://github.com/yuriyvyatkin/react-blog","last_synced_at":"2026-04-09T23:07:10.268Z","repository":{"id":169814014,"uuid":"645861257","full_name":"yuriyvyatkin/react-blog","owner":"yuriyvyatkin","description":"Cайт с постами и NFT картинками на базе JSONPlaceholder и OpenSea API","archived":false,"fork":false,"pushed_at":"2024-02-05T07:10:38.000Z","size":2276,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-23T00:44:14.648Z","etag":null,"topics":["axios","data-structure","react-bootstrap-components","react-router","reactjs","redux","redux-saga"],"latest_commit_sha":null,"homepage":"https://yuriyvyatkin.github.io/react-blog/#/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yuriyvyatkin.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":"2023-05-26T15:56:41.000Z","updated_at":"2024-02-04T13:22:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"ce1f7221-5ad9-4df9-8824-36edf58811ed","html_url":"https://github.com/yuriyvyatkin/react-blog","commit_stats":null,"previous_names":["yuriyvyatkin/react-blog"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yuriyvyatkin/react-blog","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuriyvyatkin%2Freact-blog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuriyvyatkin%2Freact-blog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuriyvyatkin%2Freact-blog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuriyvyatkin%2Freact-blog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yuriyvyatkin","download_url":"https://codeload.github.com/yuriyvyatkin/react-blog/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuriyvyatkin%2Freact-blog/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271923851,"owners_count":24844270,"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-08-24T02:00:11.135Z","response_time":111,"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":["axios","data-structure","react-bootstrap-components","react-router","reactjs","redux","redux-saga"],"created_at":"2024-11-09T10:18:45.060Z","updated_at":"2026-04-09T23:07:10.231Z","avatar_url":"https://github.com/yuriyvyatkin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## NFT Блог\n\n**🛠️ Стек**\n\nReact + Redux + Redux Saga + React Bootstrap + Bootstrap + React Router + Axios\n\n**💬 Основная информация о проекте**\n\nСтраницы:\n\n1. Главная. Содержит список всех постов.\n\n2. О пользователе. Содержит информацию о пользователе и список его постов.\n\n3. Обо мне.\n\n4. Ошибка 404.\n\nКонтент и изображения загружаются при помощи: [JSONPlaceholder API](https://jsonplaceholder.typicode.com) и [OpenSea API](https://docs.opensea.io/v1.0/reference/api-overview)\n\n**📚 Инструкция по запуску**\n\n##### 1. Клонирование\n\n```\ngit clone https://github.com/yuriyvyatkin/react-blog.git\n```\n\n```\ncd react-blog\n```\n\n##### 2. Создание ключа для OpenSea API\n\n- скачать и зарегистрировать криптокошелёк на сайте metamask.io\n\n- войти в раздел Settings на сайте opensea.io при помощи криптокошелька\n\n- перейти на вкладку Developer и создать ключ\n\n- создать файл .env в корне проекта со строкой вида ```REACT_APP_NFT_API_KEY='ваш ключ'```\n\n##### 3. Установка зависимостей и запуск\n\n```\nnpm install\n```\n\n```\nnpm start\n```\n\n**⚙️ Подробное описание**:\n\n1. Список постов (главная страница)\n\n   1.1. Содержит список всех постов.\n\n   1.2 Каждый пост состоит из заголовка, текста, аватара автора (NFT токен) и списка комментариев.\n\n   1.3 Заголовок и текст получены из JSONPlaceholder API.\n\n   1.4 Аватар одинаков для всех пользователей, но при клике на него, происходит переход на страницу \"Подробности о пользователе\".\n\n   1.5 Список комментариев изначально скрыт, доступна лишь кнопка \"Комментарии\".\n\n   1.6 При нажатии на кнопку \"Комментарии\", грузиться из JSONPlaceholder API и показывается список комментариев к данному посту. При повторном нажатии список скрывается.\n\n   1.7 Комментарий состоят из заголовка (email) и текста.\n\n   1.8. При загрузке данных с сервера отображается сперва спиннер предзагрузки, а потом подгруженный контент.\n\n   1.9. Присутствует хэдер с \"меню-бургером\". При нажатии на него слева всплывает навигационное меню, где присутствует 2 ссылки (\"Список постов\" и \"Обо мне\"), а также отображается мой аватар.\n\n   1.10 Присутствует возможность поиска по заголовку поста, с возможностью очистки поля через крестик.\n\n   1.11 Присутствует возможность сортировки по заголовку поста.\n\n   1.12 Присутствует пагинация (создана с нуля).\n\n2. Обо мне\n\n   2.1. Немного информации обо мне. Страница сделана отдельным роутом, с сохранением хэдера и \"меню-бургер\".\n\n3. Подробности о пользователе (переход при нажатии по аватару в карточке поста)\n\n   3.1. Карточка, с краткой информацией о пользователе. Информация соответствует автору поста, согласно JSONPlaceholder API.\n\n   3.2 Список постов, принадлежащих только данному пользователю.  Структура самих постов полностью идентична п.1.2.\n\n   3.3. Спиннер по аналогии с п.1.8.\n\n   3.4. Кнопка \"Назад\", при нажатии на которую происходит переход на главную страницу.\n\n📝 Дополнительно:\n\n1. Логика работы с API вынесена в saga-эффекты.\n\n2. Элементы страниц разбиты на логически-независимые компоненты.\n\n4. Данные подгружаются даже после обновления страницы при помощи хэш-роутера.\n\n5. Интерфейс реализован с помощью UI-библиотеки React Bootstrap.\n\n6. Реализована обработка ошибок от API.\n\n7. Реализована адаптивная вёрстка.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuriyvyatkin%2Freact-blog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyuriyvyatkin%2Freact-blog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuriyvyatkin%2Freact-blog/lists"}