プロダクト事前予約アプリ

概要

このプロジェクトでは、架空の新サービス「もくもく React」の事前予約サイトを構築します。
ユーザーが事前予約を行うと、予約確認メールが自動送信され、管理者にも通知が届くようにします。

学習目標

SendGrid を使用したメール送信機能について、学習します。 Next.js による API を活用したサーバーサイド処理や、HTML メールテンプレートの作成方法について、確認してください。

推奨技術

このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。

• SendGrid を用いたメール送信機能
• Next.js App Router を用いたフルスタック開発
• TypeScript による型チェック
• Tailwind CSS を用いたスタイリング
• shadcn/ui を用いた UI 構築
• React Hook Form を用いたフォーム管理
• Zod を用いたフォームバリデーション

---

🎯 お題

• 「ユーザーストーリー」を全て満たすアプリを構築してください。
• 必要に応じて、スクリーンショットやデモサイトの URL を参照してください。
• スタイルは、あなた自身で独自にカスタマイズすることが可能です。

必須機能

1. プロダクト紹介ページ：
   • もくもく React の特徴を表示するランディングページ。
2. 事前予約フォーム：
   • 名前、メールアドレス、興味のある機能を入力できる。
3. メール送信機能：
   • 予約確認メールを予約者に送信する。
   • 新規予約の通知を管理者に送信する。
4. 予約管理画面：
   • 予約者の一覧と予約数を表示する。

ユーザーストーリー

• ユーザーがサイトにアクセスすると、サービスのランディングページが表示されている。
• 事前予約フォームで、名前、メールアドレス、興味のある機能（複数選択可）を入力できる。
• 必要な情報を入力し、「事前予約する」ボタンをクリックすると、フォームが送信される。
• 予約完了後、ユーザーに予約確認メールが SendGrid 経由で送信される。
• 予約完了後、管理者に新規予約の通知メールが SendGrid 経由で送信される。
• 予約完了ページで、予約受付完了のメッセージが表示される。
• 管理画面で、これまでの予約者一覧と総予約数が確認できる。
• 管理画面で、新規予約の通知メールを一括既読にすることができる。
• メール送信に失敗した場合、適切なエラーメッセージが表示される。
• フォームのバリデーションが動作し、不正な入力に対してエラーが表示される。
• アプリケーションがデプロイされており、誰でもアクセス可能である。