💿
Remix SPA mode + Firebase で「しずかなインターネット」の真似サイトを作ってみた。
2024年は Remix SPA モードで React フロントエンドを作るのが最適。
習作として「しずかなインターネット」の真似っこサイトを Firebaseで作ってみました。
clientLoader / clientAction で state ほぼ不要でシンプルに実装できるのでオススメです。
利用スタック
- フレームワーク: Remix SPA Mode
- remix-flat-routes の Hybrid Routesも使っています。
- remix-routes を使って型安全にルーティングしています。
- zodix を使って loader / action のパラメータバリデーションを簡単にしています。
- ビルド環境: Remix Vite
- UIコンポーネント/スタイリング: shadcn-ui / tailwindcss
- フォーム: conform
- DB: firestore
- 認証: google oidc の 自前実装 + firebase authentication
- デプロイ先: firebase hosting (SPAとして url rewriteしてるだけ)
ソースコード
こちらで公開しています。
Discussion