オリジナルアプリ開発(Next.js, TypeScript, Firebase)

1月12日に開発を開始後、２週間が経過しました。

サインイン画面

ゲーム画面

正解

不正解

本アプリは、ひらがな学習者の学習を支援する目的で作成しています。
Next.jsでプロジェクト作成し、認証機能にFirebase/Google Authenticationを採用。
グーグルサインインの後、Firebase/Firestoreからランダムにローマ字1文字を抽出、ブラウザに表示。

同時に、選択肢として2つのひらがなカードを表示し、ローマ字のひらがなを選びクリック。

正解であれば、Correct! 不正解であれば、Wrong...を表示します。

まだデザインも整っておらず、全くいけていません。。。
そして、本アプリの要である、ゲームデータ集計機能の実装に、かなり苦労している現状です。

どんな機能かというと、46文字毎の正解数、不正解数、出題数、正解率を算出し、データベースに格納するものです。この機能により、学習者が得意文字、不得意文字を把握し、学習に役立てるというものです。

Firebase Documentation を調べ色々と試してみたり、知人のエンジニアさんに相談してみたものの、実装に辿り着けません。。

現在の実装への方法論の仮説は、ユーザー毎、各46文字毎の、ゲームのデータ（正解、不正解、出題数、正解率）を、ゲーム実施後、一度ローカルストレージに格納し、それをFirestoreに移管する、というものです。

データベースから46文字のデータ(ローマ字１字、ひらがな２字）をランダムに抽出し表示するというゲーム機能は実装できたのに、なぜ逆にゲームデータをデータベースに格納することができないのか。。。

現状で、一度デプロイしてみることも試してみましたが、デプロイもエラーが出る状況。

悩んでいます。

ローカルストレージ

コンソールのエラーを全て解決し「検証ツール>アプリケーション」を確認したところ、何やらデータが格納されている。。一筋の光が見えてきました。。