CodeNavi

• 프론트엔드 리포지토리

개요

'코드 나비'는 역삼역의 개발자 및 예비 개발자들이 다양한 플랫폼에서 원하는 강의를 쉽게 찾고 비교할 수 있도록, 강의 목록을 한곳에 모아 필터링하고 사용자 리뷰를 제공하는 서비스입니다.

서비스 소개

스타트업, IT 회사가 많은 역삼역. 팀에서 새로운 프로젝트를 들어가는데, 처음 쓰는 기술 스택이다. 강의를 보고 싶은데 어떤 강의를 봐야할까 ?

이제는 데이터분석을 공부하고 싶다. 어떻게 공부해야할까?

분산되어 있는 온라인 강의들을 한번에 !

일정

• 2023년 11월 10일 19시 ~ 2023년 11월 11일 08시

💻 Team 8 소개

권민재	명재위	박성철	소효은
mjkweon17	JayMyong66	manu1307	she0108
Project Planning
Backend, CI/CD	Backend, Data Managing	Frontend	Frontend

🛠 Frontend Tech Stack

Framework	React, Vit, Zustand
Language	HTML, CSS, Javascript
Deployment	Vercel

🛠 Backend Tech Stack

Framework	FastAPI
Language	Python 3.10
Database/ORM	MySQL, Naver Cloud Platform - Cloud DB for MySQL, SQLAlchemy
CI/CD	Naver Cloud Platform - Server, Docker, Docker Hub, GitHub Actions
ETC	Swagger, Notion, Figma, Discord, ERDCloud, MySQL Workbench

다이어그램

Overall Architecture

CI/CD Architecture

ERD

기능 설명

• 로그인 / 회원가입
• 강의 보여주기
  • 강의 제목
  • 강의 썸네일
  • 강의하는 사람
  • 분류(웹 개발, 모바일, 백엔드, etc.)
  • 평점
  • 태그 (사용 스택)
  • 수강시간
  • 난이도
  • 가격 / 할인된 가격
  • 강의 소개, 커리큘럼 등 상세정보
  • 후기
  • 강의 사이트로 가는 링크
  • 찜버튼
• 보관함: 찜한 강의 보는 곳
• 마이 페이지
  • 보관함
  • 작성한 수강평 확인하기
  • 사용자 기술스택
    • 예: HTML, CSS, Javascript, React, Next.jx, Typescript, TailwindCSS, Zustand
  • 설정, 계정 정보
• 리뷰 작성
  • 수강평 작성
  • 평점
  • 이런 점이 좋았어요
  • 이런 점이 아쉬웠어요
• 검색

API 리스트

Method	Endpoint	Description
GET	/test	전체 사용자 조회하는 테스트용 API 이 API를 통해서 서버가 DB와 잘 연결돼있는지 확인
POST	/auth/register	회원가입
POST	/auth/login	회원가입
GET	/lecture	전체 강의 목록 조회
GET	/lecture/{page_id}	전체 강의 목록 10개씩 조회
GET	/lecture/search/all	키워드를 주면 해당 키워드가 제모에 포함된 강의 목록 ‘전부’ return
GET	/lecture/search/{page}	키워드를 주면 해당 키워드가 제모에 포함된 강의 목록 ‘20개’ return
GET	/lecture/{lecutre_id}	lecture_id에 맞는 강의 상세 조회
GET	/users/{user_id}	user_id에 해당하는 사용자 정보 조회
GET	/users/{user_id}/bookmarks	user_id에 해당하는 사용자의 찜목록 조회 (목록임! 리스트임!)
GET	/users/{user_id}/reviews	user_id에 해당하는 사용자의 리뷰 목록 조회
POST	/reviews	리뷰 작성
GET	/reviews/{reviews_id}	review_id에 해당하는 리뷰 내용 조회

앱 화면

메인 페이지	로그인	회원가입
강의 필터링	강의 상세 정보	리뷰 작성