Quiz Square
クイズを作成したり、解答したりできます。
https://quiz-square.vercel.app/
問題作成用
- メール：test1@test1.com
- パスワード：test1test1
問題解答用
- メール：test2@test2.com
- パスワード：test2test2
- トップページのヘッダーにある「新規登録」ボタンをクリックし、ユーザー登録を行う
- 問題一覧ページの「＋」ボタンを押す
- 問題の内容（ジャンル、問題文、選択肢 A〜D、正解、解説）を入力し、「問題の作成」を押す
- 問題一覧ページにて解答したい問題をクリック
- 正解だと思う選択肢をクリック
- 「解答」ボタンを押す
| 機能 | ログインユーザー | 非ログインユーザー |
|---|---|---|
| ユーザー登録 | X | ○ |
| ユーザー編集 | ○ | X |
| 問題の解答 | ○ | ○ |
| 問題の作成・編集・削除 | ○ | X |
| お気に入りの登録・解除 | ○ | X |
| いいねの追加、削除 | ○ | X |
| ソート機能 | ○ | ○ |
| 問題別の正解率の表示 | ○ | ○ |
プログラミングを学ぶ中で、学習効率を上げるためにはアウトプットが重要だと認識ました。
しかし、学生時代を振り返ると、その様な機会が少なく、インプット中心の非効率な学習をしていました。
そこで、クイズを作成できるアプリを開発し、学生達にアウトプットする場の一つとして提供したいと考えました。
- ユーザー毎の得点集計と得点ランキング表示
- 問題を並び替えや穴埋めでも出題できる様にする
- フロントエンド
- React (v17.0.2)
- Next.js (v12.1.6)
- TypeScript
- Recoil
- React Hook Form
- Chakra UI
- バックエンド
- Firebase (v9.9.2)
- その他
- Vercel
以下のコマンドを順に実行
% git clone https://github.com/k98a73/quiz-square.git
% cd quiz-square
% yarn
% yarn dev
1 つ目はユーザーの認証状態により、ページへのアクセスをコントロール機能を実装したことです。ページをリロードしたり、アドレスバーに入力して遷移してきた際もユーザー状態を取得する方法に苦労しました。マウント状態を監視するカスタムフックを用いることで、その問題を解決することが出来ました。
2 つ目はクイズの解答ボタンを押した後に表示されるモーダルの UI です。react-confetti というライブラリを導入し、正解すると、紙吹雪が表示できる様にしました。そうすることで、問題を解くモチベーションの向上に期待して、実装しております。
知人に実際に利用してもらい、ユーザーヒアリングを行いながら改善を行っています。