CONCON

프로젝트 소개

• CONCON은 아티스트와 팬을 연결해주는 서비스입니다.
• 내가 좋아하는 아티스트의 콘서트일정, 작업한 앨범 정보, 관련 유튜브 영상을 한눈에 볼 수 있고 아티스트를 응원하는 팬명록을 남기며 아티스트와 팬들끼리 커뮤니케이션 할 수 있습니다.
• 크롤링한 데이터를 바탕으로 현재 인기있는 콘서트 TOP10과 콘서트 정보(캐스팅, 장소, 예매사이트 등)를 제공합니다.

배포링크 - CONCON
사용자 피드백 반영하여 깃허브로 버전관리 진행 -
릴리즈노트

팀 소개

조민택	고은서
깃허브	깃허브
포트폴리오	포트폴리오

기술 스택

TypeScript	NextJS	SWR	Tailwind	Python	Selenium	mongoDB

주요 기능

로그인	아티스트 조회
팬명록	관련 유튜브 영상
콘서트 조회	검색-(아티스트,콘서트)
북마크	카카오지도
캘린더UI	Comming(다가오는 일정)

역할 & 배운 점 & 아쉬운 점

조민택

[Frontend]

• 북마크 기능 구현 (Optimistic UI를 통한 사용자 UX 개선) - useSWR, Mutate
  • 블로그 링크
• 팬명록 CRUD 구현
• 캘린더 UI 구현 - 캘린더 날짜 클릭 시 해당 날짜에 진행하는 콘서트 일정 제공
• NextAuth 라이브러리를 사용하여 구글 Oauth 로그인 구현
• Atomic Design Pattern 적용하여 컴포넌트 재사용성, 유지보수성 향상
• 카카오지도 API 사용하여 콘서트 장소 지도뷰 구현
  • 발생 이슈관련 블로그 링크
• 유튜브 API 사용하여 아티스트 관련 유튜브 영상 구현

[Backend]

• 파이썬 셀레니움 이용한 데이터 크롤링(콘서트, 앨범, 아티스트)
• AWS Lambda, CloudWatch 이용한 크롤링 자동화 구현
  • 블로그 링크
• 백엔드 API 구현 (콘서트, 아티스트, 앨범, 팬명록, 북마크, 랭킹 등)

고은서 Frontend dev

• 검색 기능 : FormData와 useSWR를 이용해 검색 기능 구현
  • 블로그 링크
• 무한스크롤 기능 : useSWRInfinite와 IntersectionObserver 사용해 무한스크롤 Hook 구현
  • 블로그 링크
  • 관련PR 링크
• 페이지네이션 기능 : useState, mutate 사용해 페이지네이션 기능 구현
  • 관련 PR 링크
• tab : 탭 Hook, UI 컴포넌트 구현
  • 관련 PR 링크
• 반응형 대응
• 디자인

✉️ Commit Message