분실물을 위한 중개 플랫폼, whereQR

프로젝트 소개

whereQR은 분실물을 위한 중개 플랫폼입니다.

물건을 잃어버렸을 때를 대비해 소지품에 QR코드 스티커를 부착하여 분실시 보다 손쉽게 물건을 찾을 수 있어요.

분실시 물건 습득자가 QR 코드를 스캔하면 주인과 채팅을 할 수 있습니다.

스티커가 부착되지 않은 분실물을 위한 커뮤니티 공간을 제공합니다.

기술 스택

• Language: Javascript
• Framework: React
• Library: styled components, axios, stomp, react-query
• CI/CD: Github Actions, Docker

주요 기능

QR 코드 스캔

• react-qr-reader 라이브러리를 이용한 스티커의 qr 코드 스캔 기능

채팅

• stomp 소켓 통신을 이용한 채팅

소셜 로그인

• 카카오 로그인

마이페이지

• 등록한 qr 코드 관리 및 회원 정보 관리

서비스 화면

추가 개발 예정 기능

1. 분실물 게시판
2. 보증금 기능 추가

실행 방법

Setup

git clone https://github.com/baek-park/whereQR-front.git

cd whereQR-front

npm install --legacy-peer-deps

.env.production 파일 설정

VITE_REST_API_KEY="kakao login api key"
VITE_REDIRECT_URI="dev redirect_uri"
VITE_BASE_URI="dev server uri"
VITE_CHAT_ENDPOINT="dev server chat endpoint"

.env.development 파일 설정

VITE_REST_API_KEY="kakao login api key"
VITE_REDIRECT_URI="prod redirect_uri"
VITE_BASE_URI="prod server uri"
VITE_CHAT_ENDPOINT="prod server chat endpoint"

Start dev

npm run dev -- --port 3000

Build with dockerfile

docker build -t {dockerhub_id}/{docker_image} .

docker tag {docker_image} {dockerhub_id}/{docker_image}

docker push {dockerhub_id}/{docker_image}

Docker hub에 배포된 image: tnfus916/whereqr-frontend:latest

창업동아리 발표 자료