gpoopmap - 대똥여지도

😣급똥러들을 위한 화장실 위치 정보 공유 플랫폼😫

밖에서 갑자기 화장실이 급할 때,

"너무 급해 돈을 내도 좋으니 화장실만 찾자..." 라는 생각을 해본적 다들 한 번씩 있을겁니다.

저는 이런 불편함으로인해 화장실이 급한 사용자들끼리 서로 화장실 위치 정보를 공유하는 플랫폼이 있으면 좋겠다고 생각했습니다.

대똥여지도는 유저들간의 화장실 정보 공유를 통해서 공공화장실이나 개인 화장실 등 무료 혹은 유료로 사용할 수 있는 화장실을 공유하는 플랫폼입니다.

개발기간

2020.06 ~ 2020.08

기술

Front-end

• HTML5
• CSS
• JavaScript
• React
• React Hooks
• Redux
• Material-ui

Back-end

대똥여지도-Back ➡️: https://github.com/hshine1226/gpoopmap-server

• NodeJS

• PassportJS

• Babel

• Webpack

• Express

• MongoDB

• Mongoose

API

• Google Maps API

• 전국공중화장실표준데이터(공공데이터포털)

기타

• Github

• Pug

• Heroku

기능

회원가입 & 로그인

• 유저 관련 기능은 passportJS를 통해서 구현했습니다.

프로필 & 프로필 수정

• 서버의 안정성과 트래픽을 조절하기 위해서 프로필 이미지 업로드는 multer를 통해서 AWS S3에 이미지를 업로드 하였습니다.

현재 위치 찾기

• Geolocation API를 통해서 사용자의 현재 위치를 받아올 수 있습니다.
• 받아온 위치를 중심으로 반경 1km 내에 있는 화장실들을 지도에 표시합니다.

내 주변 1km 화장실 찾기

• 현재 위치 찾기 버튼을 클릭하거나 지도를 움직이면 현재 지도를 중심으로 반경 1km의 화장실 위치들을 받아올 수 있습니다.
• Geojson 형태로 MongoDB에 저장되어 있는 데이터를 MongoDB의 $near operator를 통해서 위치 정보들을 받아왔습니다.

화장실 등록하기

• 화장실을 등록하기 위해서는 로그인과 현재 위치 핀이 필요합니다.
• 화장실 등록하기 버튼을 누르게 되면 화장실명과 한줄 메모를 입력하고, 추가적으로 화장실 사진을 업로드 할 수 있습니다.