https://github.com/b13o/pre-launch-app

🔥Product pre-launch app. Pre-registration is possible.
https://github.com/b13o/pre-launch-app

approuter nextjs react-hook-form sendgrid zod

Last synced: 3 months ago
JSON representation

🔥Product pre-launch app. Pre-registration is possible.

• Host: GitHub
• URL: https://github.com/b13o/pre-launch-app
• Owner: b13o
• Created: 2025-06-30T09:47:53.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2025-07-01T12:00:32.000Z (6 months ago)
• Last Synced: 2025-07-01T13:19:58.017Z (6 months ago)
• Topics: approuter, nextjs, react-hook-form, sendgrid, zod
• Language: TypeScript
• Homepage: https://b13o.github.io/pre-launch-app/
• Size: 98.6 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
![スクリーンショット](https://github.com/user-attachments/assets/be3884ee-d9ee-4651-8d90-4a35c83ee376)

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

## 概要

このプロジェクトでは、架空の新サービス「もくもく 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 経由で送信される。

- [ ] 予約完了ページで、予約受付完了のメッセージが表示される。

- [ ] 管理画面で、これまでの予約者一覧と総予約数が確認できる。

- [ ] 管理画面で、新規予約の通知メールを一括既読にすることができる。

- [ ] メール送信に失敗した場合、適切なエラーメッセージが表示される。

- [ ] フォームのバリデーションが動作し、不正な入力に対してエラーが表示される。

- [ ] アプリケーションがデプロイされており、誰でもアクセス可能である。