Case Study

AI Learning — RAG Guide

Live

An interactive retrieval-augmented generation curriculum with 58 lessons, quizzes, and browser-based demonstrations.

By Jaypal Sagar · Engineering case study

Stack
Next.js · React · TypeScript · Tailwind CSS
Live
Visit →
Repo
View →
Screenshots TBD

What the RAG learning app does

AI Learning is a web curriculum covering retrieval-augmented generation (RAG), from tokens and vectors through retrieval, evaluation, advanced architectures, and production concerns. It also includes an AI-enabled software development lifecycle and reference material.

The live app contains 58 lessons and 877 content blocks. Learners can open individual lessons, search the curriculum, filter the lesson library by level, or read the complete guide on one page.

The learning problem

RAG combines several concepts that are easier to understand when explored separately: turning text into chunks, comparing embeddings, retrieving passages, and grounding an answer. The app combines explanations with small interactive exercises so learners can inspect these steps.

Interactive examples

The browser demos cover tokenization, chunking, cosine similarity, keyword versus dense retrieval, evaluation metrics, and prompt critique. Quizzes and runnable examples appear alongside the relevant lessons.

The featured playground retrieves passages from a small HR handbook and shows supporting citations. It uses simplified hashed embeddings and local answer construction. It does not call an LLM or use a neural embedding model; it demonstrates mechanics rather than production answer quality.

Architecture and implementation

Next.js and React render the course. Curriculum content is structured as TypeScript data and shared between the overview, lesson routes, and complete guide. Interactive components load near the viewport.

A static search endpoint provides the course search index. Completion progress and theme preferences are stored in the learner's browser. Progress is local to that browser; it is not an account-based cross-device learning record.

Improving navigation without losing content

The home page includes a start/resume card, a three-step learning roadmap, and a searchable lesson library with difficulty filters and completion states. Individual lesson pages retain previous/next navigation, and existing hash links resolve to the corresponding lessons.

The homepage update preserved all 58 lessons and 877 content blocks. Project checks verify lesson IDs, quiz and runnable-demo references, SDLC ordering, and the playground's refusal of an unrelated question.

Explore the project

Open the live RAG learning app or read the source on GitHub. For another document retrieval project, see the JayPalGPT case study.