Synapsoul: 読書管理アプリ

こんにちは、読書愛好家の皆さん！
ここ数年読書が全然できてないのですが、最近読書欲が再発し始めてきたこともあり、思い切って読書管理アプリを作ってみました。着手から2週間で一気に作ったこともありクオリティはまだまだで、これからもっとブラッシュアップしていく予定ですが、一旦チェックポイントということでメモついでに記事にします。

アプリ概要

読書管理アプリというと、有名どころで読書メーターというサービスがあります。自分も使っていました。とてもいいサービスです。
https://bookmeter.com/

本アプリは読書メーターと機能がかぶる部分はありますが、読後体験をより深められるといいな、という思いで作りました。具体的には書籍に対する読書メモの作成、スレッドの作成ができるようにしました。読んだあとに他の人の考えと交流することでより幅広い理解ができるような場所があると面白いだろうなーと。

主な機能

書籍管理:
- 好きな本をお気に入り、読んだ本、読んでる本、気になる本、積んでる本などのステータスで管理
- 書籍情報は楽天ブックスAPIを利用

書籍検索画面
マイブック一覧画面
書籍詳細画面

読書メモ機能:
- 各書籍に対して読書メモを複数作成できる
- 公開・非公開の設定があり、公開したものは他のユーザーも見ることができる
- ファイル添付機能があり、画像やダイアグラム図などで整理した内容を保管できる

読書メモ一覧
読書メモ内容確認
公開メモ

スレッド作成機能:
- 各書籍に対してスレッドを複数作成できる
- 他のユーザーとチャットでき、書籍に対してディスカッションできる

スレッド一覧画面
スレッド詳細画面

インポート機能:
- 読書メーターからのデータインポート機能あり
- 読んだ本、読んでる本、積読本、読みたい本に登録済みの本を、本アプリに登録可能
- ユーザーIDは読書メーターのマイページのURL https://bookmeter.com/users/{user_id}のuser_idにあたる部分の数字
フィードバック機能:
- アプリに対するコメント投稿機能、コメントに対するGood/Bad評価あり
- より良いアプリにしていくために

表示名変更機能:
- プライバシー保護のために表示名変更機能あり（Googleアカウントの名前は使わない）

技術スタック

フロントエンド:
- Next.js 14（App Router）
- React 18
- TypeScript
- Tailwind CSS
バックエンド:
- tRPC
- Prisma ORM
- PostgreSQL
認証:
- NextAuth.js (現在はGoogleアカウントでのログインのみ対応)
デプロイ:
- Vercel
その他:
- shadcn/ui
- Lucide Icons
- Zod for validation
- Zustand
- vercel/blob
- vercel/kv

開発所感

Vercelでのデプロイが楽

初めてvercelでデプロイしました。Githubと連携すればブランチpushするだけで自動でpreview環境、production環境が作られたりとかなり楽。ただサーバーの管理はこちらでできないので自由度の制限はある。

vercel/blob, vercel/kv

ストレージにvercel/blob, redisにverce/kvを使用。
各環境との統合が楽でenv値も勝手に設定してくれる。

T3stack

tRPC, Prismaで型安全かつ低コストに開発できた。
Next.jsのServerAction使えばもっと楽になるかも？

Claude 3.5 Sonnet

フル活用。基本的にやりたいことを指示してコードの大部分を作らせて細かいところは自分で修正。
2週間でここまで作れたのは100%こいつのおかげ。基本的に動くコードを出してくれる。
Projects機能を使って↓を参考にアプリ全体のコードを読ませてた。
https://zenn.dev/olemi/articles/7b7992c055c64a
アプリ全体を把握したうえで回答してくれるので、想定と違った回答は殆どなかった。

まとめ

もっといっぱい本を読むと、欲しい機能が出てくるかもしれない。
他の人の読書メモはめちゃくちゃ見たい。