From 8832b620f2747332a43a64f2f7183e3dca7cbefe Mon Sep 17 00:00:00 2001
From: thanhvudaynee <thanhvu@ngthanhvu.io.vn>
Date: Sun, 17 May 2026 20:31:34 +0700
Subject: [PATCH] docs: rewrite README to document project features, tech
 stack, and API architecture

---
 README.md | 132 ++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 83 insertions(+), 49 deletions(-)

diff --git a/README.md b/README.md
index 25b5821..4c9de81 100644
--- a/README.md
+++ b/README.md
@@ -1,75 +1,109 @@
-# Nuxt Minimal Starter
+# KR Phim
 
-Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+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
+
+```text
+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
 
-Make sure to install dependencies:
+Install dependencies:
 
 ```bash
-# npm
 npm install
-
-# pnpm
-pnpm install
-
-# yarn
-yarn install
-
-# bun
-bun install
 ```
 
-## Development Server
+## Development
 
-Start the development server on `http://localhost:3000`:
+Start the development server:
 
 ```bash
-# npm
 npm run dev
-
-# pnpm
-pnpm dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
 ```
 
-## Production
+The app will usually be available at:
 
-Build the application for production:
+```text
+http://localhost:3000
+```
+
+## Production Build
+
+Build the app for production:
 
 ```bash
-# npm
 npm run build
-
-# pnpm
-pnpm build
-
-# yarn
-yarn build
-
-# bun
-bun run build
 ```
 
-Locally preview production build:
+Preview the production build locally:
 
 ```bash
-# npm
 npm run preview
-
-# pnpm
-pnpm preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
 ```
 
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+## 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
+
+```bash
+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.