A full-stack, AI-powered web application for digitizing and modernizing the devotee experience, administrative operations, and crowd safety management at the Khatu Shyam Ji Temple.
- Overview
- Tech Stack
- Project Architecture
- Features
- Database Schema
- API Endpoints
- Getting Started
- Deployment
- Project Structure
- Contributors
This platform replaces traditional, manual processes at the Khatu Shyam Ji Temple with a comprehensive digital ecosystem. It serves three key audiences:
- Devotees — Book darshan, reserve parking, apply for permits, explore the temple virtually, and get real-time assistance via an AI chatbot.
- Administrators — Manage bookings, permissions, donations, gallery content, and monitor live CCTV feeds from a centralized dashboard.
- Security & Operations — Leverage real-time AI-based crowd density estimation and automated parking zone management with loop-detector and boom-barrier integration.
| Technology | Purpose |
|---|---|
| React 18 | Component-based UI framework |
| Vite | Fast build tool and dev server |
| TypeScript (TSX) | Type-safe frontend development |
| Tailwind CSS v4 | Utility-first CSS framework |
| React Router v7 | Client-side routing and navigation |
| Radix UI / Shadcn | Accessible, composable UI primitives |
| React Hook Form + Zod | Form management and schema validation |
| TanStack Query (React Query) | Server-state management, caching, and data fetching |
| Framer Motion | Animations and page transitions |
| Leaflet + React-Leaflet | Interactive maps (mela map, parking locations, trip planner) |
| Recharts | Data visualization and analytics charts |
| Pannellum | 360° panoramic virtual tour viewer |
| jsPDF + qrcode.react | PDF generation and QR code creation for e-passes |
| Embla Carousel / React Slick | Image and content carousels |
| i18next + react-i18next | Internationalization (English 🇬🇧 & Hindi 🇮🇳) |
| canvas-confetti | Celebratory confetti animations |
| Technology | Purpose |
|---|---|
| Python | Backend programming language |
| FastAPI | High-performance async web framework |
| Uvicorn | ASGI server |
| SQLAlchemy 2.0 | Async ORM for database operations |
| PostgreSQL + asyncpg | Primary relational database (production) |
| SQLite | Lightweight local development database |
| Alembic | Database migration management |
| Redis | Caching and session management |
| PyJWT + python-jose | JWT-based authentication |
| bcrypt | Secure password hashing |
| websockets | Real-time WebSocket communication |
| Pydantic v2 + pydantic-settings | Data validation and environment config |
| Technology | Purpose |
|---|---|
| LWCC (Lightweight Crowd Counting) | Real-time crowd density estimation using Bay model |
| Ultralytics (YOLOv8) | Object detection for vehicle counting in parking lots |
| OpenCV (headless) | Image processing and camera frame extraction |
| NumPy | Numerical computation for AI pipelines |
| Google Gemini API | LLM-powered intelligent chatbot |
| Technology | Purpose |
|---|---|
| Vercel | Frontend hosting with SPA rewrite rules |
| Environment-Aware Config | Dynamic API/WebSocket URL resolution via config.ts |
┌────────────────────────────────────────────────────────────────┐
│ FRONTEND (React + Vite) │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Devotee │ │ Admin │ │ Gallery │ │ Booking │ │
│ │ Portal │ │Dashboard │ │ & Tour │ │ Flows │ │
│ └────┬─────┘ └────┬─────┘ └────┬─────┘ └────┬─────┘ │
│ └──────────────┴──────────────┴──────────────┘ │
│ REST API / WebSocket │
│ (config.ts → dynamic URL) │
└────────────────────────────┬───────────────────────────────────┘
│
┌─────┴─────┐
│ Vercel │ (Frontend)
└─────┬─────┘
│
┌────────────────────────────┴───────────────────────────────────┐
│ BACKEND (FastAPI + Uvicorn) │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Auth & │ │ Booking │ │ Camera │ │ AI │ │
│ │ Users │ │ & Perms │ │ Manager │ │ Service │ │
│ └────┬─────┘ └────┬─────┘ └────┬─────┘ └────┬─────┘ │
│ │ │ │ │ │
│ ┌────┴──────────────┴──────────────┴──────────────┴────┐ │
│ │ PostgreSQL / SQLite (SQLAlchemy ORM) │ │
│ └───────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────────┘
| Feature | Description |
|---|---|
| 🔐 OTP-Based Authentication | Secure phone/email login with OTP verification and JWT sessions |
| 🙏 Darshan Booking | Book individual or group darshan slots with date, time, and accessibility options |
| 📺 Live Darshan | Watch live aarti and temple ceremonies via embedded video streams |
| 🏨 Accommodation Booking | Search and book dharamshalas, hotels, and guest houses near the temple with room-type selection |
| View real-time parking availability across zones; AI-detected vehicle counts | |
| 🍲 Annadaan Seva | Register for community meal (langar) seva |
| 📋 Bhandara Permission | Apply for permission to organize a community bhandara with document uploads |
| 🏥 Medical Camp Permission | Submit applications to organize medical camps on temple premises |
| 📄 Other Permissions | General-purpose permission application system |
| 💰 Donation Portal | Online donation with 80G tax receipt support and PAN card integration |
| 🔍 Lost & Found | Report lost items/persons and browse found items; includes photo uploads |
| 🗺️ Mela Map | Interactive Leaflet-powered map of the mela ground with points of interest |
| 📸 Gallery | Photo gallery with categories, video gallery, and 360° virtual tour (Pannellum) |
| 🏛️ Places to Visit | Curated nearby attractions with filters and a trip planner |
| 📅 Important Days | Calendar of festivals, special poojas, and temple events |
| 📰 News & Events | Latest announcements and temple news |
| 🏛️ About Temple | Temple history, architecture, timings, and cultural significance |
| 💬 AI Chatbot | Gemini-powered virtual assistant for real-time query resolution |
| 🆘 SOS Alerts | Emergency alert system with GPS location sharing |
| 👤 Profile Management | Full profile panel with activity history, booking history, and account settings |
| 🌐 Bilingual Support | Full i18n support with English and Hindi translations |
| Feature | Description |
|---|---|
| 📊 Analytics Dashboard | Visual analytics with Recharts — booking trends, crowd stats, revenue |
| 👥 User Management | View, search, and manage all registered users |
| 📋 Booking Management | View, approve, or cancel darshan and accommodation bookings |
| 🎫 Permission Management | Review and approve/reject bhandara, medical camp, and other permission requests |
| 💰 Donation Tracking | Monitor all donations and generate reports |
| 📢 Announcements | Create and manage temple-wide announcements displayed on the home page |
| 📸 Gallery Management | Upload, categorize, and manage gallery photos and videos |
| 🔍 Lost & Found Admin | Manage lost item reports and found item entries |
| 📧 Support Queries | View and respond to user support tickets |
| 📹 Live CCTV Feeds | View live camera snapshots from temple premises directly in the dashboard |
| ⚙️ System Settings | Configure system-wide settings |
| 📝 Activity Logger | Full audit trail of administrative actions |
| Feature | Description |
|---|---|
| 🧠 Crowd Density Estimation | LWCC Bay model processes live camera frames every 2 seconds to estimate crowd count per zone |
| 🚗 AI Parking Detection | YOLOv8-based vehicle detection from parking lot cameras; bounding boxes with confidence scores |
| 📹 Camera Manager | Background worker threads managing multiple RTSP/HLS camera streams with automatic reconnection |
| 🎬 Video Analysis | Upload and process recorded video for post-event crowd analysis |
| 🤖 LLM Chatbot | Google Gemini-powered conversational AI with temple-specific context |
| Loop-detector and boom-barrier integration with anomaly detection (e.g., tailgating alerts) | |
| 📡 WebSocket Real-Time Updates | Live parking occupancy updates pushed to connected clients |
| 🎟️ Gate Ticket System | QR-based ticket verification at entry/exit gates with scan timestamps |
The application uses 22 database models managed via SQLAlchemy ORM:
| Model | Table | Purpose |
|---|---|---|
User |
khatu_users |
User accounts with phone, email, admin flag |
OTP |
khatu_otps |
One-time passwords for authentication |
Booking |
khatu_bookings |
Darshan bookings (individual & group) |
DarshanSlot |
khatu_darshan_slots |
Available darshan time slots with capacity |
Donation |
khatu_donations |
Donation records with 80G support |
SupportQuery |
khatu_support_queries |
Help desk tickets |
CrowdDensityLog |
khatu_crowd_density_logs |
AI crowd density readings per zone |
BhandaraSpot |
khatu_bhandara_spots |
Bhandara venue locations with GPS coordinates |
BhandaraBooking |
khatu_bhandara_bookings |
Bhandara permission applications with document uploads |
LostItem |
khatu_lost_items |
Lost item reports |
FoundItem |
khatu_found_items |
Found item records |
LostPerson |
khatu_lost_persons |
Missing person reports |
GeneralPermission |
khatu_general_permissions |
General permission requests |
SOSAlert |
khatu_sos_alerts |
Emergency SOS alerts with GPS location |
Announcement |
khatu_announcements |
Admin-managed announcements |
AccommodationProperty |
khatu_accommodation_properties |
Hotels, dharamshalas, guest houses |
AccommodationRoom |
khatu_accommodation_rooms |
Room types and availability per property |
AccommodationBooking |
khatu_accommodation_bookings |
Accommodation reservations |
ParkingLot |
khatu_parking_lots |
AI-monitored parking zones |
ParkingSnapshot |
khatu_parking_snapshots |
AI vehicle detection results with bounding boxes |
ParkingZone |
khatu_parking_zones |
Loop-detector managed parking grounds |
ParkingZoneSensorLog |
khatu_parking_zone_sensor_logs |
Raw sensor trigger logs with anomaly flags |
GalleryItem |
khatu_gallery_items |
Gallery photos and videos |
UserActivity |
khatu_user_activities |
User action audit trail |
SystemSetting |
khatu_system_settings |
Key-value system configuration |
GateTicket |
khatu_tickets |
QR ticket lifecycle tracking |
The backend exposes 18 route modules:
| Route Module | Prefix | Key Endpoints |
|---|---|---|
| Auth | /api/auth |
Register, login (OTP-based), token refresh, profile |
| Admin | /api/admin |
Dashboard stats, user management, system settings |
| Bookings | /api/bookings |
Create/list/cancel darshan bookings |
| Donations | /api/donations |
Submit and track donations |
| Accommodation | /api/accommodation |
Search properties, book rooms |
| Parking | /api/parking |
Lot status, zonal occupancy, WebSocket live updates |
| Bandhara | /api/bandhara |
Submit/approve bhandara permission requests |
| General Permissions | /api/permissions |
CRUD for general permission applications |
| Lost & Found | /api/lost-found |
Report lost items/persons, browse found items |
| Cameras | /api/cameras |
Camera management, live snapshots |
| Crowd | /api/crowd |
Crowd density readings and zone status |
| Inference | /api/inference |
AI density estimation results |
| Video Analysis | /api/v1/video-analysis |
Upload and process video footage |
| Gallery | /api/gallery |
CRUD for gallery items |
| Chatbot | /api/chatbot |
Gemini-powered conversational AI |
| Gate | /api/gate |
Ticket verification and gate scan |
| Alerts | /api/alerts |
SOS alert management |
| Support | /api/support |
Help desk query submission |
| Health | /health |
Server health check |
- Node.js v18+ and npm
- Python 3.10+
- PostgreSQL 14+ (or SQLite for local development)
- Redis (optional, for caching)
# Clone the repository
git clone https://github.com/Dev0923/MNIT-PROJECT.git
cd MNIT-PROJECT
# Install dependencies
npm install
# Start the development server
npm run devThe frontend will be available at http://localhost:5173.
Note: The frontend automatically detects the environment and connects to the correct API backend. During local development (port 5173 or 3000), it defaults to
http://localhost:8000. In production, it uses the same origin. You can override this by settingVITE_API_URLin a.envfile.
# Create and activate a Python virtual environment
python -m venv venv
# Windows
venv\Scripts\activate
# macOS/Linux
source venv/bin/activate
# Install dependencies
pip install -r backend/requirements.txt
# Configure environment variables
# Create backend/.env with:
# DATABASE_URL=postgresql+asyncpg://postgres:postgres@localhost:5432/khatu_shyam_db
# JWT_SECRET=your-secret-key
# GEMINI_API_KEY=your-gemini-api-key (for chatbot)
# AI_ENABLED=true (for crowd density AI)
# Start the API server
uvicorn backend.main:app --reload --port 8000The API will be available at http://localhost:8000.
Interactive API docs at http://localhost:8000/docs.
# Health check
curl http://localhost:8000/health
# Expected: {"status": "ok"}The frontend is configured for deployment on Vercel with SPA routing support via vercel.json:
{
"rewrites": [
{
"source": "/(.*)",
"destination": "/index.html"
}
]
}To deploy:
- Connect your GitHub repository to Vercel.
- Set the Build Command to
npm run build. - Set the Output Directory to
dist. - Add the environment variable
VITE_API_URLpointing to your production backend URL.
The FastAPI backend can be deployed on any cloud platform that supports Python (e.g., Railway, Render, AWS EC2, DigitalOcean). Set environment variables as described in the Backend Setup section.
MNIT-PROJECT/
├── src/ # Frontend source code
│ ├── app/
│ │ ├── components/ # Reusable UI components
│ │ │ ├── Header.tsx # Navigation header
│ │ │ ├── Footer.tsx # Site footer
│ │ │ ├── ProfilePanel.tsx # User profile sidebar
│ │ │ ├── ChatbotWidget.tsx # AI chatbot floating widget
│ │ │ ├── BookingFlowModal.tsx # Multi-step booking modal
│ │ │ ├── AlertListener.tsx # Real-time alert notifications
│ │ │ └── ui/ # Shadcn/Radix UI primitives
│ │ ├── pages/ # 28 page components
│ │ │ ├── HomePage.tsx
│ │ │ ├── AdminPage.tsx # Full admin dashboard
│ │ │ ├── DarshanBookingPage.tsx
│ │ │ ├── LiveDarshanPage.tsx
│ │ │ ├── AccommodationBookingPage.tsx
│ │ │ ├── ParkingPage.tsx
│ │ │ ├── GalleryVirtualTourPage.tsx
│ │ │ └── ...
│ │ ├── services/ # API client modules
│ │ │ ├── accommodationApi.ts
│ │ │ ├── adminApi.ts
│ │ │ └── lostFoundApi.ts
│ │ ├── routes.tsx # React Router configuration
│ │ └── config.ts # Dynamic API/WebSocket URL resolution
│ ├── imports/ # Static image assets
│ ├── locales/ # i18n translations
│ │ ├── en.json # English
│ │ └── hi.json # Hindi
│ └── styles/ # Global CSS & theme
│ └── theme.css # Custom theme variables
│
├── backend/ # Backend source code
│ ├── main.py # FastAPI app entry point & router registration
│ ├── config.py # Pydantic settings (env-based config)
│ ├── database.py # SQLAlchemy engine, session, and init_db()
│ ├── auth.py # JWT dependency injection
│ ├── routes/ # 18 API route modules
│ │ ├── auth.py # Authentication (OTP, JWT)
│ │ ├── admin.py # Admin dashboard APIs
│ │ ├── bookings.py # Darshan booking CRUD
│ │ ├── parking.py # Parking + WebSocket
│ │ ├── chatbot.py # Gemini LLM chatbot
│ │ ├── cameras.py # Camera management
│ │ ├── inference.py # AI inference endpoints
│ │ ├── video_analysis.py # Video processing endpoints
│ │ └── ...
│ ├── models/ # Database models
│ │ └── sql_models.py # 22 SQLAlchemy models
│ ├── services/ # Business logic layer
│ │ ├── llm_client.py # Google Gemini API integration
│ │ ├── otp_service.py # OTP generation and verification
│ │ └── parking_ai.py # YOLO-based parking detection
│ ├── ai/ # AI & ML modules
│ │ ├── service.py # AIService singleton orchestrator
│ │ ├── density_estimator.py # LWCC crowd density estimation
│ │ ├── inference_engine.py # Inference pipeline
│ │ └── video_processor.py # Video analysis pipeline
│ ├── camera/ # Camera management
│ │ ├── manager.py # CameraManager singleton
│ │ ├── worker.py # Background camera worker threads
│ │ └── config.py # Camera configuration
│ ├── utils/ # Utility modules
│ │ ├── jwt_handler.py # JWT encode/decode
│ │ ├── password_handler.py # bcrypt hashing
│ │ ├── activity_logger.py # Audit trail logger
│ │ └── ws_manager.py # WebSocket connection manager
│ ├── alembic/ # Database migrations
│ └── requirements.txt # Python dependencies
│
├── public/ # Static assets
├── uploads/ # User-uploaded files
├── index.html # Vite entry HTML
├── vercel.json # Vercel deployment config (SPA rewrites)
├── vite.config.ts # Vite configuration
├── tsconfig.json # TypeScript configuration
├── package.json # Node.js dependencies
└── postcss.config.mjs # PostCSS configuration
Built with ❤️ by Team Dev0923 — MNIT Jaipur
Jai Shree Shyam 🙏