https://github.com/b13o/photo-gallery

⛰️ A simple image search app with Unsplash API.
https://github.com/b13o/photo-gallery

errorboundary react suspense typescript unsplash-api usedeferredvalue usetransition

Last synced: 4 days ago
JSON representation

⛰️ A simple image search app with Unsplash API.

• Host: GitHub
• URL: https://github.com/b13o/photo-gallery
• Owner: b13o
• Created: 2025-01-09T18:26:40.000Z (16 days ago)
• Default Branch: main
• Last Pushed: 2025-01-19T10:35:00.000Z (7 days ago)
• Last Synced: 2025-01-19T11:26:54.516Z (7 days ago)
• Topics: errorboundary, react, suspense, typescript, unsplash-api, usedeferredvalue, usetransition
• Language: TypeScript
• Homepage: https://b13o.github.io/photo-gallery/
• Size: 63.5 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


# フォトギャラリーアプリ

## 概要

このプロジェクトでは、高画質なフリー画像検索アプリを構築します。

Unsplash API を使用し、特定のトピックに関連する画像一覧を表示します。

## 学習目標

Suspense, Error Boundaries を使用した、宣言的な非同期処理の記述を学習します。

合わせて、React 18 で追加された useTransition や useDeferredValue の使用方法について確認してください。

### 推奨技術

このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。

- Vite を用いた React 環境構築

- TypeScript による型チェック

- Tailwind CSS を用いたスタイリング

- shadcn/ui によるコンポーネントの導入

- Unsplash API を用いた画像取得

---

## 🎯 お題

- 「ユーザーストーリー」を全て満たす、アプリを構築してください。

- 必要に応じて、スクリーンショットやデモサイトの URL を、参照してください。

- なお、スタイルは、あなた自身で独自にカスタマイズすることが可能です。

### 必須機能

1. **画像一覧表示**：

   - Unsplash API から取得した画像を表示

   - Suspense, Error Boundaries を使用した適切な取得状態の表示

2. **画像検索**：

   - キーワードによる画像検索機能

   - 検索体験の最適化(useDeferredValue)

3. **画像詳細モーダル**：

   - 画像クリック時に詳細情報をモーダルで表示

   - transition を使用したモーダルの読み込み

### 追加情報

今回推奨する API は、「[Unsplash API](https://unsplash.com/developers)」です。

- この API は、高品質は画像のコレクションにアクセスできます。

- アカウント登録と、アクセスキーの発行が必要ですが、無料で使用できます

- なお、開発時のレート制限は、１時間あたり 50 リクエストまでです。[ref](https://unsplash.com/documentation#:~:text=rate%2Dlimited%20to%2050%20requests%20per%20hour.%20)

## ユーザーストーリー

- [ ] ユーザーがサイトにアクセスすると、Unsplash からの厳選された画像一覧が表示される

- [ ] 画像は読み込み中には、ローディング UI が表示される

- [ ] ヘッダーに、検索バーが表示されている

- [ ] 検索バーに文字を入力すると、その内容に関連する画像が表示される

- [ ] 検索中は、２文字目以降の入力では、古いデータを点滅させて読み込み中であることを視覚的に表す

- [ ] 画像をクリックすると、モーダルウィンドウが開き、詳細情報が表示される

- [ ] モーダル内では、次の情報が確認できる：

  - 画像/ 撮影者/ 撮影場所/ 説明文/ ダウンロード数/ いいね数/ 関連するタグ（複数）

- [ ] モーダル内の関連するタグをクリックすると、画像検索が行われる

- [ ] モーダルは画面外クリックや、「_X アイコン_」で閉じることができる

- [ ] エラーが発生した場合、適切なエラーメッセージが表示される

### その他

- RSC が使える場合は直接 async/await を使用することができます

- クライアントコンポーネントでは use API を使用することができます

- デモコードでは、Suspense の仕組みの基本概念を掴むため、`wrapPromise`を実装しています