DEV Community: Yash Maheshwari

We Built a RAG-Powered AI Question Engine Into a JavaScript Interview Platform - Here's Exactly How It Works

Yash Maheshwari — Wed, 08 Apr 2026 09:36:21 +0000

This is what happens when you stop treating an interview prep platform like a CRUD app.

Someone writes questions. Someone formats them. They get pasted into a database. Users read them.

That's it. That's the entire "AI" story at most platforms - a ChatGPT wrapper that answers whatever you type, with zero context about what you've already practiced, zero awareness of duplicate content, and zero intelligence about what question should exist next.

JSPrep Pro went a different direction.

We built an actual AI pipeline - one that generates questions using RAG (Retrieval-Augmented Generation), checks for semantic duplicates using embedding-based cosine similarity, runs on an automated weekly cron, and feeds into a manual QA + approval workflow before anything touches the question bank.

This article provides a comprehensive technical breakdown. If you're a developer who wants to understand how these systems work - and wants to try a JavaScript interview prep platform that's actually intelligent - keep reading.

🤔 The Problem With Static Question Banks

Here's what every other JS prep platform does:

Someone writes 100 questions manually
They get seeded into a database
They sit there forever
The platform has 100 questions for the next 3 years

The problems:

Questions go stale. JavaScript evolves. structuredClone, Array.at(), Promise.withResolvers() - If your question bank was written in 2021, it doesn't reflect what interviewers are asking in 2026.
Duplicate questions are everywhere. When you manually write hundreds of questions across categories, you inevitably repeat yourself. Two different phrasings of "what is a closure?" pollute the same bank.
No semantic intelligence. The AI doesn't know what questions already exist when generating new ones, so it generates what it's already covered.

We wanted to fix all three. Here's how.

🧠 The Architecture: Four Layers

Firestore          → Source of truth (questions + embeddings)
Embeddings         → Intelligence layer (what does each question mean?)
Similarity Search  → Retrieval engine (what already exists nearby?)
AI (Groq/LLaMA)    → Reasoning layer (generate, evaluate, explain)

Each layer has a specific job. None of them does too much. This separation is why the system is actually maintainable and extensible.

📐 Layer 1: Embeddings - Giving Every Question a Mathematical Identity

An embedding converts text into a vector - a list of numbers that represents the semantic meaning of that text in multi-dimensional space.

Two questions that mean the same thing, even if phrased differently, will have similar vectors. Two questions about completely different concepts will be far apart in that space.

// What an embedding looks like (384 numbers for MiniLM-L6-v2)
[0.023, -0.147, 0.891, 0.034, -0.562, ...] // 384 dimensions

The tricky part: you can't just embed the question title. That loses too much signal. We embed type-aware inputs - different fields combined based on what type of question it is:

function buildEmbeddingInput(question) {
  if (type === 'output') {
    // What matters: the title + the code + the expected output
    return `${title} ${code} Output: ${expectedOutput}`
  }

  if (type === 'debug') {
    // What matters: the title + what the bug is + the broken code
    return `${title} Bug: ${bugDescription} ${brokenCode}`
  }
  // Theory: the title + the full answer + the explanation
  return `${title} ${answer.stripHTML()} ${explanation}`
}

Why does this matter? Consider two output questions:

"What does this print?" + code that tests var hoisting
"What does this print?" + code that tests Promise resolution order

Both have the same title. But their embeddings are far apart because the code and output are semantically very different. If you only embedded the title, the similarity search would think they're duplicates. Embedding the full context makes it accurate.

Model choice: We use embed-english-light-v3.0 from Cohere - 384 dimensions, completely free on the trial tier, works on Vercel serverless without any model download or cold start issues.

🔍 Layer 2: Cosine Similarity - Finding What Already Exists

Once every question has an embedding, we can find "nearby" questions mathematically. The metric is cosine similarity - it measures the angle between two vectors, returning a score from 0 to 1.

function cosineSimilarity(a: number[], b: number[]): number {
  let dot = 0, normA = 0, normB = 0
  for (let i = 0; i < a.length; i++) {
    dot   += a[i] * b[i]
    normA += a[i] * a[i]
    normB += b[i] * b[i]
  }
  return dot / (Math.sqrt(normA) * Math.sqrt(normB))
}

Score > 0.85 → near-duplicate → reject
Score 0.5–0.85 → related question → show as context
Score < 0.5 → distinct question → safe to add

We don't use a vector database for this. With ~200 questions, pure in-memory cosine similarity runs in under 10ms. The entire similarity search is:

function findSimilarQuestions(targetEmbedding, questions, topK = 5) {
  return questions
    .filter(q => q.embedding?.length > 0)
    .map(q => ({
      ...q,
      score: cosineSimilarity(targetEmbedding, q.embedding)
    }))
    .sort((a, b) => b.score - a.score)
    .slice(0, topK)
}

No LangChain. No Pinecone. No infrastructure overhead. Pure math that works perfectly at this scale.

🤖 Layer 3: RAG - Making the AI Context-Aware

This is where it gets interesting.

RAG (Retrieval-Augmented Generation) means: before asking the AI to generate something, retrieve relevant existing content and include it in the prompt. The AI now knows what already exists and won't repeat it.

Here's the pipeline for generating a new question:

// Step 1: Get a seed embedding for the topic
const seedEmbedding = await getEmbedding(`${topic} ${category} JavaScript interview`)
// Step 2: Find the most similar existing questions
const similar = findSimilarQuestions(seedEmbedding, allQuestions, 5)
// Step 3: Build RAG context string
const ragContext = `Related questions already in the database:
- [output] What happens when you use var inside a for loop? (Closures & Scope)
- [theory] Explain closure with a practical example (Closures & Scope)
- [debug] Fix the stale closure in this React useEffect (Closure Traps)`
// Step 4: Inject into the AI prompt
systemPrompt += `
${ragContext}

IMPORTANT: Do NOT generate a question similar to any of the above.
Cover a distinct angle, edge case, or sub-concept.

The AI now generates a question that's aware of what already exists. Without RAG, you'd inevitably get question #47 about closures, which is basically question #12 again with different wording. With RAG, the AI actively avoids that.

Multi-model approach:
Groq + LLaMA 3.3 70B → Question generation, answer evaluation, AI tutoring (free, 500 tokens/sec)
Cohere embed-english-light-v3.0 → Embeddings for similarity (free trial)

Two models, two jobs. Neither does the other's job.

⚙️ Layer 4: The Generation Pipeline

Here's the full flow when a new question gets generated, from click to Firestore:

Admin clicks Generate
        ↓
Fetch all existing questions + embeddings from Firestore
        ↓
Generate seed embedding for the topic (Cohere)
        ↓
Run similarity search → find top 5 related questions
        ↓
Build RAG context from similar questions
        ↓
Call Groq/LLaMA with RAG-enriched prompt
        ↓
Parse the generated question JSON
        ↓
Generate embedding for the new question (Cohere)
        ↓
Dedup check: cosine similarity against all existing questions
        ↓
If similarity > 0.85 → flag as duplicate
If similarity ≤ 0.85 → mark as safe
        ↓
Return candidate with similarity score + top similar questions
        ↓
Admin reviews in UI → Approve or Reject
        ↓
On Approve: save to Firestore with embedding + auto-generated slug
Every step has a purpose. The dedup check means a human never has to manually check "does this already exist?" The RAG context means the AI rarely generates something repetitive in the first place. The manual approval step means nothing bad gets into the question bank automatically.

⏰ The Weekly Cron Pipeline

The real power is when this runs automatically.
Every Monday at 9 am UTC, a Vercel cron job triggers /api/cron:

// vercel.json
{
  "crons": [{ "path": "/api/cron", "schedule": "0 9 * * 1" }]
}

The cron iterates through a set of generation targets - categories that need more content:

const GENERATION_TARGETS = [ { type: 'theory', category: 'Async JS', topics: ['Promise.allSettled', 'AbortController'] }, { type: 'output', category: 'Event Loop', topics: ['microtask queue order', 'Promise chaining'] }, { type: 'debug', category: 'Async Bugs', topics: ['missing await', 'Promise rejection'] }, // ... 7 categories total ]

For each target, it runs the full RAG pipeline and saves the result to a questions_pending collection, not questions directly. Nothing goes live automatically.

await addDoc(collection(db, 'questions_pending'), {
  ...generatedQuestion,
  embedding,
  topSimilar,        // the 3 most similar existing questions
  similarityScore,   // how close to the nearest duplicate (0–1)
  status: 'pending', // pending | approved | rejected
  generatedAt: Timestamp.now(),
})

🎛️ The Admin QA Interface

Monday morning, the admin visits /admin/generate and clicks "Cron Queue".
They see everything generated overnight:

┌─────────────────────────────────────────────────────────────┐
│ [output] [core]  23% similar                                │
│ What does Promise.allSettled return when promises reject?   │
│ Similar to: "What does Promise.all do?" (23%)               │
│                        [Preview ▾]  [✓ Approve]  [✗ Reject] │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ [debug] [medium]  ⛔ DUPLICATE  91% similar                 │
│ Fix the missing await in this async function                │
│ Similar to: "Debug: async function not returning" (91%)     │
│                                            [✗ Reject]       │
└─────────────────────────────────────────────────────────────┘

The similarity score tells you immediately whether something is worth reading carefully or should just be rejected. Duplicates are auto-flagged and can't be approved - the Approve button is hidden if isDuplicate === true.

For non-duplicates, clicking Preview expands:

The full question (code, answer, explanation)
The top 3 most similar existing questions (so you can judge fit)
The exact bug description / expected output / full answer

One click to approve → it saves to Firestore with embedding, auto-generated slug, and publishes immediately. The whole review process takes about 5 minutes per batch.

🔬 How This Makes the AI Tutor Smarter

The embeddings don't just serve the generation pipeline. They improve the real-time AI features, too.

When a user opens a question and asks the AI Tutor a follow-up, the system now runs a similarity search first:

// Find questions related to what the user is asking about
const similar = findSimilarQuestions(questionEmbedding, allQuestions, 5)
// Inject as context into the AI tutor prompt
systemPrompt += `
Related questions in the database:
${similar.map(q => `- [${q.type}] ${q.title}`).join('\n')}
Build on or contrast these. Avoid repeating what they already cover.
`

The AI tutor now gives answers that connect to related concepts instead of explaining each question in isolation. Ask about closures, and the AI knows you've probably also seen the closure-in-loops question and won't re-explain the same thing.

Same for Evaluate Me - when your answer is being scored, the evaluator has context about related concepts and can probe whether you understand the broader picture, not just the specific question.

📊 The Numbers

Feature Stack Cost Question generation Groq LLaMA 3.3 70B Free Embeddings Cohere embed-english-light Free Similarity search Pure JS cosine similarity $0 Cron scheduling Vercel Cron Free Database Firestore Free tier Hosting Vercel Free tier

Total infrastructure cost for the AI pipeline: $0/month.

This is important because it means the system scales. As the question bank grows from 200 to 500 to 2000 questions, the only thing that changes is the in-memory similarity computation, which stays under 50ms for up to 5,000 questions.

🆚 How This Compares to Other Platforms

Other platforms: JSPrep Pro, Question quality control Manual only RAG dedup + manual approval AI answers Generic ChatGPT wrapper Context-aware with RAG New questions Written by humans occasionally Weekly automated pipeline Duplicate detection None Cosine similarity (0.85 threshold) AI aware of question bank No Yes - via embeddings Question format Theory only Theory + output + debug Interview simulation None Timed sprint, 3 question types

The biggest difference isn't any single feature. It's that the AI actually knows what it's working with. Most platforms have an AI bolted on the side. JSPrep Pro has AI embedded in the core loop - generation, deduplication, retrieval, and evaluation.

🚀 What This Means For You As a Developer Preparing for Interviews

All of this infrastructure serves one goal: you get better question quality, faster.

Questions are semantically diverse - the similarity search prevents redundant coverage of the same concept
Questions stay current - the weekly pipeline adds new questions automatically as JavaScript evolves
The AI tutor is context-aware - it knows what you're practicing and what related concepts you might be missing
The answer evaluator is more precise - it evaluates depth, not just surface-level coverage

And you get to practice with three question types that test completely different skills:

Theory → Can you explain it clearly? (AI-evaluated)
Output → Can you execute JavaScript mentally?
Debug → Can you diagnose broken code?

All three in a single timed sprint that mirrors what a real JavaScript interview actually feels like.

💻 Try It Now - No Account Required

The sprint is completely free, no signup:

👉 Try Sprint
5 questions, fully timed, all three question types. When you finish, you'll see a shareable scorecard with your accuracy, strengths, and weak areas.

That 10-minute sprint will tell you more about your JavaScript interview readiness than an hour of reading documentation.

🧵 The Stack Summary

If you want to replicate this architecture for your own project:

Groq API (llama-3.3-70b-versatile)  → LLM inference, free
Cohere API (embed-english-light-v3)  → Embeddings, free trial
Pure JS cosine similarity            → Vector search, no infrastructure
Firestore                            → Stores embeddings as number[]
Vercel Cron                          → Weekly generation trigger
Next.js API routes                   → Pipeline endpoints

No LangChain. No vector database. No complex orchestration framework. The concepts (RAG, embeddings, similarity search) are powerful. The implementation doesn't need to be complicated.

[Boost]

Yash Maheshwari — Sat, 14 Mar 2026 14:26:59 +0000

Stop Reading Docs. Start Passing JavaScript Interviews.

Yash Maheshwari ・ Mar 13

#javascript #ai #webdev #programming

Stop Reading Docs. Start Passing JavaScript Interviews.

Yash Maheshwari — Fri, 13 Mar 2026 10:43:45 +0000

You've been preparing for weeks.
You've read MDN cover to cover. You've gone through JavaScript.info. You've watched hours of YouTube tutorials. You feel like you know JavaScript — closures, the event loop, prototypes, async/await.
Then the interviewer asks: "What does this code output?"

javascriptfor (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0)
}

You freeze.
Not because you don't know JavaScript. Because you've never actually practiced JavaScript the way interviews test it.
That's the gap. And it's the exact gap JSPrep Pro was built to close.

The Real Reason Developers Fail JavaScript Interviews
Here's something nobody tells you: interview performance is a separate skill from JavaScript knowledge.
You can deeply understand closures and still stumble explaining one under pressure. You can know the event loop inside out and still blank on predicting output from a nested setTimeout. You can have built real-world apps and still get caught on a hoisting question.
The problem isn't your knowledge. It's that you've been training for a marathon by reading about running.

MDN is documentation — it tells you what things are. JavaScript.info is a textbook — it teaches you how things work. Neither of them trains you to perform under interview conditions. Neither simulates the pressure. Neither gives you feedback on your actual answers. Neither tells you which topics to focus on or how you're improving week over week.

For that, you need a platform built specifically for JavaScript interview preparation.
That platform is JSPrep Pro.

What JSPrep Pro Is — And Why It's Different
JSPrep Pro is not another documentation site with a quiz slapped on top. Every single feature on the platform exists for one purpose: to make you perform better in your next JavaScript interview.
Here's what makes it different.

⚡ The Sprint — The Closest Thing to a Real Interview
This is the feature that changes everything.
The JavaScript Interview Sprint drops you into a timed, mixed-format session that replicates exactly what a real technical interview feels like. You pick your length — 5, 10, 15, or 20 questions — and the clock starts.
You face three types of questions in a single session:
Theory — "Explain event delegation and why it matters." You write your answer as you would in an interview. No multiple choice. No hints. Just you and a text box.

Output Prediction — "What does this print?" You type your exact prediction. This is the most brutal and most valuable practice format that exists because it forces your brain to execute code mentally, step by step.

Debug Challenges — You're shown broken code. Find the bug. Explain what's wrong. These are the async race conditions, closure traps, and this context losses that trip up even experienced developers.
When the sprint ends, you get a full debrief: your score, your accuracy percentage, which categories you're strong in, which are weak, and a shareable score card you can screenshot and post.
Every sprint is saved to your history. Run one sprint a day for two weeks and your Analytics page tells you a story — where you started, where you are, which categories improved, which still need work.
No other prep platform does this. LeetCode has algorithmic challenges. Flashcard apps have definitions. Nothing combines theory, output prediction, and debugging into a single timed session that mirrors the real thing.

Try it free, no account needed: jsprep.pro/sprint

📚 150+ Questions. Three Formats. Zero Filler.
JSPrep Pro has 150+ questions across three distinct modes — each targeting a different interview skill.

Theory Questions (91 questions)

"What is a closure?" "Explain this binding." "What's the difference between == and ===?"
Every question has a full written answer. But more importantly, every question has the Evaluate Me feature — you type your answer as you'd give it in an interview, and the AI scores it 1–10, tells you what you got right, what you missed, and gives you a better phrasing to use next time.
This turns passive reading into active recall. Active recall is what actually builds memory.
Output Quiz (66 questions)
Short code snippets across closures, hoisting, the event loop, type coercion, and this binding. You type the exact output. No hints, no multiple choice.
This is the single best exercise for building an accurate mental model of how JavaScript executes. If you can consistently predict output correctly, you can handle almost any JavaScript interview question — because you understand how the engine actually thinks.
Debug Lab (38 questions)
Real broken code with real bugs: async functions that miss await, closures that capture the wrong value, promises that never resolve, this that points nowhere. You spot the issue, and the fix is shown with a full explanation of why it broke and how to avoid it.
Questions are filterable by category and difficulty. Bookmark any question to revisit. Every question links to its topic hub for deeper context.

🗺️ Topic Hubs — The Curriculum MDN Never Gave You
Go to jsprep.pro/topics and you'll find something no documentation site offers: a structured interview curriculum.
Every major JavaScript concept has a dedicated hub:

Closures & Scope
The Event Loop
Promises & Async/Await
Prototypal Inheritance
this Binding
Generators & Iterators
ES6+ Features
JavaScript Modules
Memory Management
And 25+ more

Each hub tells you the difficulty level (Beginner → Senior), how often this topic appears in interviews at different company tiers, and gives you a full explanation written specifically for interview contexts — not as documentation, but as how to understand and explain this concept when someone is evaluating you.
Every hub links directly to the related questions in the question bank and to relevant blog posts. It's a complete learning path, not a reference sheet.
This is the structure developers spend days trying to build themselves from scattered blog posts. JSPrep Pro gives it to you in one place.

🤖 AI That Actually Helps You Get Better
JSPrep Pro has AI built into the core practice loop — not bolted on as a chatbot feature.
Evaluate Me
Write your answer to any theory question. The AI evaluates it like a senior engineer would:

Scores it 1–10
Identifies what you got right
Points out what was missing
Suggests a better answer with improved phrasing
Gives you a letter grade

This is practicing with feedback. It's the difference between shooting free throws alone versus shooting with a coach who tells you what you're doing wrong after every attempt.
AI Follow-Up
On any question, open the AI Tutor and ask anything. "Show me a real-world example." "How does this relate to React?" "What edge cases do interviewers ask about?"
It has full context of the question and answer. This turns every question into a conversation instead of a dead end.
AI Study Plan
Go to jsprep.pro/study-plan, enter your interview date, and the AI generates a personalized preparation schedule based on your actual performance data. It knows which categories you're weak in. It knows how many days you have. It tells you what to study when.

📊 Analytics — Know Exactly Where You Stand
Most developers prep blindly — they study everything and hope it sticks. The Analytics page ends that.
You get a real dashboard:

Overall progress across all three question types
Category breakdown — you might be 90% on Arrays and 35% on Closures
Sprint history with accuracy, score, and trend over time
Strengths and weak areas automatically identified from your sprint results
Streak tracking — consecutive days of practice

The data tells you something no amount of passive studying can: exactly what you need to work on next.

🏆 Leaderboard — Accountability That Actually Works
There's a weekly XP leaderboard on JSPrep Pro. You earn XP by mastering questions, completing sprints, solving output challenges, and maintaining your streak.
This sounds like a small thing. It isn't.
Knowing you're in 4th place on a Tuesday afternoon and someone just overtook you is a surprisingly effective motivator. Consistency beats cramming — and the leaderboard rewards consistency.

📅 Question of the Day
Every time you open your dashboard, there's one question waiting for you. Read it, write your answer, evaluate it, move on. Five minutes.
Do this every day for a month and you've actively recalled 30 questions with written, evaluated answers. Research is unambiguous on this: spaced, active recall beats passive re-reading by a significant margin for long-term retention.
The Question of the Day is JSPrep Pro's implementation of that principle in the smallest possible time commitment.

📋 The JavaScript Interview Cheatsheet
javascript-interview-cheatsheet
A single, dense, downloadable PDF covering every topic that regularly surfaces in JavaScript interviews. Not "everything about JavaScript" — just what interviewers actually ask about, organized so you can scan it in 20 minutes the night before an interview.
Zero fluff. Zero filler. Exactly what you need and nothing you don't.

✍️ The Blog — Interview-Focused, Not Tutorial-Focused
JSPrep Pro's blog doesn't explain what closures are. It covers things like:

"The 5 Closure Mistakes That Kill Technical Interviews"
"How Senior Developers Answer Event Loop Questions"
"Why Output Prediction Practice is the Most Underrated Interview Prep Technique"

Every post is written with one goal: to make you give better answers in your next interview. Practical, specific, and organized by the topic hubs they support.

Free vs Pro — Exactly What You Get
Free forever:

First 5 questions in every category
Full 5-question Sprint (no account required)
Question of the Day
All Topic Hubs
Blog
Cheatsheet

Pro unlocks:

All 150+ questions (theory, output, debug)
Full 10/15/20-question Sprints
AI Evaluate Me and AI Follow-Up on every question
Analytics dashboard
Sprint history
AI Study Plan

Pro is a one-time payment. No subscription. No monthly fee. Prep for your interview, pass, and keep access forever.

The 10-Minute Reality Check
Here's my challenge to you.
Close this article. Go to jsprep.pro/sprint. Start a free 5-question sprint. No account. No credit card. Takes 10 minutes.
In those 10 minutes you'll learn more about your actual interview readiness than 3 hours of reading MDN. You'll know which question types are comfortable and which make you hesitate. You'll know whether you can predict output under time pressure. You'll know whether you can explain concepts clearly in writing.
That's the point of JSPrep Pro: to show you where you actually are, not where you think you are.
And if the sprint shows gaps — which it will, for almost everyone — the platform gives you exactly what you need to close them.

The Bottom Line
MDN is for looking things up. Use it when you're building.
JavaScript.info is for learning the language. Use it when you're starting out.
JSPrep Pro is for passing JavaScript interviews. Use it when you have an interview coming up — or when you want to be ready for one before it's scheduled.
The platform was built by a developer who failed JavaScript interviews despite knowing JavaScript well. Every feature exists because it would have helped then.
It might be exactly what helps you now.
Start your free sprint at jsprep.pro →

JSPrep Pro — JavaScript Interview Preparation Platform | jsprep.pro
Free sprint available with no account required. Pro access is a one-time payment.

Mastering React Query with getServerSideProps in Next.js

Yash Maheshwari — Fri, 30 May 2025 19:13:35 +0000

In this article, I walk through how to integrate React Query with getServerSideProps in a Next.js app. Learn how to:

Use Hydrate and dehydrate for SSR
Manage server-side caching
Optimize for SEO and performance

Read the full article on Medium: Mastering React Query with getServerSideProps

Would love your thoughts, feedback, and improvements!