【個人開発】趣味を共有するサービス「HOBBYLINK」をリリースしました

## はじめに
はじめまして！
今回、HOBBYLINKというサービスを開発しました。
この記事では、このサービスについて紹介します。
初めての投稿となりますが、ぜひご覧いただければ嬉しいです。


## サービス概要
![HOBBYLINK.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3985403/a4057cab-e38d-e2dc-52e4-4f7d38a629ab.png)
新しい趣味を始めたいが必要なものがわからない方や、 他のユーザーとの交流を通じて趣味を深めたい方に最適なサービスです。

#### ▼ サービスURL
https://hobbylink.vercel.app/

#### ▼ GitHubリポジトリ
https://github.com/MATSUO-JUNTA/hobbylink

## サービスを作成したきっかけ
私は趣味で釣りをしており、これまで何度か友人や同僚から「釣りを始めたいけど何を買えばいいかわからない」と相談を受けてきました。
その際におすすめの商品や私が使っている商品をひとつひとつ紹介していましたがもっと手軽に共有できる方法があればいいなと感じていました。
そこで、釣りに限らず他の趣味でも手軽に情報を共有できるようになれば、同じような悩みを持っている方にも役立つと思い、このアプリの開発に挑戦しようと思いました。

## 使用技術

| カテゴリ       | 技術                                    |
| :------------- | :-------------------------------------- |
| フロントエンド | TypeScript / React / Next.js / MUI      |
| バックエンド   | Ruby / Ruby on Rails                    |
| データベース   | PostgreSQL                              |
| 認証           | NextAuth.js                             |
| 環境構築       | Docker / docker-compose                 |
| CI/CD          | Github Actions                          |
| インフラ       | Vercel / Heroku / AWS S3                |
| API            | Rakuten Web Service                     |
| その他(フロントエンド)         | Prettier / ESLint / zod /react-hook-form / swr / axios / framer-motion / react-share / camelcase-keys / i / react-intersection-observer |
| その他(バックエンド)         | ActiveStorage / rack-cors / rubocop / pg / puma /aws-sdk-s3 / kaminari / jwt / active_model_serializers |

## 技術選定理由
### フロントエンド
**TypeScript**
- 型に関するエラーを事前に発見することができコードの保守性を保つため
- 補完機能が強化され開発効率が向上するため

**React / Next.js**
- TypeScriptと相性がよく、近年主要なトレンドとして注目されていて使ってみたかったため。


**MUI**
- デザインの一貫性やコンポーネントの豊富さ、またドキュメントが豊富だったため、開発効率の向上が図れると考えたため。

### バックエンド
**Ruby / Ruby On Rails**
- Railsチュートリアルをはじめ、ドキュメントが豊富で学びやすく、少ないコードで実装できるため。

### インフラ
**Varcel**
- Next.jsとの相性が良く、GitHubとの連携がスムーズで、ワンクリックで簡単にデプロイできるため。

**Heroku**
- デプロイの容易さと、運用コストやパフォーマンスのバランスに優れているため

**AWS S3**
- Railsとの連携がしやすく、低コストで画像を管理できるため。

### CI / CD
**GitHub Actions**
- 普段から使用しているGitHubとの親和性が高く、多くのプロジェクトで使用されている実績があり、無料で十分な機能を提供しているため

## 実装機能

|                                                             ログイン                                                              |                                                            ホーム画面                                                             |                                                             検索画面                                                              |
| :-------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------: |
| ![ログイン](https://gyazo.com/df6e5f9c6d409de3a381c24d19d31365.gif) | ![ホーム画面](https://gyazo.com/070127e93f565526d1b2375fa812bede.gif) | ![検索画面](https://gyazo.com/36ffaa4b1c26e359d7e7f10f7238b8d8.gif) |
| ログインボタンを押すと、<br>ログインモーダルが表示され、<br>Googleアカウントでログインができます。 | 新着投稿、おすすめ投稿が閲覧できます。 | カテゴリー検索、キーワード検索ができ、<br>投稿が閲覧できます。 |


<br/>

|                                                             投稿画面                                                              |                                                           商品検索画面                                                            |                                                           お知らせ画面                                                            |
| :-------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------: |
| ![投稿画面](https://gyazo.com/cccc11ad4fbb2ecbfacf151f21f08ca1.png) | ![商品検索画面](https://gyazo.com/fb6bf7f87adaae1a21cec3dfc75e7734.gif) | ![お知らせ画面](https://gyazo.com/bc671d427ef49df2f779316c3b76c1f0.png) |
| 自分の趣味や使用している商品、おすすめのアイテムを自由に投稿できます。 | 自分が使用している商品やおすすめアイテムを検索し投稿に追加できます。 | 自分の投稿に対するいいねや<br>コメント、フォローの確認ができます。 |



<br/>

|                                                            マイページ                                                             |                                                           投稿詳細画面                                                            |                                                           商品詳細画面                                                            |
| :-------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------: |
| ![マイページ](https://gyazo.com/993dad46b529d36317130b584b97f6ff.gif) | ![投稿詳細画面](https://gyazo.com/6a10783c9c8e66ddf51340acbcfaf9c4.png) | ![商品詳細画面](https://gyazo.com/cbfd7786172dc6a8616e54cfac022363.png) |
| 自分の投稿に対するいいねやコメント、フォロー中、フォロワーの確認ができます。 | 投稿の内容やおすすめ商品を<br>確認できます。 | 商品に関する詳細や、<br>実際に使用されている投稿を<br>確認ができます。 |


<br/>

|                                                            いいね                                                             |                                                           コメント                                                            |                                                           投稿シェア                                                           |
| :---------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------: |
| ![いいね](https://i.gyazo.com/c88d66e3cd73b0d962dd14f23a292cf8.gif) | ![コメント](https://gyazo.com/1fe9aa9ed85b4be9dd51ac3664798faf.gif) | ![投稿シェア](https://gyazo.com/08de75fe582c1543efe5661bae8896e2.png) |
| いいねボタンをクリックすると、投稿にいいねする<br>ことができます。 | コメントボタンをクリックし、<br>コメント一覧<br>ページでコメントの投稿、編集、削除ができます。 | 各SNSボタンをクリックすることで、<br>投稿を簡単にシェアできます。 |

## 工夫した点
#### UI/UX
- ユーザーが直感的に操作できるよう、シンプルで分かりやすいメニュー構造を採用しました。
- スマートフォンやPCそれぞれで快適に利用できるUIを意識したレスポンシブデザインに対応させました。

#### マネタイズ
- 楽天APIを利用し、商品詳細画面の「購入サイトへ」ボタンからアフィリエイトURLを通じて楽天の購入サイトに遷移する仕組みを実装し、収益化につながるようにしています。

####
## ER 図
![er.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3985403/35129c23-1026-d00a-23e1-2c0dab50f890.png)


## インフラ構成図
![infra.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3985403/02aeeba3-3981-6799-68d9-0c3b97811f50.png)

## 画面遷移図

[Figma](https://www.figma.com/design/24rgRaUhoinbc4mCYvAr6P/%E7%94%BB%E9%9D%A2%E9%81%B7%E7%A7%BB%E5%9B%B3?node-id=0-1&m=dev&t=iBEKxCRAfLZeEr1S-1)

## 学習した教材
#### フロントエンド(Javascript / TypeScript / React / Next.js)
https://www.udemy.com/course/javascript-essence/

https://www.udemy.com/course/typescript-complete/

https://www.sbcr.jp/product/4815610722/

https://www.udemy.com/course/react-complete-guide/

https://nextjs.org/learn/dashboard-app

#### バックエンド(Ruby / Ruby On Rails)
https://gihyo.jp/book/2021/978-4-297-12437-3

https://railstutorial.jp/

https://book.mynavi.jp/ec/products/detail/id=93905

#### インフラ(Docker)
https://www.udemy.com/course/ok-docker/

https://book.mynavi.jp/ec/products/detail/id=120304

## 今後について
#### テストコード
- 現在テストコードが未実装なので、品質向上のためにテストコードを追加していきたいです。
#### リファクタリング
- 現状のソースでは、非効率な部分も多いと思うので、今後はそれらを順次改善していきたいです。
## 最後に
最後までご覧いただきありがとうございました！
今後も学習を続け、このサービスを改善していき、スキルアップを目指していきたいと考えています。