【Laravel × React】業務フローを明瞭に！ポートフォリオMATRIXFLOWを作成しました

### はじめに
初めまして、はしと申します。
現在、とあるスタートアップのバックオフィス部署で働いており、
バックエンドエンジニアを志して転職活動中です。

この度、ポートフォリオ「[MATRIXFLOW](https://matrixflow-d2987557bad9.herokuapp.com/)」をリリースしましたので、投稿いたします！

https://matrixflow-d2987557bad9.herokuapp.com/

バックオフィス部署で働いていてきた経験から、
いわゆる「バックオフィス部署のつらみ」に着目してこのポートフォリオを作成いたしました。

#### バックオフィスのつらみ？？
私のバックオフィス部署で経験したつらみは
「いざ上場準備！📢」「いざシステム導入！📢」「いざ業務改善！📢」という様々なフェーズ
に関わる際に「今の業務フローって結局どうなっているんだっけ？🤔」となるシーンです。

このとき困るのが業務フローを変更・改善を加えたことによって
現状の業務フローが不明瞭になったり、再度整理する必要が出てくるため
定常業務に加えて、業務フローの整理もしなければならず...となり
やりがいを感じるとともに「もっと楽にできたらなぁ」「もっとスムーズにできたらなぁ」
と感じたことがポートフォリオMATRIXFLOWを作成したきっかけです。

#### どんなアプリ？
マトリクス状のフロー図に担当者や業務内容を登録することで
スムーズに業務フローを作成できて、
ドキュメントもマトリクスに合わせて自動作成できるアプリです！
![matrixflow_qiita.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606327/14b22d67-faec-ba24-405b-d02a81c47edd.gif)

### サービスについて

#### MATRIXFLOW
 - URL: https://matrixflow-d2987557bad9.herokuapp.com/
 - GitHub: https://github.com/maixhashi/matrixflow/
 ![スクリーンショット 2024-11-02 19.50.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606327/5a1c919e-3be3-1cbf-52b2-7ed5443898e8.png)

#### 使用技術
 - Docker
 - php 8.3.12
 - Laravel 11.27.2
 - React 18.3.1
   - Redux 
 - Vite 5.4.8
 - Heroku

#### ER図

![スクリーンショット 2024-11-02 20.22.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606327/53bcfc69-3a96-9d64-141d-23a6f0308f8c.png)

#### 機能
:::note info
機能拡充中です！
本記事では投稿時点でリリースしている機能について記載したいと思います。
機能追加につれて別記事も投稿予定です。
:::

#### マトリックス状フロー図の作成
##### 担当者の追加
 メンバーの列のフォームから担当者を追加することができます。
 ![matrixflow_qiita_function_1_member_addition.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606327/5c5bd32e-3886-5e60-5fef-7a4fd7f890d9.gif)

##### フローステップの追加
 表の中の+ボタンから「フローステップ」を追加できます。
 例えば、 担当者として部長が「承認する」など「⚪︎⚪︎する」のようなアクションを登録します。
![matrixflow_qiita_function_2_flowstep_addition.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606327/c166702d-3d22-8809-3901-679911b2421b.gif)


##### フローに関するドキュメント作成機能
 マトリクスに担当者・フローステップを登録すると、マトリクスの横のドキュメントに自動で反映されます。
 ![スクリーンショット 2024-11-02 20.42.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606327/454ef409-2b7e-19e7-a7bd-ad34f8e56d6a.png)

##### pdf作成機能
 マトリクスに登録した担当者・フローステップの内容をもとにしたpdfがプレビューされます。ダウンロードも可能です。
![matrixflow_qiita_function_5_pdf_generation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606327/eea27342-08ac-ff03-2ef5-6d5cf727452c.gif)

※2024/11/11リリースした機能です！

https://qiita.com/maixhashi/items/6bb9c3f1e76eb5a80621


##### DnDのマトリクス行の入れ替え機能
　マトリクスの行はDnDで順序を入れ替えることができます。
![matrixflow_qiita_function_3_dnd.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606327/72dad651-867f-0f49-0230-347975435c04.gif)
 
:::note info
担当者に役職を追加してマトリクスの上に行けば行くほど、役職が高い方...というような表し方ができるのでは？と思い実装しました。
担当者の役職登録機能は今後実装予定です!
:::

##### チェック項目の追加機能
 次のステップに進む時に担当者がチェックする項目を追加することができます。
![matrixflow_qiita_function_4_checklist_addition.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606327/beed6fd9-7930-05fc-af71-d9d3bfc59398.gif)

### 終わりに
これからもどんどん機能を拡充しようと思います。
詳細のコード実装などは別記事に投稿しようと考えています。
読んでくださりありがとうございます！

また、もう1つPlotForgeというポートフォリオもリリースしております！
こちらもご覧いただけますと幸いです

https://qiita.com/maixhashi/items/e9a3503913b16635905f