ケーススタディ The Chef Churrascaria Recife
マナウスのシュハスカリア、最初のひと目から注文まで。
- クライアント
- The Chef Churrascaria Recife
- 種類
- レストランサイト & 注文システム
- 役割
- フロントエンドの改修、バックエンド & 統合
- 年
- 2026
01概要
2025 年にマナウスで開業したシュハスカリア、The Chef Churrascaria Recife の公式サイトを、オンラインメニューと店内業務のために新しく作った API につなぎました。ひとつのブランドが三つのプロジェクトにまたがり、メニューは実際のデータベースから配信されます。
02課題
レストランには、対外的な顔となるサイト、お客さまが見て回れるメニュー、そしてテーブルと注文を扱うシステムの土台が必要でした。手元にあった部品はばらばらでした。サイトのテンプレート、別の店のブランドが付いたオープンソースのメニューアプリ、そしてもう動かなくなった学術的な注文管理プロジェクトです。
02アプローチ
動いているものは活かし、足りない部分を書く。サイトはオープンソースのレストラン用テンプレートを改修し、メニューアプリは公開リポジトリから取り込んでブランドを差し替え、学術プロジェクトのドメインは両者が共有できる新しいバックエンドとしてゼロから書き直しました。元の作者はプロジェクトの README にクレジットしています。
03開発内容
実際につくったもの
- 01
Next.js 15 と React 19 による公式サイト。オープンソースのレストラン用テンプレート（MIT）を改修し、ポルトガル語の文章、店の料理とストーリー、グリーンのカラーパレット、そして店との WhatsApp チャットを開くウィジェットを加えました。
- 02
このシステムのために書いた新しいバックエンド（Node.js、Express、TypeScript、Prisma + SQLite）。管理者・ホール・キッチンのロールを持つユーザー、テーブル伝票（comanda）と注文を扱い、注文のステータスは調理中から提供可、提供済みへと進みます。JWT 認証、ロールチェック、Zod によるバリデーションで保護しています。
- 03
メニューアプリが元々呼び出していたエンドポイントにそのまま対応するカタログ API。店の実際のメニュー（ピッカーニャ、アウカトラ、タンバキのリブなど）を投入し、サイトの料理写真を再利用しています。
- 04
統合。メニューアプリは環境変数で新しい API に接続し直し、文言を「Bravus Burger」から The Chef に変更しました。二つのフロントエンドは相互にリンクされ、サイトには「Fazer Pedido（注文する）」ボタン、メニューからはサイトへ戻る導線があります。
技術
- Next.js
- React
- TypeScript
- Tailwind CSS
- Vite
- styled-components
- Node.js
- Express
- Prisma
- SQLite
- Zod
- JWT
- Vercel
04体験
05現在の状況
サイトは Vercel で公開中です。メニューアプリと API は現時点ではローカルで動作しています。テーブル伝票と注文のルートは API に実装済みですが画面はまだなく、メニューアプリのロゴ画像は元のブランドのままです。
