The latest articles on Forem by Harsh Sharma (@harsh9887). https://forem.com/harsh9887 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3853217%2F45244818-a644-44ce-884b-2ab1e69ee029.png https://forem.com/harsh9887 en Harsh Sharma Tue, 31 Mar 2026 10:12:19 +0000 https://forem.com/harsh9887/building-an-ai-powered-upsc-platform-with-nextjs-15-supabase-gemini-3-flash-4noo https://forem.com/harsh9887/building-an-ai-powered-upsc-platform-with-nextjs-15-supabase-gemini-3-flash-4noo <h2> Why We Built Vaidra </h2> <p>Over a million students attempt India's UPSC Civil Services Exam every year. Most lack access to quality coaching. We built<br> <a href="https://vaidra.in" rel="noopener noreferrer">Vaidra</a> — a free, AI-powered platform to democratize UPSC preparation.</p> <p>## Tech Stack</p> <ul> <li> <strong>Frontend:</strong> Next.js 15 + React 19 (App Router, Server Components)</li> <li> <strong>Styling:</strong> Tailwind CSS + Framer Motion (spring physics animations)</li> <li> <strong>Backend:</strong> Self-hosted Supabase (PostgreSQL 15.8) on VPS</li> <li> <strong>AI:</strong> Google Gemini 3 Flash with native structured output (<code>responseSchema</code>)</li> <li> <strong>Payments:</strong> Razorpay</li> <li> <strong>Maps:</strong> Mapbox GL</li> <li> <strong>Hosting:</strong> Vercel + VPS (PM2 cluster, 8 instances)</li> </ul> <p>## Architecture Decisions That Matter</p> <p>### Event-First Data Architecture</p> <p>Every user action is logged as an immutable event in <code>user_events</code>. This is our single source of truth. We never UPDATE or DELETE events — append<br> only.</p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> 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. --- </code></pre> </div> ai nextjs webdev react