DEV Community

Harsh Sharma
Harsh Sharma

Posted on

Building an AI-Powered UPSC Platform with Next.js 15, Supabase & Gemini 3 Flash

Why We Built Vaidra

Over a million students attempt India's UPSC Civil Services Exam every year. Most lack access to quality coaching. We built
Vaidra — a free, AI-powered platform to democratize UPSC preparation.

## Tech Stack

  • Frontend: Next.js 15 + React 19 (App Router, Server Components)
  • Styling: Tailwind CSS + Framer Motion (spring physics animations)
  • Backend: Self-hosted Supabase (PostgreSQL 15.8) on VPS
  • AI: Google Gemini 3 Flash with native structured output (responseSchema)
  • Payments: Razorpay
  • Maps: Mapbox GL
  • Hosting: Vercel + VPS (PM2 cluster, 8 instances)

## Architecture Decisions That Matter

### Event-First Data Architecture

Every user action is logged as an immutable event in user_events. This is our single source of truth. We never UPDATE or DELETE events — append
only.


typescript
  // Step 1: Log event FIRST (must succeed)
  const { data: event } = await supabase
    .from('user_events')
    .insert({
      user_id: userId,
      event_type: 'test_completed',
      event_data: { score, time_taken }
    })
    .select('id')
    .single();

  // Step 2: Update denormalized tables for O(1) reads
  await supabase.from('user_stats_summary')
    .upsert({ user_id: userId, tests_completed: newCount });

  AI with Structured Output

  We use Gemini 3 Flash's native responseSchema for guaranteed JSON responses — no prompt hacking or string parsing needed.

  React Query Everywhere

  All data fetching uses @tanstack/react-query. No manual fetch() + useState + useEffect patterns. Centralized caching, automatic refetching,
  optimistic updates.

  Accessibility First (WCAG 2.1 AA/AAA)

  - prefers-reduced-motion support via custom hook + CSS
  - Skeleton loaders for all loading states (like Notion)
  - Comprehensive ARIA labels on every interactive element
  - Keyboard navigation throughout

  Key Features

  - AI Prelims Practice — Adaptive MCQs with instant AI explanations
  - AI Mains Evaluation — Write answers, get detailed AI feedback on structure and content
  - Daily Current Affairs — AI-curated news mapped to UPSC syllabus
  - Interactive Study Maps — Visual syllabus navigation with progress tracking
  - Government Schemes DB — Searchable database essential for both Prelims and Mains

  Why Free?

  A student in rural Bihar deserves the same prep quality as someone in Delhi coaching centres. AI lets us deliver at near-zero marginal cost. Free
  tier has full access; premium (₹99/month) adds unlimited mains evaluations.

  Try it: https://vaidra.in

  ---
  Built with Next.js 15, React 19, Supabase, and Gemini 3 Flash.

  ---
Enter fullscreen mode Exit fullscreen mode

Top comments (0)