{"id":24491660,"url":"https://github.com/b13o/photo-gallery","last_synced_at":"2026-04-16T19:02:57.213Z","repository":{"id":273193040,"uuid":"914508404","full_name":"b13o/photo-gallery","owner":"b13o","description":"⛰️ A simple image search app with Unsplash API.","archived":false,"fork":false,"pushed_at":"2025-01-19T10:35:00.000Z","size":65,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-31T23:27:21.489Z","etag":null,"topics":["errorboundary","react","suspense","typescript","unsplash-api","usedeferredvalue","usetransition"],"latest_commit_sha":null,"homepage":"https://b13o.github.io/photo-gallery/","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/b13o.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":"2025-01-09T18:26:40.000Z","updated_at":"2025-01-19T10:35:02.000Z","dependencies_parsed_at":"2025-01-19T11:37:05.268Z","dependency_job_id":null,"html_url":"https://github.com/b13o/photo-gallery","commit_stats":null,"previous_names":["b13o/photo-gallery"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/b13o/photo-gallery","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13o%2Fphoto-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13o%2Fphoto-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13o%2Fphoto-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13o%2Fphoto-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/b13o","download_url":"https://codeload.github.com/b13o/photo-gallery/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13o%2Fphoto-gallery/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31899986,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"ssl_error","status_checked_at":"2026-04-16T18:21:47.142Z","response_time":69,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6: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":["errorboundary","react","suspense","typescript","unsplash-api","usedeferredvalue","usetransition"],"created_at":"2025-01-21T18:18:56.803Z","updated_at":"2026-04-16T19:02:57.196Z","avatar_url":"https://github.com/b13o.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg width=\"1440\" alt=\"app-banner\" src=\"https://github.com/user-attachments/assets/ba02a49c-8b16-491b-99a2-ce35d502fd14\" /\u003e\n\n# フォトギャラリーアプリ\n\n## 概要\n\nこのプロジェクトでは、高画質なフリー画像検索アプリを構築します。\n\nUnsplash API を使用し、特定のトピックに関連する画像一覧を表示します。\n\n## 学習目標\n\nSuspense, Error Boundaries を使用した、宣言的な非同期処理の記述を学習します。\n\n合わせて、React 18 で追加された useTransition や useDeferredValue の使用方法について確認してください。\n\n### 推奨技術\n\nこのプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。\n\n- Vite を用いた React 環境構築\n- TypeScript による型チェック\n- Tailwind CSS を用いたスタイリング\n- shadcn/ui によるコンポーネントの導入\n- Unsplash API を用いた画像取得\n\n---\n\n## 🎯 お題\n\n- 「ユーザーストーリー」を全て満たす、アプリを構築してください。\n- 必要に応じて、スクリーンショットやデモサイトの URL を、参照してください。\n- なお、スタイルは、あなた自身で独自にカスタマイズすることが可能です。\n\n### 必須機能\n\n1. **画像一覧表示**：\n   - Unsplash API から取得した画像を表示\n   - Suspense, Error Boundaries を使用した適切な取得状態の表示\n2. **画像検索**：\n   - キーワードによる画像検索機能\n   - 検索体験の最適化(useDeferredValue)\n3. **画像詳細モーダル**：\n   - 画像クリック時に詳細情報をモーダルで表示\n   - transition を使用したモーダルの読み込み\n\n### 追加情報\n\n今回推奨する API は、「[Unsplash API](https://unsplash.com/developers)」です。\n\n- この API は、高品質は画像のコレクションにアクセスできます。\n- アカウント登録と、アクセスキーの発行が必要ですが、無料で使用できます\n- なお、開発時のレート制限は、１時間あたり 50 リクエストまでです。[ref](https://unsplash.com/documentation#:~:text=rate%2Dlimited%20to%2050%20requests%20per%20hour.%20)\n\n## ユーザーストーリー\n\n- [ ] ユーザーがサイトにアクセスすると、Unsplash からの厳選された画像一覧が表示される\n- [ ] 画像は読み込み中には、ローディング UI が表示される\n- [ ] ヘッダーに、検索バーが表示されている\n- [ ] 検索バーに文字を入力すると、その内容に関連する画像が表示される\n- [ ] 検索中は、２文字目以降の入力では、古いデータを点滅させて読み込み中であることを視覚的に表す\n- [ ] 画像をクリックすると、モーダルウィンドウが開き、詳細情報が表示される\n- [ ] モーダル内では、次の情報が確認できる：\n  - 画像/ 撮影者/ 撮影場所/ 説明文/ ダウンロード数/ いいね数/ 関連するタグ（複数）\n- [ ] モーダル内の関連するタグをクリックすると、画像検索が行われる\n- [ ] モーダルは画面外クリックや、「_X アイコン_」で閉じることができる\n- [ ] エラーが発生した場合、適切なエラーメッセージが表示される\n\n### その他\n\n- RSC が使える場合は直接 async/await を使用することができます\n- クライアントコンポーネントでは use API を使用することができます\n- デモコードでは、Suspense の仕組みの基本概念を掴むため、`wrapPromise`を実装しています\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fb13o%2Fphoto-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fb13o%2Fphoto-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fb13o%2Fphoto-gallery/lists"}