Works
問い合わせ管理システム
【概要】
react,next.jsの学習を目的として問い合わせ管理システムを作成した。
【機能】
ゲストは、公開された問い合わせフォームから、あらかじめ決められた項目を入力し、問い合わせを送信する。スタッフは問い合わせ管理画面で、未対応の問い合わせに回答する。回答に対するやりとりは、問い合わせに対してユニークに割り当てられたURL上のコミュニケーション画面でおこなう。 ＜ 問い合わせ機能 ＞ 問い合わせフォームで以下の項目を指定して問い合わせを送信できる。 ・氏名（必須 / 16文字以下） ・メールアドレス（必須 / 200文字以下 / @必須） ・電話番号（必須 / 12文字以下） ・製品種別（必須 / A001, A002..., A016の全16種類のプルダウンメニュー） ・問い合わせ内容（必須 / 2000文字以下） 問い合わせを送信すると、問い合わせのコミュニケーションをおこなうURLが個別に割り当てられ、以降のコミュニケーションはそのURL上でおこなえる。 ＜ 問い合わせ管理画面サインアップ機能 ＞ ・氏名、メールアドレス、パスワードを使用して、Firebase Authenticationの機能を利用してアカウント登録する。 ＜ 問い合わせ管理画面ログイン機能 ＞ ・メールアドレスとパスワードのペアを使用して、Firebase Authenticationの機能を利用してログインする。 ＜ 問い合わせ管理画面ログアウト機能 ＞ ・ログアウト機能により、ログアウトできる。 ＜ 問い合わせ一覧機能 ＞ ・これまでの問い合わせを一覧できる。 一覧できる項目は、対応状況・氏名・電話番号・製品種別・問い合わせ内容・問い合わせ日時。 一覧機能では、問い合わせ内容は先頭の100文字までを表示できる。 ・デフォルトでは未対応の問い合わせが古い順に一覧表示される。 ・問い合わせを指定して、対応状況の詳細を確認できる。 一覧の上部で表示を切り替えることで、対応済みの問い合わせや、対応中の問い合わせを一覧できる。 ＜ 問い合わせ詳細確認機能 ＞ ・指定した問い合わせの各項目を確認できる。 ・これまでの対応履歴（対応者・対応日時・返信メッセージ・スタッフのコメント）を確認できる。 ・「対応開始」ボタンを押すことで、ログイン中のスタッフで「対応中」にできる。 ＜ 問い合わせ対応機能 ＞ ・自分自身が「対応中」の問い合わせを指定して、以下の操作ができる。 ー指定した問い合わせについて、問い合わせしてきたゲストに最大4000文字のメッセージを送信できる。 ー指定した問い合わせに対し、スタッフのコメントを残しておくことができる。 ・「対応完了」「未対応に戻す」ボタンを押すことで、それぞれ対応状況を変更できる。 ・自分自身が「対応中」にした問い合わせでなければ、スタッフのコメントを残したり、メッセージを送ったりすることはできない。
【開発を通して得た成果】
・Next.js/React/TypeScriptを用いた実践的なWebアプリケーション開発経験 ・Firebase AuthenticationおよびFirestoreを活用したユーザー認証とデータ管理の理解
【使用技術】
- ツール：Visual Studio Code
- 言語：TypeScript
- フレームワーク：Next.js, React, Tailwind CSS
- DB：Firebase Authentication, Firestore