kr-phim/README.md

CineK

CineK is a Korean movie streaming web app built with Nuxt and Tailwind CSS. It uses NguonC movie data, normalizes the responses on the server, and presents the content with a blue Netflix-inspired interface.

Features

• Korean-only movie catalogue from 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

Setup

Install dependencies:

npm install

Development

Start the development server:

npm run dev

The app will usually be available at:

http://localhost:3002

Production Build

Build the app for production:

npm run build

Preview the production build locally:

npm run preview

Run the production server after building:

npm run start

The production server listens on port 3002 by default.

Docker

Build and run with Docker Compose:

docker compose up -d --build

The container exposes the app at:

http://localhost:3002

Stop the container:

docker compose down

The Compose service is named cinek and maps host port 3002 to container port 3002.

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] - 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:

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

The public server endpoints use NguonC as the single movie API source.

Scripts

npm run dev       # Start Nuxt development server
npm run build     # Build for production
npm run preview   # Preview the production build
npm run start     # Start the built Nitro server
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.