https://github.com/b13o/book-management-board

📚 A simple book management board app. Trello style.
https://github.com/b13o/book-management-board

drag-and-drop react shadcn-ui tanstack-query typescript

Last synced: 29 days ago
JSON representation

📚 A simple book management board app. Trello style.

• Host: GitHub
• URL: https://github.com/b13o/book-management-board
• Owner: b13o
• Created: 2025-01-05T10:32:44.000Z (29 days ago)
• Default Branch: main
• Last Pushed: 2025-01-05T11:09:01.000Z (29 days ago)
• Last Synced: 2025-01-05T12:18:54.114Z (29 days ago)
• Topics: drag-and-drop, react, shadcn-ui, tanstack-query, typescript
• Language: TypeScript
• Homepage: https://b13o.github.io/book-management-board/
• Size: 68.4 KB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


# 書籍管理アプリ

## 概要

このプロジェクトでは、Trello 風の書籍管理アプリを構築します。

本を「欲しい本」「購入した本」「読み終えた本」の 3 つのステータスで管理し、

ドラッグ&ドロップで本の状態を更新できます。

## 学習目標

TanStack Query（React Query）を使用した、サーバーデータの管理について学習します。

API との通信、データのキャッシュ管理、楽観的更新などの実装を確認してください。

### 推奨技術

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

- vite を用いた React 環境構築

- TypeScript による型チェック

- TanStack Query を用いたサーバーの状態管理

- JSON Server を用いたモック API

- Drag and Drop API の活用

---

## 🎯 お題

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

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

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

### 必須機能

1. **本の一覧表示**：

   - ステータス（欲しい本、購入した本、読み終えた本）ごとに本を表示する

2. **本の追加**：

   - タイトルと著者を入力して、新しい本を追加する

3. **本のステータス管理**：

   - ドラッグ&ドロップで本のステータスを更新する

4. **本の削除**：

   - 不要な本を一覧から削除する

## ユーザーストーリー

- [ ] ユーザーがサイトにアクセスすると、3 列のボードレイアウト（欲しい本、購入した本、読み終えた本）が表示されている

- [ ] タイトルと著者名を入力して、新しい本を「欲しい本」リストに追加できる

- [ ] 追加した本が、適切なステータスの列に表示される

- [ ] 本のカードをドラッグ&ドロップで異なるステータスの列に移動できる

- [ ] 本のステータスが更新されると、即座に UI が更新される

- [ ] 本のカードに削除ボタンがあり、クリックすると一覧から削除できる

- [ ] データの読み込み中は適切なローディング表示がされる

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