フロントエンド概要
Bazbiiのフロントエンドは、複数のクライアントアプリケーションと共有パッケージで構成されています。
クライアントアプリケーション構成
user-mobile
エンドユーザー向けモバイルアプリケーション。
- 技術スタック: React Native (Expo), TypeScript
- 主要機能:
- ローカルフィード（位置情報ベース）
- 投稿作成・閲覧
- ヒートマップ表示
- 設定（言語、テーマ）
partner-web
パートナー（店舗）向けWebアプリケーション。
- 技術スタック: Next.js, TypeScript
- 主要機能: 店舗情報管理、投稿管理
ops-web
運用管理向けWebアプリケーション。
- 技術スタック: Next.js, TypeScript
- 主要機能: 監視、運用操作
共有パッケージ
@bazbii/i18n
国際化対応パッケージ。
- 多言語対応（日本語、英語など）
- ロケール管理
- 翻訳リソース管理
@bazbii/themes
テーマシステムパッケージ。
- カラーパレット
- スペーシング、タイポグラフィ
- ダークモード対応
@bazbii/h3-webview
H3地理計算用WebViewパッケージ。
- React Native用のH3計算
- WebViewベースの実装
@bazbii/proto-gen-ts
Protocol BuffersのTypeScript生成コード。
- gRPC/Connect RPC用の型定義
- APIコントラクト
通信方式
API通信
- プロトコル: Connect RPC (HTTP/JSON)
- 認証: JWT Bearer Token
- エンドポイント: Gateway経由
実装例
import { createPromiseClient } from "@connectrpc/connect";
import { createConnectTransport } from "@connectrpc/connect-web";
import { UserPostCommandService } from "@bazbii/proto-gen-ts/bazbii/post/v1/user_post_command_connect";
const transport = createConnectTransport({
baseUrl: "https://api.bazbii.app",
});
const client = createPromiseClient(UserPostCommandService, transport);
開発方針
モノレポ構成
- pnpm workspaceでパッケージ管理
- 共有パッケージを効率的に利用
型安全性
- Protocol Buffersから型を生成
- TypeScriptで型安全なAPI呼び出し
コード共有
- ビジネスロジックは可能な限り共有
- UIコンポーネントはアプリごとに実装