【React + Firebase】フロントエンドの知識だけでSNSアプリを制作しました❗️　※PC・スマートフォン対応可能✨

# 求人支援アプリ つぐもん
<ul>
  <li>
    <a style="border: none" href="https://tsugumon.vercel.app/">つぐもん</a>
　←　クリックでアプリに移動します。
  </li>
</ul>
<img width="800" alt="ログイン画面" src="https://user-images.githubusercontent.com/98272835/205211530-367e69c2-d3d6-4409-ad40-283e7237b65e.png">

スマートフォンでもぜひお試しください🙇‍♂️
<img width="200" alt="QRコード" src="https://user-images.githubusercontent.com/98272835/205318202-1425d266-3f0e-4a28-936b-7b9351996f36.png">

# 概要
<img width="800" alt="スクリーンショット 2022-12-02 4 14 52" src="https://user-images.githubusercontent.com/98272835/205140047-efc140e0-f659-49f7-b96c-1194a625e464.png">
<br>
地元企業と移住者をつなぐ求人支援アプリケーションです。<br>
地元企業は毎日の仕事風景を投稿することで、情報発信をおこなうことができます。<br>
移住者は、移住先にどんな仕事があるのか、情報収集をすることができます。<br>
※求人情報も載せることができるので、人材確保のツールとしても活用可能です！
<br>
<br>
PCとスマートフォンの両方で使用されることを想定し、レスポンシブデザインにしました。

### PC表示
<img width="800" alt="PCでの表示" src="https://user-images.githubusercontent.com/98272835/205339801-23bee4e5-c1b1-4735-87fe-97bd40081f65.png">  

### スマートフォン表示
<img width="240" alt="スマートフォンでの表示" src="https://user-images.githubusercontent.com/98272835/205340608-d3a764cc-2d90-4194-a39e-0023b0b06e6d.png">  
<br>

# なぜこのアプリを作ろうと思ったのか
　地方への移住にあたって最大の課題は「不安感」です。
　中でも「仕事」の不安では、働き手が足らない地元と、働き先が見つからない移住者との間で、意思の疎通が取れない問題が発生しています。
　移住先で、どんな仕事をするのか未知の状態で就職するのは、誰だって怖いです。
　では、地元企業の業務内容をもっと見える化すれば、地元と移住者、双方の仕事の不安を解決できるのでは？
　求人支援アプリ つぐもん は、そんな思いつきから作られた、地元と移住者をつなぐアプリケーションです。  
<br>
# ユーザータイプについて
　「求人支援アプリ つぐもん」では、**企業ユーザー**と**一般ユーザー**の２種類のタイプを用意しています。
<img width="800" alt="スクリーンショット 2022-11-23 14 58 51" src="https://user-images.githubusercontent.com/98272835/205448646-19d5838b-f6c1-48d0-8116-4b35bc6571a3.png">
**企業ユーザー**　：地元の農家・企業向け
　記事のプロフィールの閲覧、DM、検索のほか、記事の投稿や求人広告の掲示といった機能を利用できます。

**一般ユーザー**　：移住希望者向け
　記事やプロフィールの閲覧、DMや検索といった機能を利用できます。

<br>
　企業ユーザーは日々の仕事内容や、求人広告を載せることで、移住者に対して情報発信することができ、一般ユーザーは地元企業の仕事について、具体的にイメージを掴むことができます。
<br>

# 使用技術
- React.js 17.0.2
- Redux 7.2.6
- Redux Persist 6.0.0
- React Router 6.3.0
- Tailwind CSS 3.0.16
- TypeScript 4.1.5
- Firebase 9.6.5
  - Authentication
  - Firestore Database
  - Storage
<br>

# システム構成図
<img width="800" alt="スクリーンショット 2022-12-03 12 01 48" src="https://user-images.githubusercontent.com/98272835/205419403-7d49e86f-438e-43ae-b2bf-bea1bc4f16e2.png">
<br>

# データ構成図
![Entity Relationship Diagram (2)](https://user-images.githubusercontent.com/98272835/205436063-3d1e2c5e-758e-4a5b-8225-8e951504ef9d.png)  
<br>

# 機能一覧
### 1. フィード機能
　フォロー中のユーザーの投稿を、リアルタイムでホーム画面に表示します。
　投稿のタイミングでリアルタイムに情報を更新する際、FirestoreがRead Heavyにならないよう気をつけました。
<img width="800" alt="スクリーンショット 2022-11-23 13 05 14" src="https://user-images.githubusercontent.com/98272835/205436334-3714cb40-60a2-4540-a4fd-763c29abc13c.png">
### 2. 検索機能
　投稿に付けられたタグをキーワードに検索をおこないます。
　入力された半角スペースや全角スペース、改行などの文字を、キーワードの区切り文字として処理するよう気をつけました。
<img width="800" alt="スクリーンショット 2022-11-23 13 08 19" src="https://user-images.githubusercontent.com/98272835/205436386-12eefcaa-7566-43ab-98d4-87402fe48e61.png">
### 3. 投稿機能
　画像を投稿する機能です。「キャプション」欄には画像の説明文を、「タグ」欄には検索のキーワードを入力します。　　　　
<img width="800" alt="スクリーンショット 2022-11-23 13 18 58" src="https://user-images.githubusercontent.com/98272835/205436423-6b05eca2-1584-4263-b732-2ab62a5cac2c.png">
### 4. 通知機能
　通知画面ではメッセージをやり取りしているユーザーの一覧を確認できます。
　ユーザー名をクリックすれば、対象ユーザーとのメッセージ画面に遷移します。
　（注）ユーザーへの通知機能は実装方法を検討中のため、まだ実装しておりません。
<img width="800" alt="スクリーンショット 2022-12-03 22 55 21" src="https://user-images.githubusercontent.com/98272835/205444555-1d811213-2c79-42dc-b251-aac20708cba4.png">
### 5. DM機能
　ユーザー同士でLINEのようなチャットのやり取りをおこなう機能です。
<img width="800" alt="スクリーンショット 2022-12-03 22 55 33" src="https://user-images.githubusercontent.com/98272835/205446048-9b93360e-ed2a-488a-9180-91455c7d823f.png">
### 6. プロフィール表示機能
　ユーザーのプロフィールや、過去の投稿、募集中の広告を表示します。
　「過去の投稿」や「募集中」のボタンをクリックすることで、表示内容を切り替えます。
<img width="800" alt="スクリーンショット 2022-11-23 14 00 38" src="https://user-images.githubusercontent.com/98272835/205446281-abe7b069-2190-41df-8542-ca349199fee0.png">
<img width="800" alt="スクリーンショット 2022-11-23 14 01 45" src="https://user-images.githubusercontent.com/98272835/205446289-23d37f17-9eeb-45ec-b950-4d3ab5627742.png">
### 7. プロフィール編集機能
　ユーザー自身のプロフィールや、募集中の広告の編集をおこなう機能です。
　ユーザー自身がプロフィールを表示している場合にかぎり、使用できるようにしています。
<img width="800" alt="スクリーンショット 2022-11-23 15 29 33" src="https://user-images.githubusercontent.com/98272835/205446317-78c32cda-fc93-46f5-91d0-18244b890cf4.png">
<img width="800" alt="スクリーンショット 2022-11-23 15 29 49" src="https://user-images.githubusercontent.com/98272835/205446328-26dbe2bd-ab87-4ca9-9de5-df79e576c9a7.png">
### 8. 投稿詳細表示機能
　投稿画像をクリックすると、その投稿の詳細を確認できるようにしています。
　また、投稿データ以外に、企業ユーザーの募集の広告も表示するようにしています。
<img width="1440" alt="スクリーンショット 2022-12-04 0 01 26" src="https://user-images.githubusercontent.com/98272835/205447439-fae0846b-da3f-4cba-9905-74689e5981a2.png">
### 9. 投稿削除機能
投稿したユーザーが投稿の詳細を表示した場合、画像の右下に削除ボタンが表示されます。
削除ボタンをクリックすると、その投稿を削除することができます。
（注）既に登録されているデモデータには、削除ボタンが表示されないようにしています。
<img width="800" alt="スクリーンショット 2022-12-14 23 44 54" src="https://user-images.githubusercontent.com/98272835/207630420-7eb0bd3c-585c-49d7-b040-2024b5e1c50b.png">
<img width="800" alt="スクリーンショット 2022-12-14 23 51 38" src="https://user-images.githubusercontent.com/98272835/207630459-f7eca86e-6b45-4b2d-875a-ecd856191f08.png">
### 10. コメント・いいね機能
　ハートのボタンが「いいね」ボタン、吹きだしのボタンが「コメント」ボタンです。
　「いいね」ボタンをクリックすると、いいね数が増減します。
　「コメント」ボタンをクリックすると、コメント画面に遷移します。
　数字の箇所をクリックすると、それぞれのユーザーの一覧が表示されます。
<img width="800" alt="スクリーンショット 2022-12-04 0 13 10" src="https://user-images.githubusercontent.com/98272835/205447996-cb5945ca-7bd4-4b5b-adfa-877a31297ede.png">
<img width="800" alt="スクリーンショット 2022-12-04 0 13 48" src="https://user-images.githubusercontent.com/98272835/205448024-faa5f2c2-c5e7-435f-8425-daa3a6c268bc.png">
<img width="800" alt="スクリーンショット 2022-12-04 0 14 07" src="https://user-images.githubusercontent.com/98272835/205448048-0ed3f757-35d7-45f0-bd93-45cbf30aca4b.png">
### 11. ログイン機能
　入力されたメールアドレスとパスワードをもとに、ユーザーのログインを管理します。
　入力規則を満たさない場合、フォームの下にアラートを表示するようにしました。
<img width="800" alt="スクリーンショット 2022-11-24 22 08 42" src="https://user-images.githubusercontent.com/98272835/205448288-74171775-2504-4918-b725-29a584b7c30b.png">
### 12. 新規ユーザー登録機能
　新規ユーザーを登録する機能です。
　入力されたユーザー名が既存のものと重複していた場合、警告を表示するようにしました。
<img width="800" alt="スクリーンショット 2022-12-04 0 22 22" src="https://user-images.githubusercontent.com/98272835/205448508-77bb58d5-e50a-4c1e-b58d-2422d124da86.png">

# 開発時に苦労したこと
　Firebaseを用いて作成したのですが、基本的な技術は動画教材で学べる反面、使えるクオリティに仕上げるにはその知識だけでは足りず、不足分を埋めることに苦労しました。
　たとえば「履歴を遡るにはどうしたらいいか」や、「画像データのリサイズをどうやっておこなうのか」、「タグ検索をおこなうにはどうしたらいいのか」など、解決すべきさまざまな課題がありました。その一つ一つに、自力で答えを導き出すことは、本当に大変でした。
　一番苦労したのは、ユーザーがどこまでもリンクをたどっていけるようにデータ構成を考えることで、アプリの完成形を頭の中で明確にイメージしなければならず、ゼロからサービスを作ることの難しさを、身をもって体験することができました。