LoginSignup
1

posted at

updated at

旅の思い出を共有できるSNSサービス『Travel notes』の紹介

サービス概要

旅の思い出を投稿して、他ユーザーと共有できるWebアプリケーションです。
旅先の名所や宿泊施設の感想、グルメやおみやげの情報、
地元や近所のおすすめスポットなどを投稿して、他のユーザーと共有できます。

アプリURL:https://travel-notes.online/

現在は公開しておりません

スクリーンショット 2022-03-19 1.51.26.png

機能一覧

認証機能

  • ユーザー登録機能:名前・メールアドレス・パスワード登録
  • ログイン機能:メールアドレス・パスワード認証
  • ゲストログイン機能:ユーザー未登録のままログイン可能
  • パスワード再設定機能:メールアドレス認証・パスワード変更
  • プロフィール編集機能:名前・メールアドレス変更。プロフィール画像、自己紹介文登録
  • ログアウト機能:ログイン前画面に遷移
  • 退会機能:登録ユーザーの削除。削除前にモーダル表示

メイン機能

  • 投稿機能:画像、タイトル、所在地(カテゴリ)、タグ、本文の投稿
  • 投稿編集機能:画像、タイトル、所在地(カテゴリ)、タグ、本文の変更
  • 投稿削除機能:削除前にモーダル表示
  • 検索機能:カテゴリ検索、キーワード検索
  • タグ検索機能:タグをクリックすると結果表示
  • いいね機能:お気に入り登録。非同期通信
  • コメント機能:コメント登録
  • コメント削除機能
  • フォロー機能:他ユーザーをお気に入り登録。非同期通信

機能・画面説明

ウェルカム画面

  • ヘッダーのメニューから、ユーザー登録、ログイン画面遷移、ゲストログインができます
  • 中央の画像を左右にフェードさせることができます
  • 3枚目の画像からもユーザー登録、ログイン画面遷移、ゲストログインができます

スクリーンショット 2022-03-19 1.54.47.png

スクリーンショット 2022-03-19 1.55.05.png

ユーザー登録・ログイン・ゲストログイン

  • Register(ユーザー登録)画面からユーザー登録ができる
  • Login(ログイン)画面からログイン・ゲストログインができる
    スクリーンショット 2022-03-06 18.11.32.png

投稿一覧画面

  • 自身や他ユーザーの投稿一覧を表示
  • ヘッダーのメニューからマイページ画面、投稿画面遷移、ログアウトができます
  • 検索フォームからカテゴリ検索、キーワード検索ができます
  • 投稿記事左上のプロフィール画像をクリックすることで、マイページに遷移できます
  • 投稿記事右上のメニューをクリックすることで、投稿編集画面・投稿削除画面に遷移できます
  • 画像、タイトル、本文をクリックすると、投稿詳細画面に遷移できます
  • タグをクリックすると、タグ検索ができます
  • ♥ボタンをクリックすると、いいねを残せます
  • 吹き出しボタンをクリックすると、投稿詳細画面のコメント入力に遷移します
  • 画面右下の紙飛行機ボタンをクリックすると、投稿画面に遷移します
  • 画面上部、画面下部のページネーションからページ移動ができます。

スクリーンショット 2022-03-19 2.19.50.png

投稿画面・投稿編集画面

  • 画像(png, jpeg, gif)、タイトル、所在地(カテゴリ)、タグ、本文の入力し投稿ができる
    スクリーンショット 2022-03-06 19.08.51.png

投稿詳細画面

  • 投稿記事右上のメニューから投稿の編集、投稿の削除ができます
  • タグをクリックすると、タグ検索ができます
  • ♥ボタンをクリックすると、いいねを残せます
  • コメントを入力し投稿できます
  • コメント一覧のコメントのプロフィール画像をクリックするとマイページに遷移します
  • ゴミ箱ボタンをクリックするとコメントを削除できます
    スクリーンショット 2022-03-06 19.33.04.png

検索機能

  • 検索フォームからカテゴリ検索、キーワード検索ができます
  • タグをクリックすることで、タグ検索ができます
    スクリーンショット 2022-03-19 2.28.15.png

マイページ

  • プロフィール、マイ投稿一覧を表示
  • 投稿一覧画面と同じ機能を実行できます
  • いいね一覧ボタンをクリックすることで、マイいいね一覧を表示できます
  • プロフィール右上のメニューをクリックすることで、プロフィール変更画面に遷移できます
  • フォロー中・フォロワーボタンをクリックすることで、フォロー中・フォロワー一覧に遷移できます
    スクリーンショット 2022-03-19 2.32.38.png

プロフィール変更画面

  • 画像(png, jpeg, gif)、名前、メールアドレス、自己紹介を変更できます
    スクリーンショット 2022-03-06 20.10.18.png

フォロー中・フォロワー一覧画面

  • フォロー中・フォロワーの一覧を表示
  • 一覧からフォローしたり、外したりできます
  • 他ユーザーのマイページ、フォロー中・フォロワー一覧に遷移できます
    スクリーンショット 2022-03-06 20.15.41.png

投稿削除・退会機能のモーダル

  • 投稿削除、退会をする際に最後の確認の為表示されます
  • 「削除する」「退会する」ボタンをクリックすることで、削除・退会できます
    スクリーンショット 2022-03-06 20.23.08.png

レスポンシブ対応

  • メディアクエリを使い、レスポンシブ対応をしっかり考えて実装したので、スマホでもストレス無く利用できます。

スクリーンショット 2022-03-19 1.24.29.png

ポートフォリオ開発の詳細について

技術的な事、開発背景などについては以下の記事にまとめております。

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
What you can do with signing up
1