✅
【作成記録】Next.js(App Router)+Cloud Firestore+jotai+shadcn/uiでログイン無し投稿サイト
Firestoreの学習も含めアイデアを形にしたく、簡易な投稿・投票サイトを作成しました。
サイトの概要
ログインが無く、年齢(年代)・居住国のみ登録して投稿されている内容に対して、
高いか低いかを押して投票していくサイト。
作成開始から1カ月が経ち最低限の要件を満たしたのでこちらに記事にしました。
作業した日数では2週間。
使用言語・FW等
- Next.js(App Router)
- Cloud Firestore
- jotai
- tailwind-CSS
- shadcn/ui
- React-Hook-Form
- Zod
- Recharts
- その他：localStorage
shadcn/ui
噂のshadcn/uiを初めて使用してみましたが、すごくお手軽で使い易い印象でした。
普段はtailwindからそのまま作っていくという原始的な作成をしておりましたが、UIコンポーネントはタイパも良く便利でした。
localStorage
今回ログイン無しで投稿するというものでしたが年齢と居住国がデータとして欲しく、そこはlocalStorageに保存しておいて投票時にDBへ保存出来るように実装しました。
jotai
getItem setItemを使用して作成しておりましたが、jotaiにstorageと組み合わさった関数があったはずと思い調べ直すと、atomWithStorageという関数がありました。
それを使うとlocalStorageを書かずにatom、useAtom(state)の方法で保存しつつグローバルで機能してくれます。
Recharts
今回初めてグラフを描画するライブラリを使用しましたが、中々癖がありエラーメッセージや、
データ用のオブジェクトに少し悩みました。
エラーメッセージは調べても現状どうしようもないとのことなので一旦このエラーの場合は表示しないようにコード記述しました。
余談
個人開発者・独学プログラマーとしての悩みですがディレクトリの構成によく頭を抱え込みます。。
そういう意味でもこれからもWeb開発を沢山していきます。
Discussion