済読

C0deハッカソン Human Intelligence Award 受賞作品 (2025年10月)

書店での出会いを大切にしたい、という思いから、書店で出会った本を（たとえ購入しなくても）記録しておけるアプリ、積んだままにしないためのアプリをつくりました。 表紙が一覧として表示されることで、積まれた状態の背表紙ではなく、出会った時の思いを思い出してほしい、という願いをこめています。

主な機能

• 自動書籍情報取得: Google Books APIと連携し、ISBN入力のみで書名、著者、表紙画像などを自動補完。
• ISBNバーコード読み込み: ISBNを書籍バーコードから読み取り。
• 読了状況管理:　本屋で出会った本を登録可能。所有している本、読了した本と分けて表示。

🛠 技術スタック

カテゴリ	使用技術
Frontend	Next.js 15, TypeScript, Tailwind CSS, pnpm
Backend	FastAPI, Uvicorn, Pydantic, uv
Database	PostgreSQL
API	Google Books API

Screenshots & Demo

Main Interface

Features

Feature Analysis	User Interaction

Detail Views

System Workflow / Data Flow

システム構成・ディレクトリ構造(バックエンド)

back/
├── api/routers/      # APIエンドポイント定義（CRUD、外部API連携など）
├── app/              # ビジネスロジック
│   ├── schemas/      # Pydanticによるデータモデル定義
│   └── services/     # DB操作や外部API呼び出しの具体的な処理
└── database/         # DB接続設定およびSQLAlchemyモデル

ローカル起動方法

Next.js 16 + TypeScript（front/）と FastAPI（back/）で構成されたシンプルなフルスタック構成です。両者を同時に起動するとフロントエンドがサーバーコンポーネントから バックエンドの REST API を叩き、取得したメッセージを画面へ表示します。

Backend

cd back
uv sync  # もしくは `pip install -r requirements.txt`
uv run python main.py  # http://127.0.0.1:8000 で FastAPI が立ち上がります

エンドポイントを確認したい場合は、backのREADMEまたは、FastAPIのドキュメントを参照してください。 ポートを変更したい場合は BACKEND_PORT 環境変数を設定してください。

Google Books APIの設定

• GOOGLE_BOOKS_API_URL : デフォルトは https://www.googleapis.com/books/v1/volumes
• GOOGLE_BOOKS_API_KEY : 未設定でも動作しますが、独自の API キーを設定するとレート制限に余裕ができます

Frontend

cd front
NEXT_PUBLIC_BACKEND_URL="http://127.0.0.1:8000" pnpm run dev

NEXT_PUBLIC_BACKEND_URL は .env.local でも設定可能です（未設定時は http://127.0.0.1:8000 にフォールバックします）。

画面内の「ISBN検索デモ」フォームから送信すると POST /api/books/search に対して fetch を行い、戻ってきた Google Books の検索結果がカードに表示されます。 インターネット接続が必要です。テスト用 ISBN: 978-4-16-758312-8, 978-4-04-102622-5, 978-4-08-771112-1。

動作確認

1. 上記手順で FastAPI と Next.js の両方を起動
2. ブラウザで http://localhost:3000 を開く
3. 画面中央の「最新のバックエンドレスポンス」に API から取得したメッセージが表示されれば成功です 🎉