KR Phim

KR Phim is a Korean movie streaming web app built with Nuxt and Tailwind CSS. It aggregates Korean-only movie data from the OPhim and NguonC APIs, normalizes the responses on the server, and presents the content with a Netflix-inspired sky-blue interface.

Features

Korean-only movie catalogue from OPhim and NguonC.
Netflix-style home page with a large hero carousel.
Floating movie preview cards on home page hover.
Browse page with search, type filters, and pagination.
Movie detail page with embedded player and episode selector.
Shared responsive header with centered navigation and global search.
Shared footer and scroll-to-top button.
Tailwind CSS styling with the Be Vietnam Pro font.
Lucide icons for UI actions.

Tech Stack

Nuxt 4
Vue 3
Tailwind CSS 4
@tailwindcss/vite
lucide-vue-next

Project Structure

app/
  assets/css/main.css        Global Tailwind and theme styles
  components/                Shared UI components
  pages/index.vue            Home page
  pages/phim/index.vue       Browse, search, filter, and pagination page
  pages/phim/[slug].vue      Movie detail and player page
server/
  api/movies.get.ts          Movie list API endpoint
  api/movies/[slug].get.ts   Movie detail API endpoint
  utils/movies.ts            API adapters and normalization helpers
API_nguonc.md                NguonC API notes
API_ophim.md                 OPhim API notes

Setup

Install dependencies:

npm install

Development

Start the development server:

npm run dev

The app will usually be available at:

http://localhost:3000

Production Build

Build the app for production:

npm run build

Preview the production build locally:

npm run preview

Available Routes

/ - Home page with hero carousel and movie rows.
/phim - Browse page with search, filters, and pagination.
/phim?type=series - Browse Korean series.
/phim?type=single - Browse Korean movies.
/phim?q=keyword - Search Korean movies.
/phim/[slug]?source=ophim - Movie detail page from OPhim.
/phim/[slug]?source=nguonc - Movie detail page from NguonC.

API Notes

The app does not call external movie APIs directly from the browser. Instead, Nuxt server endpoints request and normalize movie data:

OPhim list/detail data is handled in server/utils/movies.ts.
NguonC list/detail data is handled in server/utils/movies.ts.
Only Korean movies are kept in the normalized result.

If one source is unavailable, the list endpoint still returns data from the other source when possible and includes source status metadata.

Scripts

npm run dev       # Start Nuxt development server
npm run build     # Build for production
npm run preview   # Preview the production build
npm run generate  # Generate a static build when supported

Notes

This project is intended as a movie browsing and streaming UI experiment using public movie API sources. Availability of movie metadata, images, and episode embeds depends on the upstream APIs.

3.0 KiB Raw Blame History