TL;DR
- サーバに頼らず、ブラウザの中だけで動くカロリー記録アプリを作るプロジェクトテンプレートである。
- PGlite をローカルの Postgres として使い、ローカルファーストへの最初の段階として「ローカルオンリー」なアプリを作る。
内容
ローカルオンリーとは
ローカルファーストのアプリはクライアントにローカルのデータストアを持つ。このコースでは、その最初の段階として、サーバから独立し、クライアントだけで完結するローカルオンリーのアプリを作る。アプリは Vite で作り、すべてブラウザの中で動く。PGlite がデータベースをクライアントに持ち込むので、完全にオフラインでも動くアプリを作れる。
作るもの
利用者の端末だけで最初から最後まで動くカロリー記録アプリである。PWA としてインストールでき、オフラインでも使える。
使う技術
ルーティングには TanStack Router を使い、型安全なルートとローダーを書く。データベースは PGlite と Drizzle で扱い、マイグレーションは drizzle-kit で行う。PGlite の live 拡張でリアクティブなクエリを使う。状態管理には XState のアクターモデルを使い、ロジックと検証には Effect と Schema を使う。UI は Tailwind CSS v4 と react-aria-components などで作り、vite-plugin-pwa で PWA とオフライン対応を行う。
モジュール
- Architecture of a local app
- Schemas and local database
- State management with actors
- Routing and loaders
- Reactive queries
- UI styling and components
次の段階は複数の端末での利用や共同編集への対応である。そのためには、ローカルのデータベースを端末どうしで同期する同期エンジンが必要になる。
キーワード
- React
- Effect（TypeScript）
- XState
- TypeScript
- Drizzle
- PGlite
- PWA
- Schema
- ローカルファースト
- TanStack Router