kimkee/react

React + TMDB API + Supabase

React + TMDB API + Supabase

https://kplex.pages.dev

기능구현

• 인기영화,추천영화, 장르별 리스트
• 10점만점의 추천정보 점수를 5점 만점의 별점UI로 추가구현
• 영화 검색 기능 구현

홈	상세	리스트	검색

React Version

• "react": "^18.2.0",
• "react-router-dom": "^6.8.1",
• "axios": "^1.3.3",
• "swiper": "^9.0.3", (https://swiperjs.com/react)

Tools

• JSON View https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd
  크롬에서 JSON API 미리보기기능

Reference

• 영화 API 사용법
• React에서 Axios 사용하기

TMDB API

• 상영작 https://api.themoviedb.org/3/movie/now_playing?language=ko&region=kr&page=1&sort_by=release_date.desc&api_key=[API_KEY]

• Discover https://api.themoviedb.org/3/discover/movie?language=ko&region=kr&page=1&sort_by=release_date.desc&api_key=[API_KEY]

• 인기작 https://api.themoviedb.org/3/movie/popular?language=ko&region=kr&api_key=[API_KEY]

• 장르 https://api.themoviedb.org/3/genre/movie/list?language=ko&region=kr&api_key=[API_KEY]

• 영화상세 https://api.themoviedb.org/3/movie/496243/credits?&region=kr&language=ko&api_key=[API_KEY]

• 검색 https://api.themoviedb.org/3/search/movie?language=ko&region=kr&query=기생충&api_key=[API_KEY]

• 이미지 https://image.tmdb.org/t/p/w200/jjHccoFjbqlfr4VGLVLT7yek0Xn.jpg
  
  
  
  

Project setup

npm create vite@latest

Compiles and hot-reloads for development

npm run dev

Compiles and minifies for production

npm run build

Vite

• https://vitejs.dev/

• https://vitejs-kr.github.io/