はじめに

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

サービス概要

新しい趣味を始めたいが必要なものがわからない方や、他のユーザーとの交流を通じて趣味を深めたい方に最適なサービスです。

▼ サービスURL

▼ GitHubリポジトリ

サービスを作成したきっかけ

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

使用技術

カテゴリ	技術
フロントエンド	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との親和性が高く、多くのプロジェクトで使用されている実績があり、無料で十分な機能を提供しているため

実装機能

ログイン	ホーム画面	検索画面

ログインボタンを押すと、ログインモーダルが表示され、 Googleアカウントでログインができます。	新着投稿、おすすめ投稿が閲覧できます。	カテゴリー検索、キーワード検索ができ、投稿が閲覧できます。

投稿画面	商品検索画面	お知らせ画面

自分の趣味や使用している商品、おすすめのアイテムを自由に投稿できます。	自分が使用している商品やおすすめアイテムを検索し投稿に追加できます。	自分の投稿に対するいいねやコメント、フォローの確認ができます。

マイページ	投稿詳細画面	商品詳細画面

自分の投稿に対するいいねやコメント、フォロー中、フォロワーの確認ができます。	投稿の内容やおすすめ商品を確認できます。	商品に関する詳細や、実際に使用されている投稿を確認ができます。

いいね	コメント	投稿シェア

いいねボタンをクリックすると、投稿にいいねすることができます。	コメントボタンをクリックし、コメント一覧ページでコメントの投稿、編集、削除ができます。	各SNSボタンをクリックすることで、投稿を簡単にシェアできます。

工夫した点

UI/UX

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

マネタイズ

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

ER 図

インフラ構成図

画面遷移図

Figma

学習した教材

フロントエンド(Javascript / TypeScript / React / Next.js)

バックエンド(Ruby / Ruby On Rails)

インフラ(Docker)

今後について

テストコード

現在テストコードが未実装なので、品質向上のためにテストコードを追加していきたいです。

リファクタリング

現状のソースでは、非効率な部分も多いと思うので、今後はそれらを順次改善していきたいです。

最後に

最後までご覧いただきありがとうございました！
今後も学習を続け、このサービスを改善していき、スキルアップを目指していきたいと考えています。