Search Book / 書籍ストックサービス

サービス概要

読みたい本や気になる本を検索して本棚にストックしておけるサービスです。

サービスURL

https://main.d1h9h0rr432r2c.amplifyapp.com/

サービス構成図

使用技術一覧

フロントエンド・バックエンド: TypeScript 4.9.5 / React 18.0 / Next.js 14.0.2

• コード解析: ESLint
• フォーマッター: Prettier
• テストフレームワーク: Jest / React Testing Library
• CSSフレームワーク: Tailwind CSS
• 主要パッケージ: Axios / lucide / nextui / supabase/auth-helpers-nextjs / supabase/supabase-js
• API: Google Books APIs

DB: Supabase

インフラ: AWS Amplify

CI / CD: GitHub Actions

認証: Supabase

技術選定理由

理由や学習方法はZennにまとめています。

「Next.js × Supabaseで書籍ストックサービスを作成するまで〜技術選定理由・学習方法まとめ〜」 https://zenn.dev/serina_yam/articles/5a357f954ed707

主要対応一覧

機能

• GitHub・Googleアカウントを利用したユーザー登録 / ログイン機能
• ストックの取得 / 追加 / 削除機能
• 本の検索機能

画面

• 検索画面
• ポップアップ画面
• 詳細画面
• ログイン画面
• マイページ画面
• 404 / 500エラーのカスタム画面
• レスポンシブデザイン

システム / インフラ

• Next.jsのImage / Linkコンポーネントなどの活用によるサービス全体の高速化
• GitHub ActionsによるCI / CDパイプラインの構築

インフラ構成図

ER図

画面遷移図

Figma 画面遷移図