TypeScriptでハッカソンマッチングアプリを作りました

## はじめに
こんにちは、記事を見ていただき有難うございます！
今回はハッカソンマッチングアプリを作ったので紹介します！

## アプリの概要
初心者にとってハッカソンに出て技術力あげたいけどすでに学生エンジニアの塊ができていて中々参加できない学生の方いませんか？
自分がそうでした..
「運営がチーム組んでくれるハッカソンもあるけど、どんな人かわからないし、技術スタックも一致しない為、結局ハッカソンを途中棄権で終わってしまう」
そのような課題があることもわかりました。
なら、事前にどんな技術スタック、人、何を作ろうとしているのかが分かったらハッカソンに参加する敷居が下がりませんか？？
そのように考え、ハッカソンマッチングアプリ「UNITE」を作成しました！！

・サービスURL
[UNITE](https://unite-front.vercel.app/ "UNITE")

・フロントエンドリポジトリ
(https://github.com/nagayamajun/unite-replace-front)
・バックエンドリポジトリ
(https://github.com/ponsAoki/unite-api)


## 機能一覧
### 募集一覧画面
・検索機能
募集をハッカソン名で検索することができます。

↓
![スクリーンショット 2023-11-30 22.28.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632155/d452be57-6b09-6493-78ce-22891f6c0327.png)


### 募集詳細
・参加申請
チャットでお話を聞いたり、募集詳細の情報を見たりして参加したいと思ったら押してください、募集主に承諾されたら参加確定です！！
・チャット動線
募集の詳細情報だけでは参加申請押しきれない時、実際に話を聞くことができます！
・いいね機能
参加してみたいと思った募集があったらいいねをしておいてください、一覧で自分がいいねした募集を見ることができます。


![スクリーンショット 2023-11-30 22.46.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632155/97cc917a-72f8-05f4-a2ce-49c9eaca4489.png)![スクリーンショット 2023-11-30 22.46.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632155/a2078cb6-9359-0605-19e1-390a5b09fe0f.png)

### 募集詳細(募集主)
・申請ユーザーの承認, 削除
申請が来たユーザーの承認・拒否を行うことができます。申請が通った場合、募集人数が減り、参加確定ユーザーになります。

・ハッカソン情報の編集
ハッカソン情報を編集することができます。
詳細というより管理者ページの認識が強いので編集をページ単位で作らず、UIの一部に組み込みました。
このことでpage遷移というアクションを挟まず行うことができるので、自分は募集主のUXを高めることができると思います。

・募集の削除
募集を削除することができます。

![スクリーンショット 2023-12-03 13.13.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632155/3b2649fe-91ac-fcb1-777f-c3450ae35a86.png)
![スクリーンショット 2023-12-03 13.13.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632155/49ff6350-1a46-4f86-6be8-fc4eb8a09a6a.png)


### チャットページ
左に一覧、　右にチャットが表示されています。

![スクリーンショット 2023-12-03 13.22.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632155/9311fc04-12d4-68f5-b8e9-4eed2e5f6eb8.png)

## 技術スタック
・フロントエンド

フレームワーク: Next.js
ルーティングの容易さ、ISRを選択することができる(結局使っているページは無くなりました...)が魅力的で選定しました。

css: tailwindCSS
ここは個人的にスピード感もって開発でき、且つ書きやすいという理由です。

状態管理: Recoil
あまり意図を持って選定しませんでした。ここはcontextでもよかったのかなと思います。

・バックエンド

フレームワーク: Nest.js
開発メンバーがフロントメインだったこともあり、言語をTypeScriptで開発したかった為、使用しました。また、拡張性の高いフレームワークで拡張的に機能を増やしていく予定だったので自分たちのプロダクトに最適という観点からExpressなどでなくNestを選定しました。

TypeORM: Prisma
ネットの参考記事の多さや最近使われているという点から採用しました。

![スクリーンショット 2023-12-03 13.27.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632155/36261add-314c-3bfd-b643-605255b568e1.png)

## 技術的にこだわった点
フロントエンドのディレクトリ構成をこだわり、クリーンアーキテクチャーを採用した事です。自分たちはチームで開発しており、特にフロントエンドの構成がぐちゃぐちゃになっていました。最初はcomponentsの中に全部混ざっている状況でUI,ロジックも分けれていませんでした。そこからatomic構成も採用しましたが中々うまくできずに、悩んでいた時にクリーンアーキテクチャ-を選定しました。
採用した事で関心を分離することができ、　UIロジックの分離やロジックの中でも変更容易性を保てていると思います。
ここは今後の話(今してます！)なのですがテストをしっかり書きたいのでメリットがある(関心を分離している為、mockとの置き換えがやりやすい)と考えています。

## なぜ今記事にしたか?
開発自体はだいぶ前に終わっていたのですがこのプロダクトに対する気持ちが薄れていました。しかし、チーム開発を行った時やっぱり成長する環境であると凄く思い、多くの人のチーム開発を当たり前にしたいという思いが強くなりました。
自分の作るプロダクトで初心者から経験者まで誰でもハッカソンが当たり前にしていきたいです。

## 追加したい機能
・マッチングし、作成したプロダクトをフィードバックもらえる機能
・その他、ハッカソンを

## 学んだ事
・SSR,ISR,SSGなどのサーバーサイドレンダリングの知識
・クリーンアーキテクチャーの理解
・チーム開発の難しさ
・やりたいでなく、どうしたら利用されるかを考えることの難しさ(機能としては作った半分ぐらいしか今表示していないです..)