1.はじめに
なぜこのアプリを作ったのか
一行もコードを書かずにバイブコーディング挑戦の成果物です。
(無料枠だけで作ってます。)
URL
2.アプリの紹介
子供が友達と一緒に学べる4択クイズアプリ
- 問題を自分で作成できる
- 間違った問題は定期復習できる
- 友達とシェアできる
技術検証が目的のためリッチな機能はなく、とてもシンプルです。
できることは、問題を作って、共有して、一緒に勉強する、ただそれだけです。
3.機能紹介
機能
(1)クイズ作成
この画面はPCで行うのを推奨しています。
自前でクイズを作る
入力項目を入力して自前でクイズを作ることができます。
ファイルアップロードでクイズを作る
ファイルをアップロードしてクイズを作ることもできます。
この機能を使ってAI(Gemini,ChatGTP)で問題を作ることが可能です。
（キーワード、教科書やノートの写真、youtubeなどを利用して作ることも可能）
例）youtubeから作る場合例
・添付のquiz_sample.jsonファイルフォーマットで4択クイズを作って欲しいです。
・ユーチューブの内容をもとに問題を50問作ってください。
URL https://www.youtube.com/watch?v=XXXXXX
・網羅的にお願いします。解説はできれば詳しく書いて欲しいです。
・難易度は中級
・タイトルやカテゴリなどあとは任せます。
例）写真から作る場合
・添付のquiz_sample.jsonファイルフォーマットで4択クイズを作って欲しいです。
・別途添付した写真の内容をもとに問題を50問作ってください。
・網羅的にお願いします。解説はできれば詳しく書いて欲しいです。
・難易度は中級
・タイトルやカテゴリなどあとは任せます。
例）キーワードから作る場合例
・添付のquiz_sample.jsonファイルフォーマットで4択クイズを作って欲しいです。
・基本情報技術者試験の問題を50問作ってください。
・網羅的にお願いします。解説はできれば詳しく書いて欲しいです。
・難易度は中級
・タイトルやカテゴリなどあとは任せます。
(2)クイズを探す
検索と非表示クイズの管理ができます
公開クイズを検索
システム負荷およびゴミ検索を防止するため、完全一致検索です。
検索文字列の 入力後にエンターが必要です。
非表示クイズの管理
- ホーム画面から非表示にしたクイズを再度表示することができます
- 友達が作った問題では、削除（見えなくするだけ。再検索可能）もできます
- 自分の作った問題では、編集、削除（物理削除）、シェア（公開クイズ）もできます
- ギフトコードで登録した問題は、再表示しかできません
自分で作った問題の削除：
問題は完全に削除(物理削除)されますので注意してください。
(3)ギフトコード
学校や企業などで使いたい場合の機能です。
非公開のクイズも含めて公開が可能になります。
コードを知っている人のみ、指定したユーザのみ、などが設定可能です。
試したい人は「2MQP-P2DK-2WE6-6」をどうぞ。
(4)ホーム画面
復習およびクイズが可能です。
復習はエビングハウスの忘却曲線を参考に「即時、９時間後、２４時間後、５４時間後」に再度質問されます。
クイズの右上のXをクリックすると、そのクイズを非表示にできます。
4. 技術スタック
| 技術 | 用途 |
|---|---|
| React + TypeScript | コンポーネントベースのUI開発。TypeScriptにより型安全なコーディングと保守性を確保 |
| React Router | SPA内でのルーティング管理。画面遷移やURLパラメータの制御 |
| lucide-react | アイコンコンポーネントの提供。UIの視認性とアクセシビリティ向上 |
| Tailwind CSS | ユーティリティファーストのCSSフレームワークとして、スタイルを効率的に定義し、デザインの一貫性を維持 |
| Firebase Cloud Firestore | ユーザー生成データ（クイズ・プロフィール・広告データなど）の保存・リアルタイム取得・キャッシュ管理 |
| Firebase Authentication | Google IDよるユーザー認証とセッション管理 |
| Firebase Hosting | Reactアプリの静的ホスティングおよびCDN配信 |
| Google Analytics | アクセス解析 |