3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【個人開発】ミュージアムを検索・投稿できるサービス「MuseUP」を作りました!

Posted at

はじめに

はじめまして、とほほと申します!
プログラミングスクール「RUNTEQ」を卒業し、集大成としてポートフォリオを制作したため、リリースしたサービスについて本記事で紹介させていただきます🙇
なお、最後に開発にあたって参考にさせていただいた記事も一覧で掲載しておりますので、今後個人開発をされる方の参考になれば幸いです😊

サービス URL🔗

Github リポジトリ🔗

1. サービス概要

MuseUPのロゴ.png

MuseUP(みゅーじあっぷ)とは、近くのミュージアム(博物館・美術館等)を検索したり、おススメしたいミュージアムを投稿したりして、もっとミュージアムを知る・楽しむことができるサービスです!
ユーザーは、他のユーザーが投稿したミュージアムの詳細を閲覧したり、地域やカテゴリ、現在地から条件に該当するミュージアムを探すことができます。そして、ミュージアム好きなユーザーは、自分がおススメしたいミュージアムを投稿したり、ミュージアムのレビューを投稿することが出来ます。加えて、ミュージアムをリストに登録して管理したり、ミュージアムに対してプライベートなメモを記録することができます。

開発の背景💁

私は昔から博物館・美術館巡りが趣味で、大学でも博物館の学芸員資格を取得しました。
そんな私にとってミュージアムは身近なものでしたが、「もっと多くの人にミュージアムを身近に感じてほしい!」「ミュージアム好きな人が使って楽しめるサービスがほしい!」と思い、このサービスを作りました✨

2. サービスの機能

ログインが不要な機能

❶ミュージアムを検索する🔍

トップページの「ミュージアムを探す」ボタンやメニューバーの「検索」ボタンからミュージアムの一覧ページに飛ぶことができます。
Image from Gyazo

一覧ページの「詳しく検索する」ボタンで、ミュージアム名・都道府県、カテゴリから AND 検索ができます。また、ユーザーの現在の位置情報から最も近いミュージアムも検索できます。
Image from Gyazo

❷ミュージアムの詳細を閲覧する📓

一覧ページでミュージアムのピンをクリックすると、詳細ページを閲覧できます。詳細情報、レビュー、リスト、メモのタブの切り替えができます。

Image from Gyazo

ログインが必要な機能

❶ユーザー登録・ログインをする👤

メールアドレスとパスワードを設定して、ユーザー登録ができます。
また、ログインのハードルを下げるため、Google アカウントや X のアカウントでもログインが可能になっています。
Image from Gyazo

❷ミュージアムを投稿する🗺️

おすすめのミュージアムがあれば、ぜひ投稿してみてください!
投稿ページでは、ミュージアム名を途中まで入力すると、オートコンプリート機能で候補がサジェストされます。候補から選択すると住所が自動的に入力されます。
Image from Gyazo

❸ミュージアムのレビューを投稿する💬

既に訪れたミュージアムがあれば、そのミュージアムの詳細ページからレビューを投稿できます。レビューのコメントと 5 段階の評価を記録できます。
Image from Gyazo

❹ミュージアムをリストに登録する🗂️

投稿されているミュージアムを、自分用のリストに登録することもできます。
デフォルトでは「行きたい」と「行った」リストが用意されていますので、行きたいミュージアムや既に行ったミュージアムをリストで管理してみてください!
それに加えて、任意のリストも新規作成できるので、あなたの好きなようにミュージアムを管理できます。
Image from Gyazo

❺ミュージアムのメモを記録する

ミュージアムに対するプライベートなメモを記録することができます。
既に訪れたミュージアムなどで、何か自分用に書き記しておきたいことがあれば、詳細ページからメモを作成してください。
Image from Gyazo

3. 技術構成

技術スタック🔧

カテゴリ 技術
フロントエンド HTML / CSS (Tailwind CSS + daisyUI) / Javascript
サーバーサイド Ruby 3.3.6 / Ruby on Rails 7.2.2.1
データベース PostgreSQL
インフラ Render.com / Amazon S3
Web API Maps Javascript API / Geocoding API / Places API
その他 gem devise / carrierwave / mini_magick / ransack / kaminari / rails_admin / omniauth

ER 図💻

Lucidchart
空白の図 (4)

画面遷移図📚

Figma

4. 参考にした記事

devise でのログイン機能

Google Maps API と連携した投稿機能

ファビコン設定

ページネーション(Tailwind CSS + kaminari)

Render でのスリープ対策

おわりに

画面遷移図・ER図を作成してから 2 ヶ月の期間で、無事主要機能の実装にまでたどりつくことができました!
ご協力いただいた皆様、本当にありがとうございました🙇
これからも技術のキャッチアップに努め、研鑽を重ねていこうと思います💪

ここまでお読みいただきありがとうございました!

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?