EktaSahyog (Unity & Collaboration) 🇮🇳

Bridging India's Cultural Divide through Technology

📖 Introduction

EktaSahyog is a next-generation Unity & Collaboration platform engineered at the intersection of the MERN stack, WebGL-powered browser-native Web3D, AI-driven systems, OCR, and real-time infrastructure.

We moved far beyond static MERN applications to architect a cultural-scale digital ecosystem — fusing multilingual AI communication, low-latency real-time collaboration, interactive cultural experiences, and WebGL-powered 3D environments to digitally represent India’s unity in motion.

In a nation of 28 states, 8 union territories, and 121 languages, EktaSahyog serves one singular purpose: To Unite India. It is not just a marketplace or a learning hub; it is a National Integration Platform that uses this advanced technology to dissolve the invisible borders that divide us.

The Mission: Unity through Diversity

While others build walls, EktaSahyog builds bridges:

The Linguistic Bridge: Breaking language barriers so a Tamilian and a Punjabi can converse freely.
The Economic Bridge: Connecting a rural artisan in Kutch directly to a buyer in Kolkata.
The Social Bridge: Enabling a student in Delhi to volunteer for a cause in Kerala.
The Cultural Bridge: Helping the youth understand that our diverse traditions are part of one shared identity.

💡 Innovation: Engineering Unity

We re-engineered standard features into tools for connection:

1. Ideological Unity ("The Unity Council")

Concept: We use AI to reconnect the youth with the shared values of our nation's founders.
How: By debating with Sardar Patel (The Unifier) or Tagore (The Cultural Icon), users realize that despite diverse methods, the goal was always one: A United India.

2. Social Unity ("Digital Seva")

Concept: Transforming passive empathy into active collaboration.
How: Our Unity Projects dashboard allows cross-regional collaboration. It proves that a problem in one state is a problem for all Indians.

3. Cultural Unity ("The Metaverse Bazaar")

Concept: Replacing "transactions" with "shared experiences".
How: In our 3D world, users don't just buy objects; they celebrate festivals together. It creates a shared digital space where regional distinctions blur into a collective celebration.

4. Economic Unity ("Fair Trade Ecosystem")

Concept: Unity cannot exist without equity.
How: By removing middlemen, we ensure that wealth flows fairly from urban centers to rural creators, strengthening the economic fiber that holds the nation together.

🚀 Comprehensive Feature Suite

1. Cultural Marketplace 🛍️

Economic Unity: Empowering artisans by giving them a direct national stage.
Fair Trade: Connects buyers directly with genuine weavers, potters, and craftsmen.
Tech Under the Hood:
- Search & Discovery: Regex-based search algorithm with robust categorization and filtering for regional products.
- Payments: Integrated with Stripe (Test Mode) API for secure transaction intents.
- Data Structure: Relational schema linking distinct Artisan Profiles to their Product Catalog.

2. The Metaverse Bazaar (3D Experience) 🎆

Immersive Walkthrough: A browser-based 3D Village where users walk as avatars.
Atmosphere: Experience a digital festival with Sky Lanterns and Flower Rains.
Interactive Stalls: Visit "virtual stalls" to view authentic products in 3D space.
Tech Under the Hood:
- Engine: React Three Fiber (R3F) & Three.js.
- Optimization: Verified usage of InstancedMesh for rendering 150+ particle items (Laterns/Flowers) efficiently.
- Physics: Raycasting interaction layer combined with PointerLockControls.

3. Unity Projects & Social Stories 🤝

Projects (Action): Collaborative platform for cross-state initiatives (e.g., "Flood Relief for Assam").
Stories (Voices): A "Humans of Bombay" style feed where users share personal experiences of unity and culture.
Tech Under the Hood:
- Real-Time Updates: Stripe Webhooks (checkout.session.completed) trigger atomic updates to project funding stats.
- Crowdfunding Logic: Secure server-side validation of donation sessions ensures integrity of raised amounts.
- Social Graph: Stories feature a "Like/Comment" system (/stories/:id/like) backed by optimistic UI updates for instant engagement.

4. Learn My Culture (Community Repository) 📚

Shared Knowledge: A user-driven repository of Indian Festivals, Art, and Cuisine.
Interaction: Community members can share, like, and filter cultural stories by region.
Tech Under the Hood:
- Engagement Engine: Custom "Like" and "Share" API endpoints with local state optimism for instant UI feedback.
- Filtering: Dynamic frontend filtering logic for finding content by specific Category or Region.

5. Cultural Arcade (Gamification) 🎮

Reviving Ancient Games:
- Moksha Patam (Snakes & Ladders)
- Ganjifa (Mughal Cards)
- Pallanguzhi (Mancala)
Tech Under the Hood:
- Game Engines: Custom React State grids for board logic (Snakes & Ladders/Pallanguzhi).
- Animations: CSS3 Transforms (Rotate/Scale) for card flips and piece movements.

6. Universal Chatroom 💬

Language No Bar: Real-time AI Translation allows a Tamil speaker to chat with a Hindi speaker.
Tech Under the Hood:
- Auto-Join Logic: During login, the system extracts user.location to automatically plug the socket client into their specific regional channel (e.g., "Delhi" -> socket.join('delhi')).
- Real-Time: Socket.io event emitters for bi-directional communication.
- AI Pipeline: Direct integration with Groq SDK (llama-3.1-8b) for "Message-in-Translation-out" processing.

7. Cultural Hotspots & Interactive Map 🗺️

Discovery: A dynamic, geo-tagged map of India highlighting Heritage Sites and GI Products.
Visual Storytelling: Each hotspot features rich media and stories.
Tech Under the Hood:
- Rendering: SVG-based map projection handling coordinate mapping for hotspots.
- Interactivity: Hover-state event listeners triggering dynamic modal content delivery.

8. The Unity Council (AI + History) 🏛️

Living History: Engage in real-time, voice-enabled debates with Sardar Vallabhbhai Patel, Rabindranath Tagore, Dr. B.R. Ambedkar, and other legends.
Purpose: To provide ethical and unified guidance to the modern youth using lessons from the past.
Tech Under the Hood:
- Soul Script: Custom System Prompts injected into Llama-3-70b to enforce historical persona traits.
- Voice Engine: Native Web Speech API (window.speechSynthesis) integration with dynamic voice/pitch matching.

9. Secure & Role-Based Ecosystem 🔐

Bank-Grade Authentication:
- JWT (JSON Web Tokens): Stateless and secure session management.
- Google OAuth 2.0: One-click secure login.
Role-Based Access Control (RBAC):
- Admins: Full control over Marketplace verification and Project approval.
- Users: Detailed profile management and gamification history.
Tech Under the Hood:
- Security: Bcrypt hashing for passwords and HTTPS-only cookie policies.
- Middleware: Custom verifyToken middleware in Express to guard protected API routes.

🛠️ Tech Stack

Frontend

Framework: React.js (Vite)
Styling: Tailwind CSS (Glassmorphism & Neomorphism)
Animations: Framer Motion
Data Visualization: Recharts
Icons: Lucide React

Metaverse (3D Engine)

Core: React Three Fiber (@react-three/fiber)
Helpers: Zwei (@react-three/drei) - for Clouds, Stars, Sparkles, and Text.
Physics/Math: Three.js (Vector Math for movement)
Effects: canvas-confetti (Particle System)

Video Calling (Drishti-Milan)

Core Technology: Pure WebRTC (RTCPeerConnection)
Signaling: Socket.io (for Offer/Answer/ICE candidate exchange)
Media Capture: Native Browser APIs (getUserMedia)
STUN Servers: Google Public STUN (NAT traversal)
Architecture: P2P (Peer-to-Peer) - No external SDKs like Agora/Twilio
UI Framework: React with lucide-react icons

Backend

Runtime: Node.js
Framework: Express.js
Real-time: Socket.io (for Chat & Notifications)
Authentication: JWT & Google OAuth 2.0
Email: Nodemailer

Database

DB: MongoDB Atlas
ODM: Mongoose

AI & APIs (Groq Cloud)

Inference Engine: Groq LPU (Language Processing Unit)
Conversational AI: llama-3.3-70b-versatile (Ekta Saathi Chatbot)
Real-time Tasks: llama-3.1-8b-instant (Translation, Sentiment Analysis, Summarization, Toxicity Detection)
Computer Vision (OCR): tesseract.js (for text scanning)
Payments: Stripe Integration (Mock/Test Mode)

10. Client-Side OCR (Proprietary Implementation) 👁️

Concept: Instant identity verification without server-side processing overhead.
Tech Stack:
- Engine: Tesseract.js (WASM-based pure JS OCR engine).
- Camera: react-webcam for live frame capture.
Data Pipeline:
- Preprocessing: Custom HTML5 Canvas logic converts images to Grayscale, increases Contrast by 20%, and applies Binarization (Thresholding) to isolate text from background noise.
- Parsing Logic:
  - Name Extraction: Heuristic regex algorithms scan for "Name:" keywords or capitalize word patterns above "DOB" fields.
  - Region Recognition: Fuzzy matching against a hardcoded array of 28 Indian States.
Privacy: All processing happens locally in the user's browser (Client-Side), ensuring sensitive ID data never leaves the device during the scan phase.

11. Drishti-Milan (Next-Gen Video Calling) 📹

Concept: A cultural video calling experience that celebrates identity.
Current Features:
- Regional Aesthetics: Video borders automatically change color based on the user's state (e.g., Saffron for Maharashtra, Green for Kerala).
- Identity Badges: Displays user's location and preferred language on the video feed.
- Swap View: interactive toggle to switch positions of local and remote video.
- Report Interface: UI functionality to report users for moderation.
Tech Under the Hood:
- Pure WebRTC: Custom implementation using RTCPeerConnection and socket.io signaling.
- React State UI: Dynamic rendering of video grid and overlays.

Game Engine & Algorithms

Collision Detection: Custom path-checking logic for 3D metaverse movement.
Procedural Generation: Random tree placement and star fields in the Metaverse.
Card Physics: CSS 3D Transforms (rotate-y-180, preserve-3d) for Ganjifa.

🗂️ Project Models

The application uses a robust schema architecture:

User: Stores profile, role (admin/user), Unity Points, and gamification stats.
Product: Marketplace items with "Price in Rupees" and "Price in Points".
Order: Tracks purchases, shipping details, and payment status.
ChatMessage: Stores chat history with support for translations.
Project: Social initiatives with funding goals and volunteer tracking.
Story: User-submitted cultural stories and memories.
Culture: Informational cards about festivals, food, and traditions.
GameScore: Leaderboard tracking for arcade games.
Resource: Shared community assets (physical/digital).
Hotspot: Geo-tagged cultural locations for the map.
Community: Groups for specific interests or regions.

📂 Directory Structure

EktaSahyog/
├── server/                 # Backend API
│   ├── config/             # DB & Env Config
│   ├── controllers/        # Logic for Routes
│   ├── models/             # Mongoose Schemas (11 Models)
│   ├── services/           # Groq AI & Email Services
│   ├── routes/             # API Endpoints
│   └── index.js            # Server Entry Point
├── src/                    # Frontend Client
│   ├── Components/         # Reusable UI & Feature Components
│   ├── pages/              # Main Route Pages (Landing, Dashboard, etc.)
│   ├── context/            # Global State (Auth, Cart, Theme)
│   └── App.jsx             # Main Component & Routing
└── public/                 # Static Assets

⚡ Getting Started

Clone the Repo:

git clone https://github.com/Ankan/EktaSahyog.git
cd EktaSahyog

Install Dependencies:
```
npm install
cd server && npm install
```

Set Environment Variables: Create .env in root and server/:

MONGO_URI=your_mongodb_uri
JWT_SECRET=your_secret
GROQ_API_KEY=your_groq_api_key

Run Development Server:

# Root (Frontend)
npm run dev

# Server (Backend)
node server/index.js

📊 Data Flow Diagrams

1. Authentication Flow (Email + Google OAuth)

User Registration
      ↓
Email/Password → bcrypt Hash (10 rounds) → MongoDB User Collection
      ↓
Email Verification Token Generated (crypto.randomBytes)
      ↓
Nodemailer sends verification email
      ↓
User clicks link → isEmailVerified = true
      ↓
Login: JWT Generated (7-day expiry) + localStorage storage
      ↓
Protected Routes: verifyToken middleware validates JWT on every API call

Google OAuth Flow:

User clicks Google Login → Redirect to Google Auth API
      ↓
User approves → Google sends authorization code
      ↓
Backend exchanges code for user profile (Passport.js GoogleStrategy)
      ↓
Find or Create user in MongoDB
      ↓
Generate JWT → Redirect to frontend with token in URL params
      ↓
Frontend extracts token → localStorage.setItem('token', jwt)

2. Marketplace & Payment Flow

Browse Products → Filter by Region/Category
      ↓
Add to Cart (CartContext - React Context API)
      ↓
Checkout → Stripe Payment Intent Created (server/controllers/payment.js)
      ↓
Stripe Hosted Checkout Page (Test Mode - Card Payment)
      ↓
Success → Stripe Webhook (checkout.session.completed)
      ↓
Server validates webhook signature → Updates Order in MongoDB
      ↓
Redirect user to success page with order confirmation

3. Real-Time Chat with AI Translation

User sends message → Socket.io emit('send_message')
      ↓
Server receives → Groq AI Toxicity Check (llama-3.1-8b-instant)
      ↓
If SAFE → Groq Translation API (sourceLang → targetLang)
      ↓
Socket.io broadcast to room (joined by user.location)
      ↓
All users in region receive translated message in their language
      ↓
MongoDB ChatMessage collection stores original + translation

4. Drishti-Milan WebRTC Signaling

Caller: socket.emit('send_video_call_request')
      ↓
Server: Find receiver → socket.to(receiverId).emit('incoming_call')
      ↓
Receiver: Sees modal → Click Accept → emit('accept_video_call')
      ↓
Server: Look up caller's socketId (userIdToSocket Map)
      ↓
Server: emit('call_accepted') to caller with receiver's socket ID
      ↓
Caller: Creates RTCPeerConnection → Adds local media tracks
      ↓
Caller: createOffer() → socket.emit('webrtc_offer')
      ↓
Receiver: setRemoteDescription(offer) → createAnswer()
      ↓
Receiver: socket.emit('webrtc_answer')
      ↓
Both: Exchange ICE candidates → P2P connection established
      ↓
Direct video/audio streaming between browsers (no server relay)

5. Metaverse 3D Rendering Pipeline

User enters Metaverse → React Three Fiber Canvas mounts
      ↓
PointerLockControls activated on click
      ↓
WASD keys → Player component updates camera position (useFrame loop)
      ↓
Products fetched from MongoDB → Mapped to 3D Stall positions
      ↓
InstancedMesh renders 250+ particles (Lanterns + Flowers) efficiently
      ↓
Raycasting detects stall click → Exit PointerLock → Show ProductModal
      ↓
User buys → confetti() animation → addToCart (Context API)

⚠️ Limitations

1. Stripe Payment (Test Mode Only)

Uses sk_test_ keys — Not production-ready
Test cards work (e.g., 4242 4242 4242 4242)
Requires migration to live keys + compliance verification for real transactions

2. WebRTC Scalability

P2P Architecture: Works for 1-on-1 calls only
No SFU/MCU server for group calls
NAT traversal may fail without STUN/TURN servers in strict networks
Current STUN: Free Google servers (rate-limited in production)

3. AI Translation Latency

Groq API calls add ~500ms-1s delay per message
No local caching of translations
Fallback: Returns original text if API fails (fail-open strategy)

4. OCR Accuracy

Tesseract.js accuracy depends on image quality (~70-85% for Indian IDs)
Requires decent lighting and clear text
Fallback: Hardcoded demo data if extraction fails

5. 3D Metaverse Browser Compatibility

Requires WebGL 2.0 support
Performance issues on low-end devices (mobile)
InstancedMesh with 250+ particles may lag on Intel integrated GPUs

6. No Email Rate Limiting

Nodemailer verification emails can be spammed
No CAPTCHA or rate limit on registration endpoint

7. MongoDB Atlas Free Tier

512 MB storage limit
May hit connection limits with concurrent Socket.io users

8. Frontend Route Protection

No React Router guards — Users can manually navigate to /projects even if not logged in
API calls fail (backend verifyToken catches it), but blank page loads

9. No Image CDN

Product images stored as base64 strings in MongoDB
Bloated database size
Cloudinary/AWS S3 integration missing

🚀 Future Scope

1. Advanced Safety Features

AI Content Moderation: Integrate Groq/OpenAI vision API to detect inappropriate video content during calls
Screenshot Detection: WebRTC getDisplayMedia() to detect screen recording attempts
Time Limits: Restrict new users (<7 days) to 15-minute calls

2. Live Translation for Video Calls

Integrate Web Speech API (SpeechRecognition) for speech-to-text
Groq translate recognized speech → Send as subtitle via Socket.io
Display translated subtitles in real-time

3. Group Video Calls

Implement SFU (Selective Forwarding Unit) with mediasoup.js
Support 4-8 participants with adaptive bitrate

4. Virtual Backgrounds (AI-Powered)

TensorFlow.js BodyPix for person segmentation
Replace background with cultural images (Taj Mahal, Lotus Temple, etc.)

5. Blockchain for Artisan Verification

Polygon/Ethereum smart contracts to verify artisan authenticity
NFT certificates for handmade products

6. Mobile App (React Native)

Port core features to iOS/Android
Push notifications for chat/calls

7. Advanced AI Chatbot

Groq function calling for booking Projects/Products
Multi-turn conversation memory

8. Analytics Dashboard

Track user engagement (time in Metaverse, most-visited hotspots)
Heatmaps for 3D movement patterns

9. Gamification Leaderboards

Global/Regional leaderboards for game scores
Rewards system (badges, profile frames)

10. PWA (Progressive Web App)

Service workers for offline marketplace browsing
Install prompt for desktop/mobile

📚 What I Learned

1. WebRTC is Complex But Powerful

Understanding the signaling dance (Offer/Answer/ICE) was challenging
Learned the difference between STUN (NAT traversal) and TURN (relay) servers
Pure P2P implementation without SDKs like Agora saved costs but increased complexity
Key Insight: Always map database IDs to socket IDs serverside to avoid routing errors

2. React State Management for Real-Time Apps

useState causes re-renders — Bad for video streams
useRef is essential for WebRTC (peerConnectionRef, localStreamRef)
Lesson: Never store video elements in state, always use refs

3. Socket.io Event Architecture

Room-based broadcasting (socket.join(location)) enables regional chat
socket.to(targetSocketId) for targeted events (video call signaling)
Always clean up listeners with socket.off() in useEffect cleanup

4. 3D Optimization with React Three Fiber

InstancedMesh is 10x faster than 250 individual <mesh> components
useFrame loop runs at 60fps — Keep logic minimal
useMemo prevents recreating geometry on every render
Mistake: Initially rendered each flower as a separate component → 15fps
Fix: InstancedMesh with matrix updates → 60fps

5. AI Integration Challenges

Groq API is fast (~500ms) but requires careful prompt engineering
JSON mode (response_format: {type: 'json_object'}) prevents hallucinated text
Toxicity Detection: Binary classification (TOXIC/SAFE) more reliable than sentiment scores
Cost: llama-3.1-8b-instant is free but rate-limited — Need fallback logic

6. OCR is Imperfect

Tesseract accuracy varies wildly (70-95%) based on preprocessing
Grayscale → Contrast → Binarization pipeline improved results by 30%
Regex parsing for names/regions requires dozens of heuristics
Fallback: Always provide manual input option

7. Stripe Webhooks are Critical

Never trust client-side payment confirmation (can be spoofed)
Webhook signature validation (stripe.webhooks.constructEvent) is mandatory
Test webhooks locally using Stripe CLI (stripe listen --forward-to localhost:5001/webhook)

8. JWT Security Best Practices

Never store sensitive data in JWT payload (it's base64, not encrypted)
7-day expiry balances UX and security
Always use HTTPS in production (JWT over HTTP is vulnerable to MITM)
Mistake: Initially stored password hash in JWT → Fixed by only storing userId

9. Cultural Tech is Underserved

Features like regional borders and language badges resonate with Indian users
Unity in Diversity isn't just a slogan — It's a product design principle
Realization: Tech for cultural connection is rare, which makes this project unique

10. Full-Stack is About Trade-offs

Pure WebRTC (cheap, complex) vs Agora SDK (expensive, simple)
MongoDB (flexible, no joins) vs PostgreSQL (strict, relational)
Client-side OCR (privacy, slow) vs Server-side (fast, privacy concerns)
Lesson: Every architecture decision is a trade-off, not a right/wrong choice

11. Documentation Matters

Well-commented code saved me 10+ hours during debugging
README is the first impression — Make it visual and comprehensive
Artifact Approach: Creating walkthrough.md after features forced me to test thoroughly

👥 Made By

Team EktaSahyog

Team members: Ankan Basu , Sachin Burnwal , Sneha Singh

Mission: " To unite India, one pixel at a time."

📜 License

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Name		Name	Last commit message	Last commit date
Latest commit History 17 Commits
public		public
server		server
src		src
.env.example		.env.example
.gitignore		.gitignore
README.md		README.md
components.json		components.json
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tailwind.config.js		tailwind.config.js
vite.config.js		vite.config.js

Folders and files

Latest commit

History

Repository files navigation