📚 概要

リブラクは、図書館でのリクエストカード作成を簡単にするアプリです。
市内の図書館に欲しい本がないとき、購入や他の図書館からの取り寄せを頼むのに使うのがリクエストカードです。
このアプリを使えば、欲しい本をお気に入りに登録しておくだけで、カードを書くときに必要な情報が一目でわかり、スムーズに手続きができるようになります。

 

🌐 URL

https://libraku.pages.dev

 

📱 モックアップ

 

✨ 機能一覧

• 書籍の検索
• お気に入り追加・削除
• ユーザー登録
• ユーザー設定
  • メールアドレスの変更
  • パスワードの変更
  • 利用者番号の登録・変更
• お問い合わせフォーム
• PWA

 

💻 使用技術

-	詳細	使用技術
フロントエンド	ライブラリ	React
	デプロイ先	Cloudflare Pages
	UI関連	TailwindCSS, shadcn/ui
	アニメーション	Framer Motion
	データフェッチ	TanStack Query
	ルーティング	React Router
	フォーム	React Hook Form
	ビルドツール	Vite
	リンター	ESLint
	フォーマッター	Prettier
バックエンド	ライブラリ	Hono
	デプロイ先	Cloudflare Workers
	認証	Lucia, Cloudflare Turnstile
	メール	Resend
	データベース	Cloudflare D1
	ORM	Drizzle ORM
共通	バリデーション	Zod

 

⏱️ 開発期間

2024年5月〜9月のうち、約3ヶ月強

 

🚀 v2.1.0で予定している実装内容

• Googleログイン
• パスワードを忘れたユーザー用の案内・メール通知
• sessionsテーブルの不要なデータを削除するcron-job
• お気に入りの取得件数の分割

 

💭 開発背景

技術書は高価でなかなか手が届かないため、図書館のリクエスト制度を普段から利用していました。
そんな中でリクエストカードの記入時に煩わしさを感じることが多々あったため、当アプリを作成することにしました。

 

🎯 狙い

• Reactでの基本的なアプリの作り方を学ぶ
• フロントエンドのメイン技術（ルーティングやデータフェッチ）について学ぶ
• バックエンドの技術（APIやデータベース、認証）に触れてみる
• フロントエンドとバックエンドの連携について学ぶ

 

🐈‍⬛ 振り返り

• 良かった点
  • 練習用リポジトリを作成し、実装前に新しく触れる技術を試した
    練習用リポジトリ一覧

    • https://github.com/kagomen/oauth-jwt-practice
    • https://github.com/kagomen/jwt-practice
    • https://github.com/kagomen/react-turnstile-practice
    • https://github.com/kagomen/react-vite-pages-functions-practice
    • https://github.com/kagomen/cloudflare-workers-practice
    • https://github.com/kagomen/react-router-v6-practice
    • https://github.com/kagomen/react-form-practice
    • https://github.com/kagomen/react-query-practice
    • https://github.com/kagomen/proxy-server-practice
• 反省点
  • ディレクトリ構成を何度も変更した
  • CorsやCookieの設定に手間取った
  • 各ライブラリに対する理解が浅い
  • GitHubを用いたバージョン管理が雑だった
• 改善策
  • Next.jsなどのフルスタックフレームワークを使用する
  • 復習として、できるだけ同じ技術スタックで次回の個人開発を行う
  • v2.1.0から、ブランチを切る->PR->セルフレビューという実践に即した流れで開発を行う