Product narrative that starts English practice not from the course catalogue, but from the video that the user already wants to watch.
Converting the watched video into learning material
Lurneo was born out of the gap between an English language learner's choice of content and motivation to study. Most users are already watching interviews, trailers, vlogs, reviews or entertainment content on YouTube; But this content does not translate into a learning session that can be stopped and repeated, whose words can be recorded and then measured. Lurneo's basic idea was to add a learning layer without changing this behavior.
User pastes a supported YouTube link. The system takes the English subtitles, normalizes them according to time codes, matches them with the Turkish equivalents, and turns the video into a bilingual work surface. While watching, the user can select a word or expression, see its meaning in context, save it along with that video moment, make short shadowing replays, and when the viewing is completed, he can move on to his own tutorial and quiz flow.
The video library collects both prepared lessons and supported links added by the user in the same workspace.
Video import pipeline: from a URL to lecture session
I didn't design the video embed flow as a simple iframe field. The API first parses the URL securely, extracts the valid YouTube ID, and returns it from the cache if there is a previously prepared result for the same user. A new request opens a claim/lease mechanism that prevents two simultaneous imports from producing the same record. It then checks to see if the video is accessible, embedable, less than 45 minutes long, and has available English subtitles.
The system directly selects English or regional `en-*` subtitle channel; If available, it matches the Turkish subtitles according to time codes, otherwise it passes the segments through the translation pipeline in controlled pieces. The results are recorded in the `subtitle_segments` table with English text, Turkish equivalent, start and duration information. The video and learning session are considered ready only after these processes are completed consistently; By clearing the unfinished claim, the user is prevented from being left with a damaged course record.
Copyright and platform limits are part of the product architecture
Lurneo is not a system that “downloads and republishes every video on the internet”. The current product only accepts supported YouTube videos that are publicly available, embedable, and have appropriate English subtitles. The video stream remains in the official YouTube player; The app does not download audio or video and does not secretly transcribe unsubtitled content. Therefore, there are different readiness states in the user experience such as `studyable`, `watch only`, `needs subtitles` and `blocked`.
This limit is not a deficiency, it is part of the product reliability. Consumer subscription or access to a platform page does not give the right to replay and process that content in another application. In Lurneo, I separate the media source and the learning data: the user's progress, selected words, quiz results and learning packages are managed in Lurneo's data model, while the playback remains with the provider.
Viewing surface: video, active English/Turkish subtitles, word saving and quiz/shadowing actions in the same context.
Synchronous learning workspace
At the center of the learning screen is the player and time-coded subtitle engine controlled by the YouTube IFrame API. The active segment is calculated as the player progresses; The English and Turkish sentences are shown together on the video, and the relevant line is highlighted in the full transcript. The user can go back to the specific moment by tapping on the time stamp. Thus, subtitles become not just text to be read, but a tool for navigating and repeating the video.
A selected word or expression in an English sentence is sent to the meaning service. The description, Turkish meaning and original context are displayed to the user; When recorded, the expression is written to the `saved_items` record along with the video, subtitle segment and source moment with millisecond precision. Although “Save phrases”, “Start quiz” and short shadowing actions seem to be separate modes, they use data from the same learning session. My design goal was to keep the video, transcript, and working tools on a single-focus surface without separating them from each other.
Not a list of words, but a memory of source video and personal phrases that can be recalled with exact memory.
Watch → study → quiz → repeat loop
Progress in Lurneo is not just a percentage indicator, it's an open session state machine. A new lesson starts at stage `watch`; When the video is completed, it becomes `tutorial_ready`, when the learning package is opened, it becomes `tutorial`, when the study is finished, it becomes `quiz_ready`, and when the quiz is completed, it becomes `complete`. Progress updates do not fall behind; If the monitoring time from the client is less than the current value, the system does not allow older data to delete the progress.
The user's CEFR level, time-coded transcript, and the expressions recorded from that video are used together in the production of the Groq-supported learning package. The structure produced includes a summary, in-context flashcards, short study sections and a four-question quiz. Runtime costs are reduced by calculating ready-made catalog courses in advance; New links pasted by the user are prepared immediately upon request. The generation lease, which prevents the same package from being produced twice, and the cache behavior that reuses the ready result, make the AI layer a reliable part of the product.
Instead of independent memorization questions, the quiz reuses the actual statement heard in the video and the surrounding context.
Personal data model and secure pilot infrastructure
I set up the backend on Supabase Auth and PostgreSQL. Each user who logs in with Google has their own profile, video, subtitle segment, learning session, recorded phrase, learning package and quiz attempts. Row Level Security policies include not only the column `user_id` directly; It also verifies the owner of the video or session in indirect relationships such as subtitle and learning pack. Table access is disabled for anon and public roles, and authenticated users are only allowed to operate on their own relationships.
I handled quiz completion in a single transaction-like PostgreSQL function: it checks that the session is at the correct stage, user ownership, and that no results have been written before; saves the attempt and moves the session to state `complete` within the same contract. In import, material production and progress APIs, body verification, UUID and URL checks, time limit, provider timeouts, quota errors and clearable retry behaviors are managed separately.
Visual system: not a lecture app, but a live learning operating system
I moved Lurneo's interface away from the gray sidebar, crowd of badges and corporate card aesthetics in classic e-learning panels. On the landing side, large compressed typography, green signs, poster composition and orange-purple-blue vertical program strips are used. Within the product, Home is divided into green, Videos orange, Study purple and Words blue working mode. Bold outlines, gently tilting cards, large headers and low-slung dock navigation give the app a playful but not childish rhythm.
While the desktop retains a single large rounded work surface and the dock below, on mobile the same modes translate into the natural vertical flow of the small screen. Card heights change depending on the content, word cards can turn to meaning face, and active video/transcript behavior works with touch. Route changes and card entries are managed from the GSAP-based central transaction layer; The `prefers-reduced-motion` and route cleanup behaviors prevent animation from interfering with navigation.
From web application to installable learning tool
I developed Lurneo on Next.js 16 and React 19, with landing, Google login, Home, Videos, Study, Words, profile and license routes. The application can be installed as a standalone application on a phone or tablet with the manifest, Apple icon and maskable PWA icons. Responsive product anatomy particularly supports tablet/PWA use; While watching the video, the user can access the transcript and replay tools without feeling like a browser tab.
The live version runs on Vercel. The product's source code, Supabase migrations, catalog production/verification tools and comprehensive Node tests are kept in the same project. While preparing the portfolio narrative, I revalidated the live landing, existing work tree, video import and learning suite APIs, data policies, session model, and actual product screens. For me, Lurneo was a work where content consumption, language learning pedagogy, AI production, media platform boundaries and a strong consumer product identity were combined in a single system.
