概要
このプロジェクトでは、トピック別にブックマーク(URL)を管理するアプリを構築します。
トピックを作成し、そのトピックに関連する URL ブックマークを追加することで、情報を整理して保存・表示します。
学習目標
今回のテーマは、Prisma を使用したデータベース操作について、学習します。 スキーマ設計、マイグレーション、リレーション(1 対多)の実装方法をはじめ、Next.js のフルスタック開発について、確認してください。
推奨技術
このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。
- Prisma を用いたデータベース操作
- SQLite を用いたローカルデータベース
- Next.js を用いたフルスタック環境構築
- TypeScript による型チェック
- Tailwind CSS を用いたスタイリング
- Shadcn UI を用いたコンポーネントライブラリ
- API Routes を用いたバックエンド実装
- Prisma Studio を用いたデータベース管理方法
🎯 お題
- 「ユーザーストーリー」を全て満たすアプリを構築してください。
- 必要に応じて、スクリーンショットやデモサイトの URL を参照してください。
- スタイルは、あなた自身で独自にカスタマイズすることが可能です。
必須機能
- トピック管理:
- 学習トピックを追加・編集・削除し、表示する。
- ブックマーク管理:
- URL、説明を記録・編集・削除する。
- トピック別表示:
- 選択したトピックに関連するブックマークを一覧表示する。
ユーザーストーリー
- ユーザーがサイトにアクセスすると、トピック一覧が表示されている。
- 新しいトピックを作成する際は、絵文字・タイトル・説明を入力できる。
- 作成したトピックが一覧に表示される。
- トピックを編集・削除できる。
- 特定のトピックを選択すると、そのトピックに関連するブックマークが一覧表示される。
- ユーザーがブックマークを追加する際は、関連するトピックをドロップダウンリストから選択できる。
- URL・説明を入力できる。
- 必要な情報を入力し、「保存」ボタンをクリックすると、ブックマークが一覧に追加される。
- ブックマークを編集・削除できる。
- Prisma Studio でデータベースの内容を確認・操作できる。