Halatap
メール、QR、vCard、Apple Walletへの最新デジタル名刺の作成・共有・エクスポートを単一ダッシュボードから行えるプラットフォーム。
Next.js 16
React 19
TypeScript
Convex
Tailwind CSS 4
Radix UI
Resend
概要
Halatapは紙の名刺を、常に最新情報へアップデートできるデジタル名刺へと置き換えます。各ユーザーにダッシュボードが提供され、テンプレート群から名刺を作成して、状況に応じた最適な方法（公開リンク、QRコード、メール、ダウンロード可能な連絡先ファイル、またはApple Walletに直接保存できるパス）で共有できます。Next.jsとConvexで構築されたフルスタックアプリであり、セキュアなアカウント機能、リアルタイムデータ、英語とアラビア語の双方に対応しています。
課題
紙の名刺は時代遅れになりつつあります。肩書や電話番号が変わった瞬間に情報は古くなり、紛失しやすく、物理的な1つのフォーマットでしか存在できません。一方でデジタル共有も実際には十分ではなく、リンク、PDF、QRコード、メッセージアプリなどに情報が散在し、信頼できる一元的なソースがありません。さらに、グローバルユーザーは複数言語での名刺を必要とし、チームには1枚ずつではなく一括で多数の名刺を作成できる手段が求められます。Halatapは、これらすべてを単一システムに統合することを目指しました。
役割とアプローチ
これはチームプロジェクトであり、私は他の開発者とともにフロントエンド全般および複数のエンドツーエンド機能の実装を担当しました。業務内容は名刺作成機能とダッシュボード体験、共有フロー、そしてアプリ外での有用性を高める連携機能（Walletパス、vCardエクスポート、メール配信）に及びました。一貫した開発アプローチとしてプロダクトのモジュール性を重視しました。1つのテンプレートシステムからエディタプレビューと公開カードの両方を描画し、1つのカードスキーマで単一作成とCSV一括インポートの両方を賄うことで、機能ごとに枝分かれさせることなく共通基盤を再利用しました。
技術スタック
主な機能
ギャラリー
課題と解決策
アクセス制御は複雑化させずに柔軟性を保つ必要がありました。公開カードと非公開カードでは異なるルールが必要となるため、共有機能はカードと受信者に紐づく専用のsharesテーブルとしてモデル化しました。公開アクセスはカードが明示的に公開設定されている場合にのみ許可され、その検証処理はUI全体に散らばせるのではなく、カード取得クエリの内部に集約しています。
認証は完全な外部サービスへの丸投げではなく独自に構築したため、細心の注意を払いました。パスワードは平文で保存せず、Web Crypto APIによるソルト付きPBKDF2でハッシュ化し、リセットトークンには有効期限を設け、一度使用されたら無効化する仕様にしました。最も開発負荷が高かった機能はApple Walletパスの生成です。証明書ベースの署名、適切なバンドルアセット、埋め込みQRペイロード、フォーマット済みローカライズフィールドが必要であり、これらすべてをオンデマンドで生成し、正しいContent-Typeで返却します。個人とチームの双方への対応は、通常作成フローと個別のCSVインポート経路の間で同一のカードスキーマを再利用することで実現しました。
成果
Halatapはデジタル名刺のあるべき姿を具現化しています。単一の編集可能なアイデンティティが、ウェブ、メール、QR、連絡先ファイル、Apple Walletを横断し、2言語で、個人にもチームにもシームレスに機能します。とりわけWalletパスと一括インポート機能により、単なる「プロフィールページ」の域を超え、実務におけるマルチチャネル共有に真に適応したプロダクトに仕上がっています。