はじめに
Reactの学習を始めて3カ月が経過しました。
アウトプット中心の学習を行っているのですが、今回はその一環でデジタル名刺アプリを作成しました！
なお、先月は学習記録アプリを作りました！
作成したアプリ
使用言語
React、TypeScript
UI
Chakura UI
DB
Supabase
テスト
Jest
React Testing Library
その他使用した技術
React Hook Form
Github
Supabase
実装機能
・ユーザー検索機能
存在しないIDで検索をかけた場合、エラーメッセージが出ます。
ユーザー表示画面はこんな感じです。
SNSアイコンを押すと、該当アカウントのページにちゃんと遷移します。
・ユーザー登録機能
Qiita・Github・X(Twitter)の登録は任意で、それ以外は必須項目です。
アプリ作成の背景
ひたすらなにかを作って手を動かすことで、知識を定着させていくという狙いです。
実は、前回作成した学習記録アプリと、使用している技術と作成の流れはほぼ変わりません。
なので、環境構築なんかは前回と同じことをすればいいのですが、何度も同じ工程を繰り返すと、知識が深まりやすく自分の成長にも気づきやすいと思います。
デモ （デザインは最低限です。。）
作成の流れ
アプリ作成の大まかな流れはこちらです！
前回作成したアプリと流れは変わらないので、前回との相違点を太字にしました。
１．環境構築（Vite）
２．CI/CD構築（Github Actions）
毎朝6:00に昨日分の登録データが消去されるバッチ処理を追加
３．DBの作成・設定（Supabase）
これまで1つのテーブルで行っていたが今回は複数テーブルを作成。
（ユーザー情報・ユーザーのスキル情報・ユーザーIDで前述した2つの情報の紐づけを行う中間テーブル）
４．アプリの機能実装
５．テスト作成（Jest）
おわりに
ここ最近は気温の変化が激しかったり現場の稼働が高くなった影響で、気持ちが落ち込んだりコンディションが下がったりと、不安定な日々を送っていました。
そんな中でも、10分だけでもいいから勉強しようという思いで着実に積み上げることを意識しています。これからも粘り強く学習をしていきたいです。
JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからライン登録お願いします👇