taic-dev / wc-map

全国のトイレを探せるアプリケーションです。

W.C. MAP 〜トイレ検索アプリ〜

Demo

一般ユーザー機能

top_recents.2.mov

管理者ユーザー機能

2023-02-11.18.04.27.mov

Description

WEB上で全国のトイレを探せるWEBアプリケーションです。
Google Map上にピンが立てられており、ピンをタップするとトイレの詳細情報を確認できます。
また、ログインすればトイレの情報を投稿できます。

Features

• 現在地を取得して地図上にピンを立てる
• Google Map上でトイレのある位置にピンを立てる
• 閲覧したトイレの履歴を確認できる
• ログインするとトイレの投稿 / 編集 / 削除ができる

Requirement

• node.js v16.14.0
• react.js v18.2.0
• php v7.3.24
• Laravel v8.83.27
• MySQL v5.7.32

Usage

• トイレを探す場合

1. Google Map上に表示されたピンをクリック
2. 詳細情報を確認
3. トイレまでのルートを確認する場合は「Google Mapへ」のボタンをクリック

• トイレを投稿する場合

1. 新規登録 & ログインをする
2. Postページを開き、項目に沿って情報を入力すると投稿できる
3. Archiveページから編集,削除ができる

How to install & Start-up

$ git clone https://github.com/taic-dev/WC-MAP.git

・frontend
$ cd frontend
$ npm install
.envのファイルを作成し環境変数を入力
$ npm start

・backend
$ cd backend
$ composer install
.env.exampleの内容を変更しファイル名を.envに変更
$ php artisan serve

Author

taic-dev

wc-map's Issues

Listページの作成

投稿した内容の一覧を表示する画面。

• Modalで表示するのが良いか？
• 詳細内容
• 削除機能
• 編集機能

【feature】ログアウト機能の作成

ログイン機能の現状
・localStrageの値によってログインしているかどうかを判断している

今後
・Session管理に変更をする

Editモーダルの作成

Editモーダルの機能

• Postページをもとにデザインを作成
• 登録されている内容を反映させた画面にする

【feature】ユーザー画面 / 閲覧履歴のページの作成

現状
　- 閲覧ページなし

開発内容
　- 閲覧ページの作成
　- localStrageで閲覧したマップのデータを管理
　- 最大、直近の10件を表示
　- 同じトイレを閲覧した場合は古い閲覧履歴を削除して新しい閲覧履歴をトップに追加
　- 閲覧履歴をクリックした場合はその場所をマップで表示

localStrageに有効期限を与える

localStrageは半永久的に残ってしまうので、定期的に削除するように有効期限を与える。
参考サイト

【fix】useFetchの作成

axiosの通信部分をカスタムフック useFetch を作成し共通化させる。
参考サイト

コンソールのエラーを修正する

mapの処理をした子要素のkeyをuniqueにする。

エラー文
Warning: Each child in a list should have a unique "key" prop.

【fix】Markerの吹き出し部分にアイコンを追加

・現状
　- Markerの吹き出しに情報がなにもないので、どんなトイレかわかりにくい

・解決案
以下のアイコンを吹き出しに追加してみるのはどうか？
　- 多目的室ありなら車椅子のアイコン
　- ウォシュレットありなら水のアイコン

【fix】管理画面の削除機能を修正

・事象
　- 削除をクリックするとdelete_atに時刻は追加されている。
　- Archive一覧を表示する際に削除delete_atがnull以外のものになっていない。

Laravelのインストール / Backendの作成

Laravel ver8のインストール