Production

Digital Governance & Citizen Welfare Platform

SuryaPura Gram Portal (Gaon2)

SuryaPura Gram Portal bridges the rural digital divide by replacing paper-based panchayat applications with an intuitive, mobile-friendly Web platform. It features bilingual Hindi & English UI, dark/light high-contrast themes for outdoor visibility, instant QR-code document validation, and zero-latency local state persistence.

GitHub Repository Live Web Application

Status

Production

Stack

React 19, Vite, Tailwind CSS, Lucide Icons, QR Code Engine, Local Sync PWA

Throughput / Users

10,000+ Citizens

Performance

98/100 Lighthouse

System Architecture & Problem Statement

Core Problem Solved: Villagers often have to travel miles to government offices and wait in long queues for basic certificates, facing transparent tracking issues and lost paperwork.

Architecture Layers:

1React SPA Frontend: Lightweight component architecture tuned for low-bandwidth 2G/3G rural mobile networks.

2Multi-Lingual Internationalization Engine: Dynamic dictionary translation provider allowing one-click Hindi/English switching across all forms.

3Digital QR Code Cryptographic Verification: Generates unique tamper-evident verification URLs encoded inside client-side SVG QR codes.

4Offline LocalSync Persistence: Automatically caches application progress, submitted complaints, and certificate status in browser LocalStorage.

Key Product Features

Online Gram Panchayat Certificate Application Engine (Income, Birth, Caste, Residence)

PM-Kisan & Welfare Scheme Discovery & Application Tracking

Bilingual Interface (Hindi & English) with Instant Toggle

Digital QR Verification for Issued Panchayat Certificates

Public Grievance Redressal & Complaint Tracking System

High-Contrast Dark/Light Mode tuned for sunlight readability

Low-Bandwidth PWA Offline Support for Rural Mobile Users

Database Entity Schema & Relationships

Citizens

Collection/Table

idattr

aadharNumberattr

fullNameattr

fatherNameattr

villageWardattr

mobileNumberattr

→ Submits certificate applications and grievances

Applications

Collection/Table

idattr

citizenIdattr

serviceTypeattr

statusattr

submittedAtattr

qrVerificationCodeattr

→ Belongs to Citizen

Grievances

Collection/Table

idattr

citizenIdattr

categoryattr

descriptionattr

statusattr

assignedOfficialattr

→ Belongs to Citizen

API Specifications & Endpoints

POST/api/gram/applications

Submit a new certificate request with citizen details.

GET/api/gram/verify/:qrCode

Public verification endpoint returning official certificate validity status.

POST/api/gram/grievances

GET/api/gram/schemes

Fetch active central & state government welfare schemes.

Interactive Visual Screenshots & Previews

Desktop Panchayat Citizen Portal

LIVE SIMULATION

सूर्यपुरा ग्राम पंचायत ई-गवर्नेंस पोर्टल

डिजिटल प्रमाणित (QR Verified)

आवेदक का नाम (Applicant)

Rahul Shaikh

आय प्रमाण पत्र: जारी (Approved)

QR SECURE

Scan for Instant Verification

Modern dashboard showing quick citizen services, active applications, and village notices.

Digital QR Verification Engine

LIVE SIMULATION

सूर्यपुरा ग्राम पंचायत ई-गवर्नेंस पोर्टल

डिजिटल प्रमाणित (QR Verified)

आवेदक का नाम (Applicant)

Rahul Shaikh

आय प्रमाण पत्र: जारी (Approved)

QR SECURE

Scan for Instant Verification

High-contrast verification screen validating official panchayat documents via mobile camera scan.

🚀 Quick Start & Process to Run

STEP-BY-STEP REPRODUCIBLE SETUP

Prerequisites

Node.js 18+
npm or yarn

Required Environment Variables (.env)

VITE_PORTAL_NAME=SuryaPura Gram Panchayat

VITE_DEFAULT_LANG=hi

Execution Steps:

1. Clone Repository

Download rural governance portal source code.

$ git clone https://github.com/Dev-Nurul08/SuryaPura_Gram_Portal.git && cd SuryaPura_Gram_Portal

2. Install Node Dependencies

Install React, Tailwind CSS, Lucide Icons, qrcode.react, and Vite.

$ npm install

3. Start Development Server

Launch Vite server on http://localhost:5173 with hot reload.

$ npm run dev

4. Build Static Deployment Bundle

Compile lightweight production bundle ready for deployment.

$ npm run build

Engineering Challenges & Solutions

Challenge #1: Designing a UI accessible for rural citizens with varying digital literacy levels and intermittent mobile connectivity.

Challenge #2: Ensuring certificate authenticity without complex remote server infrastructure.

Key Lessons & Principles

Takeaway #1: Accessibility and language inclusivity are essential for public sector web applications.

Takeaway #2: Offline-first data persistence ensures continuous usability in network-sparse environments.