🏠 프로젝트 & 스터디 모집 서비스, Pro-Pro

🐰 서비스 링크

클릭하시면 서비스 페이지로 이동합니다.

🍎 프로젝트 소개

Pro-Pro는 개발자, 기획자, 디자이너 등 다양한 직군의 사람들이 모여 지역에 따라 또는 공부하고 싶은 기술 스택에 따라 팀빌딩을 할 수 있도록 도와주는 플랫폼 입니다. 그래서 프로와 프로가 만난다는 의미의 Pro-Pro 입니다.

팀은 프로젝트보다 만들기 어렵습니다. 팀빌딩은 저희에게 맡기고 오늘 해야할 코딩에 집중하세요!

🎥 데모 영상

클릭하시면 영상을 보실 수 있습니다.

📄 페이지 별 화면

메인 페이지 (스터디 페이지도 구성 동일)	로그인 화면
상세 페이지 (상)	상세 페이지 (하)
글 쓰기 페이지 (글 수정 페이지도 구성 동일)	프로필 페이지
북마크 페이지	추천 페이지

📺 부가 기능 화면

Skeleton 화면	Toast Message	Loading 화면

💻 주요 기능

📖 프로젝트 / 스터디 모집 게시글 CRUD

• 댓글, 북마크, 필터, 검색 기능 포함

🗺️ 프로젝트 / 스터디 장소 표시

• Daum 우편주소 API와 Kakao 지도 API 활용

👍 지역 / 기술스택 기반 추천 서비스

• 현재 추천 기준 (추후 변경될 수 있습니다.)
  • backend/configs/specialCitys 내부의 시도의 경우, 시도만 일치해도 추천
  • 그외 다른 시도는, 시군구 까지 일치해야 추천
  • 위 조건을 충족하며, 기술 스택이 하나라도 일치한다면 추천

🛠️ 기술 스택

📗 아키텍처

👪 팀원 소개

팀장 이동훈	팀원 서지영	팀원 손지성
github: dongjay00	github: sjy	github: Danji_ya
프론트엔드, 백엔드, 인프라	프론트엔드, 디자인	프론트엔드, 백엔드

팀원 이재석	팀원 장지원	팀원 정진원
github: LEON	github: chickenjang	github: Jin1won
프론트엔드, 디자인	프론트엔드, 디자인	프론트엔드, 백엔드

📓 Wiki

프로젝트와 관련된 상세한 내용은 pro-pro 아카이브에 기록되어 있습니다.

• 와이어프레임

• 프로토타입

🏃 로컬 실행 방법

1. 레포지토리를 클론하고자 하는 디렉토리에서 아래 명령어를 수행

   git clone [레포지토리 주소]
   

2. 클론한 디렉토리에서 backend 디렉토리로 들어가 아래 명령어를 통해 backend에서 필요한 module 설치

   npm install
   

3. backend에서 필요한 .env 설정

• 아래 설명에 따라 환경변수 설정

  MONGO_URL=[몽고DB URL]
  PORT=4000
  JWT_SECERT=[개인이 설정할 JWT 시크릿키]
  JWT_ALGO=HS256
  GOOGLE_CLIENT_ID=[GCP에서 발급받은 OAuth 2.0 CLIENT ID]*
  GOOGLE_SECRET_ID=[GCP에서 발급받은 OAuth 2.0 SECRET ID]*
  KAKAO_CLIENT_ID=[kakao developers에서 발급받은 CLIENT ID]*
  KAKAO_SECRET_ID=[kakao developers에서 발급받은 SECRET ID]*
  BASE_URL="http://localhost:4000"
  CLIENT_URL="http://localhost:9000"
  

  현재 * 표시가 들어간 환경변수는 서비스에 사용되지 않고 있습니다. 빈 값("")을 지정해주시면 됩니다.

  ex) GOOGLE_CLIENT_ID=""

4. 클론한 디렉토리에서 frontend 디렉토리로 들어가 아래 명령어를 통해 frontend에서 필요한 module 설치

   npm install
   

5. frontend에서 필요한 .env 설정

• 아래 설명에 따라 환경변수 설정

  KAKAO_API_KEY=[kakao developers에서 발급받은 CLIENT ID]
  GOOGLE_API_KEY=[GCP에서 발급받은 OAuth 2.0 CLIENT ID]
  SERVER_URL="http://localhost:4000"
  

6. (데이터베이스 서버가 켜져있다고 가정하고) 두 개의 터미널을 가동한 후, 각 터미널에서 다음의 절차 수행

• [터미널1] backend 디렉토리로 이동 후 아래 명령어 수행

  npm start
  

• [터미널2] frontend 디렉토리로 이동 후 아래 명령어 수행

  npm start
  

📚 API 테스트

로컬에서 backend 서버를 여신 후, 아래 postman json 파일을 이용하여 테스트해 보실 수 있습니다.

postman에서 import 하신 후 테스트 하시면 됩니다.

• 다운로드 링크