More than 1 year has passed since last update.

【個人開発】React + Firebaseで漫画考察サイトの作成

Posted at 2022-10-18

React+Next.jsで漫画考察サイトのポートフォリオを作成しました。

サンプルログイン
id sample123@gmail.com
pass sample345!

目的

背景や目的としては、自分自身漫画を読むことがあり、漫画の今後の展開の考察を見ることがよくある。
そして、インターネット上だと自分が検索した限りでは、そのような投稿できる漫画考察サイトが見つからなかったため、作成した。

・フロントエンド：TypeScript,React,Next.js
・バックエンド：Firebase
・デプロイ：Vercel

CRUD処理ができるようになってます。データはFireStoreに保存されます。

Firebase Authenticationを使って登録とログイン認証をしています。そして、usersテーブルにuserデータが格納されます。

投稿のいいねができます。ただまだうまく作れていないので改良が必要です。

プロフィールの変更や退会などができます。

単語検索と3種類に並べ替えができます。

最初FireStoreでどうやってデータ保存すればよいかかなり悩みました。
参考記事が見つからず、色々探した結果、海外の動画を見て、なんとかReactでCRUD機能を作成しました。

Next.jsでダイナミックルーティングというのがあり、1つのファイルで違ったidや値を持つページを自動で作ってくれる機能があるのですが、それの作り方が最初全く分からずそこに時間がかりました。
ですが、色々と試すと意外と簡単に作ることができました。

技術不足で実装できていない機能はかなりあります。
まだコンポーネント化ができていない部分が多くあるので、そこを改良していく予定です

・リッチエディタ
・複数画像の投稿
・コメント機能
・SWRの導入