Vertex
An AI-driven learning platform that responds to plain-English questions with ranked cards, each linking directly to the precise second in a lesson video where the content is covered. It was developed as a watch-and-build project based on the JavaScript Mastery tutorial "Build and Deploy a Full Stack Learning Platform | Search Any Video, Jump to the Exact Second" and expanded beyond the original tutorial's scope.
- Role
- Build-along learner & implementing engineer
- Duration
- 1 week
- Year
- 2026
- Type
- Tutorial build-along
Problem
Course videos function as a black box. A learner seeking a particular concept — such as how caching in server components works — must guess which lesson covers it and then sift through a 25-minute video to locate the exact moment. Keyword searches of lesson titles often fail to find it, and a chatbot relying on the model's memory might invent courses, lessons, and timestamps that don't actually exist.
Solution
Credit: This project involves a comprehensive review and development process based on the JavaScript Mastery (@javascriptmastery) tutorial titled "Build and Deploy a Full Stack Learning Platform | Search Any Video, Jump to the Exact Second," published on 21 August 2026 — https://www.youtube.com/watch?v=8DfvwZ812dM. The tutorial emphasises that the AI plans initially, seeks approval, and implements each feature via reviewed pull requests, guided by agent skills, context files, and an AGENTS.md document. I followed this methodology throughout the process and continued developing the system. The search functionality uses the Sanity Context MCP integrated with an LLM that generates GROQ queries over the deployed schema, displaying results as ranked cards rather than a chatbox, and is designed to be grounded so no content outside the dataset appears. An offline ingestion pipeline processes each video into timestamped transcript segments and chapter markers; timestamps prioritize chapter resolution and default to transcript text if necessary. Results deep-link to the respective lesson page with a ?t= start second parameter, which the embedded provider supports, ensuring playback stays within the site. Beyond the tutorial, additional features include the "Signal" design system with zero-flash light/dark themes, an interactive in-lesson transcript panel, a grounded Q&A feature titled "Ask this lesson" with verified citation timestamps, offline-generated quizzes with streak tracking, curated collections and learning paths by authors, learner progress tracking, playback resumption, engagement analytics via PostHog, and an installable Progressive Web Application (PWA) with offline capabilities. Security is maintained through a private dataset, server-only Sanity read and write tokens, Clerk middleware authorization, and the restriction that no tokens or content are ever accessible directly from the browser.