Publikováno 20. února 2026

Jak jsem postavil anglický web s platformou LMS pro videokurzy podle českého wordpress webu

Web je postaven v Next.js a obsahuje veřejnou část a LMS platformu s kurzy ve členské sekci.

U nového anglického webu nestačilo jen přeložit texty z češtiny. Cílem nebyla kopie původního webu, ale samostatná platforma: veřejný web, blog, nabídka kurzů, přihlášení, platby, členská sekce, přehrávač lekcí a k tomu příprava anglických videí.

V tomto článku se zaměřuju hlavně na technické provedení.

Základ aplikace

Web je postavený na Next.js 15 s App Routerem a Reactem 19. Strukturu jsem rozdělil na dvě hlavní části.

Veřejná část obsahuje úvodní stránku, blog, kurzy, kontakt a právní stránky. Členská sekce se zakoupenými kurzy, přehrávání lekcí a nastavení účtu.

Přihlášení běží přes Clerk. Middleware hlídá všechny stránky pod /dashboard/*. Když se tam dostane nepřihlášený uživatel, pošle ho na přihlášení a zapamatuje si původní adresu, aby se po přihlášení vrátil tam, kam měl namířeno.

Kurzy, platby a přístup

Data jsou v PostgreSQL přes Drizzle ORM. Schéma řeší kurzy, moduly, lekce, recenze, zákazníky, nákupy a průběh sledování lekcí. Supabase slouží jako databázové prostředí.

Platby jsem napojil přes Stripe Checkout. Při nákupu se ke Stripe session uloží informace o kurzu a zákazníkovi. Po zaplacení přijde webhook a vytvoří přístup ke kurzu.

Tady vzniká drobný, ale důležitý problém: uživatel se může ze Stripe vrátit na web dřív, než webhook doběhne. Stránka s přehrávačem proto krátce opakuje kontrolu, jestli už přístup existuje, a teprve potom pustí uživatele do kurzu.

Video přehrávač

Video část stojí na YouTube IFrame API a youtube-nocookie.com. Nešlo ale jen o vložení iframe. Vlastní přehrávač řeší:

ovládací prvky,
pokračování z poslední pozice,
rychlost přehrávání,
fullscreen,
klávesové zkratky,
stav online/offline,
ukládání průběhu přibližně každých 10 sekund.

Jakmile chcete u videí sledovat progres, přepínat lekce a pustit obsah jen přihlášeným studentům, z obyčejného embed kódu se rychle stane důležitá část aplikace.

Blog bez externí redakce

Blog je postavený nad soubory. Články jsou markdown soubory s metadaty v hlavičce. Server je načte, vytáhne z nich název, datum a další údaje, obsah zobrazí přes react-markdown a vyhledávání staví přes Fuse.js.

Tohle řešení je jednoduché a pro tenhle typ webu praktické. Není potřeba externí CMS, obsah je ve verzování a nasazuje se spolu s aplikací.

Angličtina jako hlavní jazyk, ne přepínač

Nešlo o klasické vícejazyčné řešení s přepínačem. Anglická verze je hlavní jazyk aplikace: html lang="en", Clerk v angličtině, Stripe v angličtině a anglické texty v rozhraní.

U blogu šlo hlavně o obsahovou migraci. Český článek se uloží jako záloha, anglická verze jde na jeho místo, přeloží se titulky, slugy, kategorie, tagy i interní odkazy. Potom se znovu vytvoří vyhledávací index.

Nejtěžší nebyl web, ale videa

Nejpracnější částí byla příprava anglických videí. Dubbing není jen přeložit text. Bylo potřeba řešit terminologii, načasování, kvalitu hlasu a návaznost na pohyb ve videu.

Anglický web nakonec není jen přeložená stránka. Je to vlastní produkt s obsahem, platbami, kurzem, přehrávačem a provozními detaily, které musí držet pohromadě.