概要
このプロジェクトでは、架空の新サービス「もくもく React」の事前予約サイトを構築します。
ユーザーが事前予約を行うと、予約確認メールが自動送信され、管理者にも通知が届くようにします。
学習目標
SendGrid を使用したメール送信機能について、学習します。 Next.js による API を活用したサーバーサイド処理や、HTML メールテンプレートの作成方法について、確認してください。
推奨技術
このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。
- SendGrid を用いたメール送信機能
- Next.js App Router を用いたフルスタック開発
- TypeScript による型チェック
- Tailwind CSS を用いたスタイリング
- shadcn/ui を用いた UI 構築
- React Hook Form を用いたフォーム管理
- Zod を用いたフォームバリデーション
🎯 お題
- 「ユーザーストーリー」を全て満たすアプリを構築してください。
- 必要に応じて、スクリーンショットやデモサイトの URL を参照してください。
- スタイルは、あなた自身で独自にカスタマイズすることが可能です。
必須機能
- プロダクト紹介ページ：
- もくもく React の特徴を表示するランディングページ。
- 事前予約フォーム：
- 名前、メールアドレス、興味のある機能を入力できる。
- メール送信機能：
- 予約確認メールを予約者に送信する。
- 新規予約の通知を管理者に送信する。
- 予約管理画面：
- 予約者の一覧と予約数を表示する。
ユーザーストーリー
- ユーザーがサイトにアクセスすると、サービスのランディングページが表示されている。
- 事前予約フォームで、名前、メールアドレス、興味のある機能（複数選択可）を入力できる。
- 必要な情報を入力し、「事前予約する」ボタンをクリックすると、フォームが送信される。
- 予約完了後、ユーザーに予約確認メールが SendGrid 経由で送信される。
- 予約完了後、管理者に新規予約の通知メールが SendGrid 経由で送信される。
- 予約完了ページで、予約受付完了のメッセージが表示される。
- 管理画面で、これまでの予約者一覧と総予約数が確認できる。
- 管理画面で、新規予約の通知メールを一括既読にすることができる。
- メール送信に失敗した場合、適切なエラーメッセージが表示される。
- フォームのバリデーションが動作し、不正な入力に対してエラーが表示される。
- アプリケーションがデプロイされており、誰でもアクセス可能である。