My求人 管理画面
この管理画面は使用していたフレームワーク（Laravel nova）の特性上スケールしづらく、使用する顧客ユーザーの要望をプロダクトにすぐに反映できる状態ではありませんでした。そのため開発スピード向上を目的にデザイン・機能は変更せず、システムを以下の構成でリプレイスしました。
・サーバーサイド：Laravel（API）
・フロントエンド：Vue.js（Vue3）、TypeScript でのSPA構成
上記の構成はこれまで会社が経験したことがなく、チーム・個人としてもチャレンジングなプロジェクトとなりました。
ページ/機能構成
・ログイン、パスワードリマインダー・ダッシュボード
・アカウント管理
・応募管理
・求職者ユーザー管理 ・求人管理
・企業管理
・広告枠管理
（管理：新規作成/編集/削除）
プロダクト構成
APIベースでのプロダクトは経験がなかったため、さまざまな構成を調査・検討し、以下の技術や構成を採用しました。・フロントエンドはRepository × Factoryパターンを採用
・サーバーサイドとのAPI連携のためにOpenAPI（Swagger）を使用
・状態管理ツールにPiniaを採用
・フロントエンドのバリデーションにvee-validate、スキーマ作成にyupを採用
ディレクトリ構成は以下のようになりました。
src
├─ assets
├─ components
├─ config
├─ factories
├─ repositories
├─ route
├─ stores
├─ types
└─ views
その他以下のような課題や悩んだポイントもありましたが、学習を重ね解決することができました。
・ログイン認証
・APIリクエスト時のエラーハンドリング
・権限別の表示分岐
・SPAでのルーティング処理
・フロントエンドのバリデーション時のTypeScriptでの型定義
このプロジェクト完遂後、機能の追加や社内や顧客からの要望がありましたが、クリーンな構成になったことで、いずれも迷うことなく素早く機能の追加を行うことができるようになりました。
また、SPAの構成になったことでフロントエンドのテストの重要性に理解が深まりました。現在はまだフロントエンドのテストはありませんが、チーム全体として大きく成長できたプロジェクトとなりました。