クイズを作成・実行できる WEB アプリケーションです。
自由にクイズを作成して他ユーザーに回答してもらったり、他ユーザーが作成したクイズを回答できます。
私はクイズ番組が好きなのですが、クイズを作成して共有できるアプリはあまり見たことがなかったため、自分で開発しようと思いました。
シンプルなデザインで使いやすさにこだわって作りました。
以下を使用して WEB アプリケーションを作成しました。
-
フロントエンド
- React 18.1.0
- TypeSciprt 4.7.2
- MUI 5.8.1
- React Hook Form 7.31.3
- Axios 0.27.2
- ESLint 8.16.0
- HTML/CSS
-
バックエンド
- Next.js 12.1.6
- Prisma 3.14.0
- NextAuth.js 4.3.4
-
インフラ
- Docker 20.10.16 / docker-compose 2.6.0
- PostgreSQL 14.3
- Vercel
実装した機能は以下の通りです。
- ユーザー登録
- パスワードログイン機能
- OAuth 認証ログイン機能
- クイズ機能
- クイズ作成機能
- クイズ回答機能
- クイズ編集機能
- クイズ削除機能
- ダークモード切替機能
画面遷移図は以下画像の通りです。
鍵がついた黄色のエリアにあるページはログインユーザーのみ遷移できるページになります。
URL の一覧は以下表の通りです。
認証欄に鍵がついている URL はログインユーザーのみアクセスできるページになります。
URL | メソッド | 処理 |
---|---|---|
/api/quiz/create | POST | 新規クイズをテーブルに保存する |
/api/quiz/edit | PUT | クイズを更新してテーブルに保存する |
/api/quiz/{クイズ ID}/delete | DELETE | クイズを削除する |
/api/quiz/fileupload | POST | 新規クイズの画像をアップロードする |
/api/quiz/answer | POST | クイズ回答結果をテーブルに保存する |
/api/signup | POST | 新規ユーザーをテーブルに保存する |
/api/auth/{...nextauth} | GET / POST | NextAuth.js の設定ファイルでサインイン機能やログインセッションなどを司る |
テーブル定義は以下表の通りです。
- クイズの作成、実行などをするユーザーを管理します。
- ユーザーが作成したクイズを管理します。
- クイズのジャンルを管理します。
カラム論理名 | カラム物理名 | 型 | PRIMARY | UNIQUE | NOT NULL | FOREIGN |
---|---|---|---|---|---|---|
ジャンル ID | id | SERIAL | ||||
ジャンル名 | name | VARCHAR(20) | ||||
作成日 | createdAt | TIMESTAMP | ||||
更新日 | updatedAt | TIMESTAMP |
- クイズの設問を管理します。
- クイズの実行履歴を管理します。
カラム論理名 | カラム物理名 | 型 | PRIMARY | UNIQUE | NOT NULL | FOREIGN |
---|---|---|---|---|---|---|
成績 ID | id | SERIAL | ||||
クイズ ID | quizId | INTEGER | QUiz(id) | |||
ユーザー ID | userId | TEXT | User(id) | |||
正答数 | correctCount | INTEGER | ||||
作成日 | createdAt | TIMESTAMP | ||||
更新日 | updatedAat | TIMESTAMP |
- クイズの実行履歴の回答内容などを管理します。