www.techbrahmand.giftsngifts.in

TechBrahmand

Where Brahma builds, Vishnu preserves, Mahesh transforms - a full-service agency site that converts visitors into proposals.

Timeline: 2025 - 26
Role: Full-stack engineer
Team: Team
Status: live

Live Demo

Technology Stack

ReactViteExpressGroq SDKMongoDBThree.jsPM2Nginx

✦Overview

TechBrahmand is a digital agency platform where the brand identity is the architecture. Three service lines - Brahma (build new products), Vishnu (maintain existing ones), Mahesh (audit and transform) - map directly to the Hindu Trimurti of creation, preservation and destruction. A visitor who understands the brand instantly knows which pillar they need and what the pricing model looks like.

Technically, it is a Vite + React frontend running 40+ animated components - a Three.js CyborgRobot, floating particles, a holographic menu, scroll-triggered roadmaps and a live proposal showcase - over an Express server that proxies a Groq-powered AI consultant. The AI key never leaves the server; the system prompt includes an injection guard. Inquiries land in MongoDB; the owner is alerted by SMTP email instantly.

✦Key Features

Hindu Trinity service architecture - Three divine service pillars - Brahma (build), Vishnu (maintain), Mahesh (audit/transform) - give clients an instant vocabulary for what they need instead of a generic 'web services' menu.
Groq-powered AI consultant - A chatbot takes budget and scope questions, generates interactive estimates, and captures leads - rate-limited to 60 req/10min per IP, with a system-prompt injection guard so it can't be jail-broken by visitors.
40+ custom animated components - A Three.js robot model, floating particles, holographic menus, scroll-triggered journey roadmaps and a live proposal showcase - the site feels like a tech studio, not a brochure.
Structured inquiry pipeline - Contact form captures name, phone, budget, timeline and project description, saves to MongoDB, and fires an SMTP email alert to the team - the first structured touchpoint in a defined client acquisition workflow.
Production-grade deployment - PM2 manages the Node.js process (auto-restart, cluster mode), Nginx proxies and handles SSL - the site runs reliably under real client traffic, not just on localhost.

✦Technical Implementation

01Groq proxy - API key isolation

The AI chatbot on the frontend never calls Groq directly. All completions are proxied through Express - the key stays server-side, rate limiting is enforced at the server layer, and the system prompt (which includes the injection guard) is never exposed to the client bundle.

server/index.js

// Rate limiting: 60 req / 10 min per IP
// Covers a 20+ message proposal session without opening to cost attacks.
const chatLimiter = rateLimit({
  windowMs: 10 * 60 * 1000,
  max: 60,
  message: { error: "You're going a bit fast - please wait a moment." },
});

// Proxies completions to Groq. GROQ_API_KEY never reaches the browser.
// System prompt contains an injection guard: the model is instructed to
// refuse "ignore your instructions" / "act as" / "reveal your prompt".
app.post("/api/chat", chatLimiter, async (req, res) => {
  const response = await fetch(GROQ_URL, {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.GROQ_API_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify(req.body),
  });
  const data = await response.json();
  res.json(data);
});

02Scroll-triggered animation mounting

40+ animated components - particles, 3D robot, holographic menus, reveal sequences - would tank performance if they all paint simultaneously on page load. Components mount only when scrolled into view, reducing the initial paint cost and keeping mid-range devices smooth.

✦Project Structure

structure

techbrahmand/
├─ frontend/              # Vite + React
│  └─ src/
│     ├─ pages/           # Home, Services, Products, About, Contact
│     └─ components/      # 40+ animated: CyborgRobot, FloatingParticles,
│                         #   JourneyRoadmap, ProposalShowcase, HoloMenu
├─ server/
│  └─ index.js            # Express — Groq proxy + MongoDB inquiries
└─ nginx-techbrahmand.conf  # production reverse proxy + SSL

✦Design Decisions

Brand identity as architecture

Naming three service lines after Hindu deities is not decoration - it gives clients a mental model before they read a word of copy. Brahma/Vishnu/Mahesh maps precisely to Build/Maintain/Audit, which maps precisely to three distinct pricing models. The brand IS the navigation.

Server-side AI proxy

Exposing a Groq API key in the client bundle lets any visitor exhaust the quota or run arbitrary completions. Proxying through Express isolates the key, adds rate limiting per IP, and lets the system prompt be updated server-side without a frontend redeploy.

✦Challenges

↳

Animation performance on mid-range devices

40+ concurrent animations - particles, 3D models, scroll reveals - cause jank on anything below a flagship phone. Solved with scroll-triggered mounting (IntersectionObserver), so components only activate when entering the viewport rather than all painting from page load.

↳

Prompt injection from public visitors

A public AI chatbot is a jailbreak target. The system prompt includes an explicit guard instructing the model to refuse 'ignore your instructions', 'act as DAN' and 'reveal your system prompt' attempts - defence that lives server-side and can be patched without a frontend redeploy.

Want the full walkthrough - architecture, decisions, war stories?

ask me about it

← Previous

GiftsNGifts

CalmTree Discover

dealdirect.in