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.