レビュー掲載アプリ
概要
このプロジェクトでは、レビュー掲載アプリを構築します。 レビューの一覧を表示するだけでなく、アプリ内に生成 AI を組み込み、全てのレビューを踏まえた要約を表示します。
学習目標
shadcn/ui による、デザインシステムの導入と、柔軟に拡張を学習します。
shadcn/ui によって書き込まれるソースコードから、モダンなコンポーネントの実装パターンを確認してください。
推奨技術
このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。
- shadcn/ui を用いた UI の実装
- Gemini API による AI の活用
- vite を用いた React 環境構築
- TypeScript による型チェック
🎯 お題
- 「ユーザーストーリー」を全て満たす、アプリを構築してください。
- 必要に応じて、スクリーンショットやデモサイトの URL を、参照してください。
- なお、スタイルは、あなた自身で独自にカスタマイズすることが可能です。
必須機能
- レビューの一覧を表示:
- サイト上時に、レビューの一覧を表示する。
- レビューの要約を表示:
- 全てのレビューを踏まえた、分析結果を取得して表示する。
追加情報
今回推奨する API は、「Gemini API」です。
- この API は、Google が開発した、生成モデルに API 経由でアクセスできます。
- Google アカウントと、アクセスキーの発行が必要です。
- （12/8 時点）テストや hobby 利用の場合、クレジットの登録なしで無料で利用できます。
注意：
- API キーのような機密情報をブラウザから送るのは、リスクがあります。
- なので、ブラウザからの API アクセスは、開発時のテストでのみ使用することをお勧めします。
- もし、アプリを公開する際は、ダミーのデータを使用することをお勧めします。
- GitHub 上で管理する際は、環境変数が含まれてないことを、ご確認ください。
ユーザーストーリー
- ユーザーがサイトにアクセスすると、画面右側にレビューの一覧が表示されている
- 画面右側のみ、縦方向にスクロールすることができる
- 画面左側に、AI によるレビューの要約が表示されている
- タブを切り替えることで、AI による分析（高評価・低評価のポイント）のリストを確認できる