DramaBox – SvelteKit

A SvelteKit rewrite of DramaBox, a short drama streaming platform.

Stack

• SvelteKit – routing, SSR, page transitions
• Tailwind CSS – utility-first styling
• Vite – dev server and bundler

Project Structure

src/
├── app.css                          # Global styles + Tailwind
├── app.html                         # HTML shell
├── lib/
│   ├── api.js                       # API helpers (apiFetch, subtitle utils)
│   └── MovieCard.svelte             # Reusable drama card component
└── routes/
    ├── +layout.svelte               # Nav + footer (shared across all pages)
    ├── +page.svelte                 # Home (hero + trending + latest)
    ├── +page.js                     # Home data loader
    ├── trending/
    │   ├── +page.svelte             # Trending page
    │   └── +page.js
    ├── latest/
    │   ├── +page.svelte             # Latest/New Releases page
    │   └── +page.js
    ├── search/
    │   ├── +page.svelte             # Search results page
    │   └── +page.js
    └── drama/[bookId]/
        ├── +page.svelte             # Drama detail + video player
        └── +page.js                 # Loads detail + episodes in parallel

Route Mapping (old → new)

Getting Started

npm install
npm run dev

Then open http://localhost:5173.

Build for Production

npm run build
npm run preview

API

All API calls go to https://dramabox.sansekai.my.id/api/dramabox.

Endpoints used:

• GET /trending – trending dramas
• GET /latest – new releases
• GET /search?query= – search
• GET /detail?bookId= – drama details
• GET /allepisode?bookId= – episode list

Deployment

Works with any SvelteKit-compatible host:

• Vercel – zero config
• Netlify – zero config
• Cloudflare Pages – use @sveltejs/adapter-cloudflare
• Node server – use @sveltejs/adapter-node

Change svelte.config.js adapter to match your host.