Biography
URL:
ログイン情報:
email: demo@example.com
password: password
GitHub:
バックエンド:
https://github.com/yamaneko05/server
フロントエンド:
https://github.com/yamaneko05/client
概要
誰でも登録可能で短文の投稿、いいね、コメントができるSNSサービスです。
いいね、コメント、フォロー、通知など基本的なSNSとしての機能を実装しました。
使用技術
フロントエンド
Tailwindcss, Shadcn-ui, lucide
axios, react-query, react-router-dom, react-hook-form, zod, laravel-echo
バックエンド
Laravel,
Sanctum (SPAに対する認証, セッション管理ライブラリ),
Breeze (認証周りの機能を自動生成してくれるライブラリ),
Pusher (プッシュ配信)
その他 → MySQL, XServer VPS, Git, htaccess, Ubuntu
経緯
Reactなどフロントエンド周りの学習の成果物として何かWebサービスを開発したいと思い、より身近に感じるもので多くの機能を実装できる拡張性のあるものとして考えたときにTwitterのようなSNSが良いと思いこれを開発するに至った。
苦労したこと
VPSでの本番環境構築, プッシュ配信
メッセージ機能にてリアルタイムでのプッシュ配信を実装したいと思い、Laravelのbroadcast, Pusherを用いて実装した。
しかし、レンタルサーバーではプッシュ配信を処理するプロセスを常時実行することができなかったため、VPSにて環境の構築をした。
VPSの環境構築ではUbuntuにPHP, Apache, FTPサーバーのインストールなどの工程をすべてCGI上で行わなければならなかったので大変だった。
ディレクトリ構成のパターン選定
Laravelと比べてディレクトリ構成の自由度が高かったので自分にとってしっくりくる方法を探すのが大変だった、最終的には下記のリポジトリにて採用されているfeaturesというフォルダで機能ごとにhooks, components, apiなどのフォルダを作る方法が、コードの管理がしやすいし依存関係の宣言文が揃いやすく美しいと思ったので採用した。
https://github.com/alan2207/bulletproof-react
状態管理・APIデータの再フェッチ・APIデータのキャッシュ
ログイン状態やログイン中のユーザー情報などの状態管理をどうするかで迷走した
& APIから取ってきたデータとフロントエンド側のstoreとの連携に苦戦した
Recoilを導入して状態管理したりしてみたが、react-queryのキャッシュ(stale?)やinvalidateなどを使ってみてこれらで無駄なフェッチングやレンダリングを防げたのでreact-queryのみで解決した。react-queryが今まで触ったすべてのライブラリの中で一番すごいと感動した。
CORS
HTTPヘッダーにwith-credentialを設定したり、APIサーバー側でクライアントのURLを指定したりなどLaravelのみでのMPA開発では不要な工程について学習するとき最初は少し戸惑って大変だった。