Skip to content

Latest commit

ย 

History

History
82 lines (57 loc) ยท 3.38 KB

File metadata and controls

82 lines (57 loc) ยท 3.38 KB

๐ŸŽฌ KPlex : Movie Information App

React Vite React Router Supabase TMDB API

TMDB API์™€ Supabase๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ œ์ž‘ํ•œ ์˜ํ™” ์ •๋ณด ๋ฐ ์ปค๋ฎค๋‹ˆํ‹ฐ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ž…๋‹ˆ๋‹ค.

๐Ÿ”— ๋ผ์ด๋ธŒ ๋ฐ๋ชจ ๋ณด๋Ÿฌ๊ฐ€๊ธฐ - https://kplex.vercel.app/


๐Ÿ“ธ Preview

ํ™ˆ (Home) ์ƒ์„ธ ์ •๋ณด (Detail) ๋ฆฌ์ŠคํŠธ (List) ๊ฒ€์ƒ‰ (Search)

โœจ Key Features

  • ์˜ํ™” ํƒ์ƒ‰: ์ธ๊ธฐ ์˜ํ™”, ์ถ”์ฒœ ์˜ํ™”, ์žฅ๋ฅด๋ณ„ ์˜ํ™” ๋ฆฌ์ŠคํŠธ ์ œ๊ณต
  • ์ง๊ด€์ ์ธ ํ‰์  UI: 10์  ๋งŒ์ ์˜ ๋ฐ์ดํ„ฐ๋ฅผ 5์  ๋งŒ์ ์˜ ๋ณ„์  UI(๋ฐ˜ ์Šคํฌ๋กค ํฌํ•จ) ๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ์‹œ๊ฐํ™” ๊ตฌํ˜„
  • ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ: ์‹ค์‹œ๊ฐ„ ์˜ํ™” ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ
  • ํšŒ์› ์ธ์ฆ (Supabase): ๋น ๋ฅด๊ณ  ์•ˆ์ „ํ•œ ์†Œ์…œ ๋กœ๊ทธ์ธ (Google, Kakao ๋“ฑ) ์ง€์›
  • ๋งˆ์ดํŽ˜์ด์ง€ ๊ธฐ๋Šฅ: ๊ด€์‹ฌ ์˜ํ™” ์Šคํฌ๋žฉ ๋ฐ ๋ณด๊ด€ ๊ธฐ๋Šฅ
  • ์ปค๋ฎค๋‹ˆํ‹ฐ (๋ฆฌ๋ทฐ): ์˜ํ™”์— ๋Œ€ํ•œ ๋ฆฌ๋ทฐ ์ž‘์„ฑ, ์ˆ˜์ • ๋ฐ ์‚ญ์ œ ๊ธฐ๋Šฅ

๐Ÿ› ๏ธ Tech Stack

  • Frontend: React (v19.2.4), React-Router-Dom, Axios, Swiper
  • Backend & Auth / DB: Supabase
  • Build Tool: Vite
  • External API: TMDB API

๐Ÿš€ Getting Started

Prerequisites

  • Node.js ์„ค์น˜
  • ํ™˜๊ฒฝ ๋ณ€์ˆ˜ ์„ธํŒ… (.env ํŒŒ์ผ์— TMDB API Key ๋ฐ Supabase API ์ •๋ณด ์ž…๋ ฅ ํ•„์š”)

Installation & Run

# 1. ํŒจํ‚ค์ง€ ์„ค์น˜
$ npm install

# 2. ๋กœ์ปฌ ์„œ๋ฒ„ ์‹คํ–‰
$ npm run dev

# 3. ๋ฐฐํฌ์šฉ ๋นŒ๋“œ (Production)
$ npm run build

๐Ÿ“š API Reference (TMDB)

ํ•ด๋‹น ํ”„๋กœ์ ํŠธ๋Š” TMDB API๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์ž‘์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

  • ํ˜„์žฌ ์ƒ์˜์ž‘ (Now Playing): /movie/now_playing
  • ์ธ๊ธฐ ์˜ํ™” (Popular): /movie/popular
  • ์žฅ๋ฅด (Genre): /genre/movie/list
  • ์˜ํ™” ๊ฒ€์ƒ‰ (Search): /search/movie
  • ์˜ํ™” ์ƒ์„ธ ์Šคํƒœํ”„ ํฌ๋ ˆ๋”ง: /movie/{movie_id}/credits
  • ์˜ํ™” ๋ฐœ๊ฒฌ (Discover): /discover/movie

๐Ÿ”— References & Tools