日本市場向け クラフトビールレビューアプリの開発
サイト: https://www.brianamos.dev/
海外製アプリが主流だったビールレビュー領域に、日本人ユーザーの嗜好に合わせた評価基準と体験を提供するために。Next.js + Express +
PostgreSQL によるフルスタック構成で、認証・権限管理・SEO最適化まで一貫して実装した個人開発プロジェクトの記録。
なぜ作ったのか
国内のクラフトビール市場は年々拡大しているが、既存のレビューサービスの多くは海外製であり、評価基準や味覚の表現が日本人ユーザーのそれと乖離しているケースが少なくない。海外ユーザーが「苦みが強くて良い」と高評価するビールが、日本人の味覚では必ずしも同様に受け取られないというような課題だ。
この問題意識をきっかけに、日本市場に最適化されたレビュー体験を提供するアプリを自ら開発することにした。同時に、Next.js・Express・PostgreSQL
というモダンで学習リソースも豊富な技術スタックを用いて、実践的なフルスタック開発の経験を積むという目的もあった。
アーキテクチャと採用技術
フロントエンドとバックエンドを分離した構成を採用し、将来的なスケーリングや保守性を重視した設計とした。
- フロントエンド --- Next.js（App Router）— SSG / SSR / CSR を用途に応じて使い分け
- バックエンド --- Express による REST API 設計・実装
- データベース --- PostgreSQL
- 認証 --- bcrypt + JWT 認証 + HTTPS Only Cookie（XSS対策）
- フォーム --- テキスト入力は useActionState、画像アップロードは React Hook Form
ユースケースに応じた設計判断
本プロジェクトで最も力を入れた点の一つが、レンダリング戦略とページネーション手法をユースケースごとに最適化することだった。
ビール・醸造所のページは SSG で静的生成してSEOを強化。検索エンジンからの流入を意識した設計にし、一方でレビュー一覧など動的なコンテンツは CSR でクライアントサイドに委ねてページネーションを柔軟に処理した。
ページネーションも2種類を使い分けた。最新アクティビティのフィードは Cursor Pagination を採用してリアルタイム性の高い表示に対応し、検索結果や一覧ページには扱いやすい Offset / Limit 方式を適用した。
権限管理（一般ユーザー）
自身の投稿・編集のみ可能。レビュー・ビール・ブルワリーの追加に対応。
権限管理（管理者）
全データの閲覧・編集・削除に対応。論理削除・物理削除・復元も実装。
認証・セキュリティ
JWT + HTTPS Only Cookie 設定でXSS対策を実施。bcryptでパスワードを安全に管理。
検索機能
LIKE 句 + Pagination による検索。ビール名・ブルワリー名からの部分一致検索に対応。
このプロジェクトで得たもの
- フロント・バックエンドを分離した拡張性の高いアーキテクチャを一から設計・実装した経験
- SSG を活用した SEO 対策と、CSR による動的コンテンツ処理の使い分けを実践で習得
- Cursor / Offset の2種類のページネーション戦略をユースケースごとに選択・実装
- 認証・認可・権限管理まで含めた実用レベルのWebアプリを単独で完成させた自信
Github
