デジタル名刺アプリを作成してみた

はじめに

Vite+React+TypeScript+Supabase+firebaseを使い、デジタル名刺アプリを作成しました。

作成した背景

勉強会で名刺交換をする中で、書いてある内容がそれぞれ違うため話題が生まれにくく、持っている人持っていない人がいました。
その場で登録できるオンライン名刺システムを開発することにしました。

実際に使ってみて

名前だけではなく、XやGithubのリンクまであるので、その人が何をしてきたかを追えるようにしたことはよかったです。

作成までに苦労したこと

苦労したことは以下の記事にまとめています。

XSS対策やエラーコード対処以外だと
useNavigateを使ってリンク遷移を行うReactアプリにて、useNavigateをモック化してリンク遷移テスト
のところで苦戦していました。

参考
https://qiita.com/shiva_it/items/48e92101a31e4a2ba50d

テストはVitestで実行したので以下のコードで実行しました。

RegisterComponent

import { vi } from "vitest";

let mockData: any[] = [];
// Navigatorモック準備
const mockedNavigator = vi.fn();
vi.mock("react-router-dom", async () => {
  const actual = await vi.importActual("react-router-dom");
  return {
    ...actual,
    useParams: () => ({ id: "1" }),
    useNavigate: () => mockedNavigator,
  };
});

今後の課題

課題として、以下の点があげられます。
・レイアウトの整え
・セッションタイムアウトが必要、明確なタイムアウトがないため、共有PCでなりすましの可能性がある

おわりに

まだまだ改善の余地もありますが、色々なアプリを作成していきます。