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

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

### ~~アプリURL:https://travel-notes.online/~~
:::note warn
**現在は公開しておりません**
:::

![スクリーンショット 2022-03-19 1.51.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/891391/bf877b6b-6ab2-e9c1-7478-fc10665496e0.png)

## 機能一覧

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

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

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

![スクリーンショット 2022-03-19 1.54.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/891391/1b7f3495-210b-f0e0-dbfb-fba8f3d68d01.png)

![スクリーンショット 2022-03-19 1.55.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/891391/c094d89d-cc9c-a245-37b3-d6cbfcb24515.png)

### ユーザー登録・ログイン・ゲストログイン
- Register(ユーザー登録)画面からユーザー登録ができる
- Login(ログイン)画面からログイン・ゲストログインができる
![スクリーンショット 2022-03-06 18.11.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/891391/1609e43d-48e0-dec1-3c04-1ce62b48ba13.png)

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

![スクリーンショット 2022-03-19 2.19.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/891391/85e91257-4cad-04dd-0076-7281f35fd453.png)

### 投稿画面・投稿編集画面
- 画像(png, jpeg, gif)、タイトル、所在地(カテゴリ)、タグ、本文の入力し投稿ができる
![スクリーンショット 2022-03-06 19.08.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/891391/7883e0e8-77d2-4632-ace5-a60e30596756.png)

### 投稿詳細画面
- 投稿記事右上のメニューから投稿の編集、投稿の削除ができます
- タグをクリックすると、タグ検索ができます
- ♥ボタンをクリックすると、いいねを残せます
- コメントを入力し投稿できます
- コメント一覧のコメントのプロフィール画像をクリックするとマイページに遷移します
- ゴミ箱ボタンをクリックするとコメントを削除できます
![スクリーンショット 2022-03-06 19.33.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/891391/a7346f70-7366-d867-8b7c-b85165b12d65.png)

### 検索機能
- 検索フォームからカテゴリ検索、キーワード検索ができます
- タグをクリックすることで、タグ検索ができます
![スクリーンショット 2022-03-19 2.28.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/891391/c423c723-11b5-8f7b-8625-dc4f8cc2064d.png)

### マイページ
- プロフィール、マイ投稿一覧を表示
- 投稿一覧画面と同じ機能を実行できます
- いいね一覧ボタンをクリックすることで、マイいいね一覧を表示できます
- プロフィール右上のメニューをクリックすることで、プロフィール変更画面に遷移できます
- フォロー中・フォロワーボタンをクリックすることで、フォロー中・フォロワー一覧に遷移できます
![スクリーンショット 2022-03-19 2.32.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/891391/da0b6a4c-0b3f-4b13-c505-ea1ad314ceb1.png)

### プロフィール変更画面
- 画像(png, jpeg, gif)、名前、メールアドレス、自己紹介を変更できます
![スクリーンショット 2022-03-06 20.10.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/891391/72536d31-2e7c-c7da-bb1b-fb1562ec9eb7.png)

### フォロー中・フォロワー一覧画面
- フォロー中・フォロワーの一覧を表示
- 一覧からフォローしたり、外したりできます
- 他ユーザーのマイページ、フォロー中・フォロワー一覧に遷移できます
![スクリーンショット 2022-03-06 20.15.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/891391/7dd2b5c3-d7ac-dbb5-8ddc-70a375161e91.png)

### 投稿削除・退会機能のモーダル
- 投稿削除、退会をする際に最後の確認の為表示されます
- 「削除する」「退会する」ボタンをクリックすることで、削除・退会できます
![スクリーンショット 2022-03-06 20.23.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/891391/b5ae23b3-9f7d-3adb-4944-944c324312e3.png)

### レスポンシブ対応

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

![スクリーンショット 2022-03-19 1.24.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/891391/40a5e3d4-852c-c953-29f7-2887a8ac5277.png)
</font>

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

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

https://qiita.com/yuuichimizuta/items/e8a8cf2bbecba7cba965