QuizMaker

クイズを作成・実行できる 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 はログインユーザーのみアクセスできるページになります。

ページの URL

URL	コンポーネント名	認証	処理
/	TopPage		トップページを表示する
/dashboard/{ユーザー ID}	Dashboard		ダッシュボードページを表示する
/quiz/create	QuizCreate		クイズ作成開始ページを表示する
/quiz/{クイズ ID}	QuizDetail		クイズ詳細ページを表示する
/quiz/{クイズ ID}/edit	QuizEdit		クイズ編集開始ページを表示する
/quiz/{クイズ ID}/answer	QuizAnswer		クイズ回答開始ページを表示する
/quiz/{クイズ ID}/grade/{グレード ID}	QuizAnswerResult		クイズ回答結果ページを表示する
/auth/signup	SignUp		会員登録ページを表示する
/auth/signin	Signin		ログイン画面を表示する

API の 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 の設定ファイルでサインイン機能やログインセッションなどを司る

ER 図

ER 図は以下画像の通りです。

テーブル定義

テーブル定義は以下表の通りです。

User テーブル

• クイズの作成、実行などをするユーザーを管理します。

カラム論理名	カラム物理名	型	PRIMARY	UNIQUE	NOT NULL	FOREIGN
ユーザー ID	id	TEXT
ユーザー名	name	TEXT
メールアドレス	email	TEXT
パスワード	password	TEXT
メールアドレス認証済み	emailVerified	TIMESTAMP
プロファイル画像パス	image	TEXT
作成日	created_at	TIMESTAMP
更新日	updated_at	TIMESTAMP

Quiz テーブル

• ユーザーが作成したクイズを管理します。

カラム論理名	カラム物理名	型	PRIMARY	UNIQUE	NOT NULL	FOREIGN
クイズ ID	id	SERIAL
ユーザー ID	userId	TEXT				User(id)
ジャンル ID	genre_id	INTEGER				Genre(id)
クイズタイトル	title	VARCHAR(100)
説明文	description	VARCHAR(255)
画像名	filename	VARCHAR(255)
作成日	createdAt	TIMESTAMP
更新日	updatedAt	TIMESTAMP

Genre テーブル

• クイズのジャンルを管理します。

カラム論理名	カラム物理名	型	PRIMARY	UNIQUE	NOT NULL	FOREIGN
ジャンル ID	id	SERIAL
ジャンル名	name	VARCHAR(20)
作成日	createdAt	TIMESTAMP
更新日	updatedAt	TIMESTAMP

Item テーブル

• クイズの設問を管理します。

カラム論理名	カラム物理名	型	PRIMARY	UNIQUE	NOT NULL	FOREIGN
クイズアイテム ID	id	SERIAL
クイズ ID	quizId	INTEGER				Quiz(id)
質問番号	questionNumber	SAMLLIINT
回答形式	format	SMALLINT
質問	question	VARCHAR(255)
答え	answer	VARCHAR(255)
選択肢 1	choice1	VARCHAR(255)
選択肢 2	choice2	VARCHAR(255)
選択肢 3	choice3	VARCHAR(255)
選択肢 4	choice4	VARCHAR(255)
作成日	createdAt	TIMESTAMP
更新日	updatedAt	TIMESTAMP

Grade テーブル

• クイズの実行履歴を管理します。

カラム論理名	カラム物理名	型	PRIMARY	UNIQUE	NOT NULL	FOREIGN
成績 ID	id	SERIAL
クイズ ID	quizId	INTEGER				QUiz(id)
ユーザー ID	userId	TEXT				User(id)
正答数	correctCount	INTEGER
作成日	createdAt	TIMESTAMP
更新日	updatedAat	TIMESTAMP

Answer テーブル

• クイズの実行履歴の回答内容などを管理します。

カラム論理名	カラム物理名	型	PRIMARY	UNIQUE	NOT NULL	FOREIGN
成績回答 ID	id	SERIAL
成績 ID	gradeId	INTEGER				Grade(id)
クイズアイテム ID	itemId	INTEGER				Item(id)
回答実績	answer	VARCHAR(255)
正解有無	pass	BOOLEAN
作成日	createdAt	TIMESTAMP
更新日	updatedAt	TIMESTAMP