火曜日, 4月 29, 2025
ホームニューステックニュース~交流会などで使える!!~ オンラインですぐに名刺が作れるアプリケーションを作ってみた #React - Qiita

~交流会などで使える!!~ オンラインですぐに名刺が作れるアプリケーションを作ってみた #React – Qiita



~交流会などで使える!!~ オンラインですぐに名刺が作れるアプリケーションを作ってみた #React - Qiita

アプリケーションのコンセプト

エンジニア交流会や勉強会のような場面で、
「名刺を渡すほどではないんだよな…」
「でも、参加者同士で簡単にプロフィールは共有したい..」
という時って結構ありませんか?
そのようなニーズに応えるために開発した名刺管理アプリです。

一時的かつ気軽に、必要最低限の情報を交換できる仕組みを目指しました。

技術スタック

以下の技術を用いて開発しました

フロントエンド

  • React(UI構築)
  • TypeScript(型安全な開発)
  • React Router(画面遷移)
  • React Hook Form(フォーム管理)
  • Chakra UI(UIコンポーネント)

バックエンド/運用

  • Firebase(認証・DB)
  • GitHub Actions(自動ジョブ)

👉 GitHub リポジトリはこちら

👉 アプリケーションはこちら

実装機能

📝 自分のプロフィールを登録する

  • 自己紹介文や好きな技術スタック、各種snsアカウントの登録ができます。

Videotogif.gif

  • 入力後は検索画面へ遷移

Videotogif (2).gif

🔍 ユーザ検索

  • 他の人のプロフィールをユーザ名で検索し閲覧できます。

Videotogif (3).gif

工夫点

✅ ユーザ登録のバリデーション

React Hook Form を用いたバリデーションをしています。
基本的にはDBと整合性が取れるように入力値に制限を書けています。

Videotogif (4).gif

🔄 データの自動削除(GitHub Actionsによる定時実行)

  • GitHub Actions による Cron ジョブを用い、毎日定刻にDBのデータを削除する運用を導入しています。

  • このアプリは「一時的な用途での利用」を前提としているため

    image.png

今後の改善ポイント

気づき・学び

🚀 最後に軽く宣伝!

🎯 JISOUメンバー募集中!

  • 実はこちらのアプリ、僕が参加しているモダン技術を学べるスクールの課題の一環として作成したものになります。
  • 経験者向け専門ではありますが、未経験者でもガッツとコツコツ継続できれば、これぐらいのアプリケーションはスッと作れる実力が身につく環境です。
  • プログラミングコーチング「JISOU」では、現在新たなメンバーを募集中です!

👉 公式サイトはこちら!



フラッグシティパートナーズ海外不動産投資セミナー 【DMM FX】入金

Source link

RELATED ARTICLES

返事を書く

あなたのコメントを入力してください。
ここにあなたの名前を入力してください

- Advertisment -
Google search engine

Most Popular