SRHU Virtual Notice Board

A modern institutional events platform for Swami Rama Himalayan University (SRHU). Students and faculty can discover campus events, view detailed information, and ask questions via an AI-powered event assistant.

Features

• Event discovery — Browse upcoming events with category filters (Technology, Academic, etc.)
• Event detail pages — Full descriptions, metadata, and parallax layouts at /event/[id]
• AI event assistant — Per-event chatbot powered by a RAG backend for natural-language Q&A
• Responsive UI — Mobile-first design with scroll animations and institutional branding
• PWA support — Installable app via service worker and web manifest

Tech Stack

Project Structure

virtualnb/
├── app/
│   ├── layout.tsx              # Root layout, metadata, fonts
│   ├── page.tsx                # Home — event listing & filters
│   ├── providers.tsx           # PWA service worker registration
│   ├── globals.css             # Theme tokens & animations
│   ├── docs/page.tsx           # Developer documentation (web)
│   └── event/[id]/page.tsx     # Dynamic event detail route
├── components/
│   ├── institution-header.tsx  # Hero section
│   ├── event-lightning-card.tsx
│   ├── chat-bot.tsx            # AI assistant
│   ├── scroll-reveal.tsx
│   ├── parallax-section.tsx
│   └── ui/                     # shadcn/ui primitives
├── lib/
│   ├── utils.ts
│   └── hooks/                  # useScrollReveal, useParallax
└── public/
    ├── manifest.json
    └── sw.js

Getting Started

Prerequisites

• Node.js 18 or later
• npm, pnpm, or yarn

Installation

# Clone the repository
git clone <repository-url>
cd virtualnb

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:3000 in your browser.

Production

npm run build
npm start

Other scripts

Routing

Dynamic route params use Next.js 15+ async params:

export default async function EventPage({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  // ...
}

Core Components

EventLightningCard

Displays event summaries on the home page. Links to /event/[id].

ChatBot

AI assistant on event detail pages. Sends queries to the backend and streams the response.

ScrollReveal / ParallaxSection

Animation wrappers for scroll-triggered reveals and parallax backgrounds.

API Integration

The chatbot calls an external RAG backend:

Base URL: https://vnb-proj-backend.onrender.com

POST /chat/

Request body:

{
  "user_id": "user@example.com",
  "doc_id": "1001",
  "query": "What time does the workshop start?"
}

Response:

{
  "ai_response": "The workshop starts at 11:30 AM in Lab-06..."
}

Example (from ChatBot):

const response = await fetch("https://vnb-proj-backend.onrender.com/chat/", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    user_id: "user@example.com",
    doc_id: eventId,
    query: input,
  }),
})

const data = await response.json()
const aiResponse = data.ai_response

Note: Replace the hardcoded user_id with real authentication before production deployment.

Architecture

┌─────────────────────────────────────┐
│     Next.js Frontend (Client)       │
│  Home → Event Detail → ChatBot UI     │
└─────────────────┬───────────────────┘
                  │ HTTPS POST /chat/
                  ▼
┌─────────────────────────────────────┐
│   Backend API (Render)              │
│   RAG-powered Q&A                   │
└─────────────────┬───────────────────┘
                  │
                  ▼
┌─────────────────────────────────────┐
│   Knowledge Base (per doc_id)       │
└─────────────────────────────────────┘

Styling & Theming

Design tokens are defined in app/globals.css using OKLCH colors:

Use semantic Tailwind classes (bg-primary, text-muted-foreground, etc.) and merge with cn() from @/lib/utils.

PWA

The app registers a service worker on load via app/providers.tsx:

• public/manifest.json — App manifest
• public/sw.js — Service worker
• Icons and metadata in app/layout.tsx

Event Data

Events are currently defined as mock data in:

• app/page.tsx — Listing (MOCK_EVENTS array)
• app/event/[id]/page.tsx — Details (MOCK_EVENTS record)

Replace with API calls when a backend events endpoint is available.

Environment

No .env file is required for the default setup. For production, configure:

• Backend API URL (if different from Render default)
• Authenticated user_id for chat requests

License

Private project — © 2025 Swami Rama Himalayan University. All rights reserved.

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/your-feature)
3. Commit changes (git commit -m 'Add your feature')
4. Push to the branch (git push origin feature/your-feature)
5. Open a Pull Request