【React】名刺共有アプリを作ってみて【初心者】 #TypeScript – Qiita

• フロントエンド：React + Vite + Chakra UI
• バックエンド（BaaS）：Supabase
• 言語：TypeScript
• テスト：Jest × Testing Library
• デプロイ：GitHub Actions
• インフラ：Firebase Hosting

• supabase はオープンソースのBaaS(Backend as a Service）です。これがあればDB周りの構築や準備なしですぐにデータベースが利用できてフロントエンド側（アプリ開発）に集中できます。また、PostgreSQL をベースにしているので、RDBになじみのある人は使いやすいのではないでしょうか。
• GitHub Actions は、GitHub上で動作する CI/CD（継続的インテグレーション／デリバリー）の自動化ツール です。今回はコードをGitHubにpush するだけで 自動でビルドからテスト、Firebase Hosting にデプロイまでを実行するように設定して、快適な開発環境を用意しました。

工夫した点

const { error } = await supabaseClient.rpc("insert_user_and_userskill", {
  _user_id: registerFormData.eitango_id,
  _name: registerFormData.name,
  _description: registerFormData.description,
  _skill_id: registerFormData.skill_id,
  _github_id: registerFormData.github_id || null,
  _qiita_id: registerFormData.qiita_id || null,
  _x_id: registerFormData.x_id || null,
});

// User.ts
static createUser(...) {
  return new User(
    id,
    name,
    description,
    skills,
    formatSnsUrl("https://github.com", github_id),
    ...
  );
}