サービス概要
旅の思い出を投稿して、他ユーザーと共有できるWebアプリケーションです。
旅先の名所や宿泊施設の感想、グルメやおみやげの情報、
地元や近所のおすすめスポットなどを投稿して、他のユーザーと共有できます。
アプリURL:https://travel-notes.online/
現在は公開しておりません
機能一覧
認証機能
- ユーザー登録機能：名前・メールアドレス・パスワード登録
- ログイン機能：メールアドレス・パスワード認証
- ゲストログイン機能：ユーザー未登録のままログイン可能
- パスワード再設定機能：メールアドレス認証・パスワード変更
- プロフィール編集機能：名前・メールアドレス変更。プロフィール画像、自己紹介文登録
- ログアウト機能：ログイン前画面に遷移
- 退会機能：登録ユーザーの削除。削除前にモーダル表示
メイン機能
- 投稿機能：画像、タイトル、所在地（カテゴリ)、タグ、本文の投稿
- 投稿編集機能：画像、タイトル、所在地（カテゴリ)、タグ、本文の変更
- 投稿削除機能：削除前にモーダル表示
- 検索機能：カテゴリ検索、キーワード検索
- タグ検索機能：タグをクリックすると結果表示
- いいね機能：お気に入り登録。非同期通信
- コメント機能：コメント登録
- コメント削除機能
- フォロー機能：他ユーザーをお気に入り登録。非同期通信
機能・画面説明
ウェルカム画面
- ヘッダーのメニューから、ユーザー登録、ログイン画面遷移、ゲストログインができます
- 中央の画像を左右にフェードさせることができます
- 3枚目の画像からもユーザー登録、ログイン画面遷移、ゲストログインができます
ユーザー登録・ログイン・ゲストログイン
- Register(ユーザー登録)画面からユーザー登録ができる
- Login(ログイン)画面からログイン・ゲストログインができる
投稿一覧画面
- 自身や他ユーザーの投稿一覧を表示
- ヘッダーのメニューからマイページ画面、投稿画面遷移、ログアウトができます
- 検索フォームからカテゴリ検索、キーワード検索ができます
- 投稿記事左上のプロフィール画像をクリックすることで、マイページに遷移できます
- 投稿記事右上のメニューをクリックすることで、投稿編集画面・投稿削除画面に遷移できます
- 画像、タイトル、本文をクリックすると、投稿詳細画面に遷移できます
- タグをクリックすると、タグ検索ができます
- ♥ボタンをクリックすると、いいねを残せます
- 吹き出しボタンをクリックすると、投稿詳細画面のコメント入力に遷移します
- 画面右下の紙飛行機ボタンをクリックすると、投稿画面に遷移します
- 画面上部、画面下部のページネーションからページ移動ができます。
投稿画面・投稿編集画面
- 画像(png, jpeg, gif)、タイトル、所在地(カテゴリ)、タグ、本文の入力し投稿ができる
投稿詳細画面
- 投稿記事右上のメニューから投稿の編集、投稿の削除ができます
- タグをクリックすると、タグ検索ができます
- ♥ボタンをクリックすると、いいねを残せます
- コメントを入力し投稿できます
- コメント一覧のコメントのプロフィール画像をクリックするとマイページに遷移します
- ゴミ箱ボタンをクリックするとコメントを削除できます
検索機能
- 検索フォームからカテゴリ検索、キーワード検索ができます
- タグをクリックすることで、タグ検索ができます
マイページ
- プロフィール、マイ投稿一覧を表示
- 投稿一覧画面と同じ機能を実行できます
- いいね一覧ボタンをクリックすることで、マイいいね一覧を表示できます
- プロフィール右上のメニューをクリックすることで、プロフィール変更画面に遷移できます
- フォロー中・フォロワーボタンをクリックすることで、フォロー中・フォロワー一覧に遷移できます
プロフィール変更画面
- 画像(png, jpeg, gif)、名前、メールアドレス、自己紹介を変更できます
フォロー中・フォロワー一覧画面
- フォロー中・フォロワーの一覧を表示
- 一覧からフォローしたり、外したりできます
- 他ユーザーのマイページ、フォロー中・フォロワー一覧に遷移できます
投稿削除・退会機能のモーダル
- 投稿削除、退会をする際に最後の確認の為表示されます
- 「削除する」「退会する」ボタンをクリックすることで、削除・退会できます
レスポンシブ対応
- メディアクエリを使い、レスポンシブ対応をしっかり考えて実装したので、スマホでもストレス無く利用できます。
ポートフォリオ開発の詳細について
技術的な事、開発背景などについては以下の記事にまとめております。