Inspiration

Over 650 million Indians live in rural areas, yet most digital platforms cater to urban, English-speaking users. Farmers miss PM-KISAN installments, women are unaware of Ujjwala Yojana, and daily-wage workers don't know about e-Shram — simply because information never reaches them in their language. We built GramSeva to bridge this gap: one bilingual, voice-enabled platform that puts government schemes, live crop prices, health guidance, and legal rights in the hands of every villager.

What it does

GramSeva is a mobile-first, bilingual (Hindi/English) web app with five core modules:

  • Schemes Discovery — Browse 20+ government schemes with eligibility filters, category tabs, bookmarks, voice search, and one-tap apply.
  • Live Mandi Prices — Real-time crop prices for 15 crops across 75+ UP districts with trend indicators, sparkline charts, an earnings calculator, and price alerts.
  • Health Help — Symptom checker, emergency helplines, and bilingual health guidance.
  • Know Your Rights — Simplified legal rights on land, labour, women's rights, and RTI.
  • Voice Search — Speak in Hindi or English from the home screen to instantly find relevant schemes.

It also features a live weather widget with crop advisories, a scrolling agriculture news ticker, animated splash screen, dark mode UI, skeleton loaders, toast notifications, language toggle, and an admin dashboard.

How we built it

  • Frontend: React 18 + Vite with lazy-loaded code splitting, Framer Motion animations, and a custom dark-mode CSS design system — zero UI library dependencies. 13 hand-built reusable components.
  • Backend: Node.js + Express REST API with 5 route modules (schemes, mandi, health, rights, applications). Secured with Helmet, CORS, rate limiting, JWT auth, and bcrypt.
  • Database: Supabase (PostgreSQL) for persistent storage with server-side caching via node-cache.
  • APIs: Gemini AI for intelligent recommendations, OpenWeatherMap for crop advisories, and AGMARKNET-sourced mandi data.
  • Architecture: Clean API client with retry logic, timeout handling, and snake_case-to-camelCase normalization between backend and frontend. Custom React hooks (useApi, useSpeech, useLanguage) abstract all async logic.

Challenges we ran into

  • Bilingual data at every layer — Not just UI labels, but every scheme name, crop name, and health advisory needed accurate Hindi (Devanagari) translations. We manually curated data for 20 schemes and 15 crops.
  • Voice recognition for Hindi — Browser Web Speech API for hi-IN is unreliable across devices. We built graceful fallbacks with demo mode.
  • Backend-frontend data sync — Supabase uses snake_case, React expects camelCase. We built normalization layers to map fields like title_hindi → hindi and previous_price → prevPrice seamlessly.
  • Performance on low-end devices — Our target users have budget phones, so we optimized with React.lazy, useMemo, useCallback, React.memo, skeleton loaders, and minimal bundle size.

Accomplishments that we're proud of

  • Built a fully functional full-stack app with real Supabase integration, not just a frontend prototype.
  • Every single screen works in both Hindi and English with one-tap language switching.
  • Voice-first design that lets low-literacy users speak a query like "PM Kisan ke liye apply karna hai" and get matched schemes.
  • Premium dark-mode UI with smooth Framer Motion animations, glassmorphism cards, and micro-interactions — designed to feel polished, not like a hackathon MVP.
  • Modular architecture with 13 reusable components, custom hooks, and clean API separation that makes the codebase maintainable and extensible.

What we learned

  • Designing for low-literacy users is fundamentally different — large tap targets, emoji-driven navigation, voice-first interaction, and minimal text.
  • i18n architecture must be planned from day one, not bolted on later. Translation touches data, search, voice, and UI.
  • Real government data is fragmented and inconsistent — robust normalization and error handling are essential, not optional.
  • Full-stack integration (React ↔ Express ↔ Supabase) taught us the importance of API contracts, consistent field naming, and graceful error states.

What's next for GramSeva

  • Bhashini API integration for production-grade Hindi and regional language voice input.
  • PWA + offline mode with service workers so the app works with zero connectivity.
  • Push notifications for scheme deadlines and mandi price alerts.
  • AI chatbot powered by Gemini to answer scheme-related questions in natural Hindi conversation.
  • Community module where farmers can share tips, ask questions, and help each other.
  • Expansion beyond UP to cover all Indian states and regional languages.

Built With

  • express.js
  • framer-motion
  • geminiapi
  • jest
  • lucide-react
  • node-cache
  • node.js
  • openweathermap-api
  • postgresql
  • react-19
  • supabase
  • supertest
  • tailwind-css
  • vite
  • web-speech-api
Share this project:

Updates