概要
このプロジェクトでは、架空のプログラミングスクールを想定して、コーポレートサイトを構築します。
公式 LINE を「友だち追加」することができ、LINE 上、Web 上の両方で、無料カウンセリングの日時を予約できるシステムを構築します。
学習目標
LINE Messaging API （Bot）を活用した Web アプリケーション開発について学習します。
Next.js と LINE 公式アカウントを連携させる方法や、LIFF を用いた LINE 内での予約フローの構築についても確認してください。
推奨技術
このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。
- LINE Messaging API によるメッセージング機能
- LINE Front-end Framework (LIFF)による予約フローの構築
- Next.js 15 App Router でのフロントエンド・バックエンド開発
- Vercel へのデプロイ
- Neon Postgres によるデータベースの活用
- TypeScript による型チェック
- Tailwind CSS を用いたスタイリング
- shadcn/ui によるコンポーネントの導入
🎯 お題
- 「ユーザーストーリー」を全て満たすアプリを構築してください。
- 必要に応じて、スクリーンショットやデモサイトの URL を参照してください。
- スタイルは、あなた自身で独自にカスタマイズすることが可能です。
必須機能
- ランディングページ：
- プログラミングスクールの特徴を紹介する。
- 公式 LINE 友達追加：
- QR コードまたはボタンから LINE 公式アカウントを友達追加できる。
- 無料カウンセリング予約：
- Web サイト上と LINE 上の両方から予約フォームにアクセスできる。
- LINE 上で、予約の確認・キャンセルをすることができる。
ユーザーストーリー
- Web サイト:
- ユーザーがサイトにアクセスすると、プログラミングスクールの特徴が掲載されている。
- Web サイト上では、名前、メールアドレス、希望日時、相談内容を入力し、無料カウンセリングを予約することができる
- ユーザーが LINE 友達追加ボタンをクリックすると、LINE 公式アカウントを友達追加できる。
- LINE：
- LINE 上でのメニューに「無料カウンセリングを予約」と「予約確認」のボタンが表示されている。
- LINE 上で「無料カウンセリングを予約する」ボタンをクリックすると、LIFF 画面が開き予約フォームが表示される。
- 予約フォームでは、名前、希望日時、相談内容を入力できる。
- 必要な情報を入力し、「予約する」ボタンをクリックすると、予約を確定することができる。
- LINE 上で「予約確認」ボタンをクリックすると、予約内容がメッセージとして届く。
- 予約確認メッセージ内の「キャンセルしますか？」ボタンをクリックすると、予約をキャンセルする確認メッセージが届く。
- 「キャンセルを確定する」ボタンをクリックすると、予約をキャンセルすることができる。
- その他：
- 予約の日時は１時間単位で設定され、同じ時間に複数の予約を入れることはできない。
- アプリケーションが公開されており、誰でもアクセス可能である。