Monastery360

A full-stack heritage tourism and digital preservation platform built with React, Node.js, Express, and MongoDB.

The platform enables users to explore cultural heritage sites through immersive 360° virtual tours, location-aware audio guides, interactive maps, digital archives, and event booking capabilities while supporting offline access through Progressive Web App technologies.

Core Features

Immersive Exploration

• 360° Virtual Tours using Pannellum
• Interactive Heritage Site Discovery
• Mobile-Friendly Experience

Smart Location Services

• GPS-Based Nearby Site Detection
• Context-Aware Audio Recommendations
• Interactive Maps powered by Leaflet

Digital Heritage Preservation

• Digital Archive Management
• Historical Content Categorization
• Multimedia Asset Support

User & Access Management

• JWT Authentication
• Role-Based Access Control (Tourist, Monk, Admin)
• Protected API Routes

Event Management

• Heritage Event Listings
• Event Booking System
• Booking Persistence with MongoDB

Progressive Web App

• Offline Caching
• Installable Experience
• Service Worker Support

System Architecture

Frontend ├── React (Vite) ├── Tailwind CSS ├── React Router ├── Leaflet Maps └── Pannellum Viewer

Backend ├── Node.js ├── Express.js ├── JWT Authentication ├── REST APIs └── MongoDB Atlas

Storage ├── MongoDB └── Cloudinary Media Storage

Media:

• Cloudinary-ready URL support

Project Structure

• client/
  • src/components
  • src/pages
  • src/hooks
  • src/services
  • src/context
• server/
  • controllers
  • models
  • routes
  • middleware
  • utils

Local Setup

1) Backend

1. cd server
2. Copy .env.example -> .env
3. Fill environment variables:
   • MONGODB_URI
   • JWT_SECRET
   • Cloudinary keys (optional for seed/demo URLs)
4. npm install
5. npm run seed
6. npm run dev

Backend runs at http://localhost:5000

2) Frontend

1. cd client
2. Copy .env.example -> .env
3. npm install
4. npm run dev

Frontend runs at http://localhost:5173

GitHub Publishing

1. Initialize git in project root.
2. Verify .gitignore is present at root.
3. Commit using clear commit messages.
4. Create a GitHub repository named monastery360.
5. Push main branch to GitHub.

Detailed command set is provided in this guide response.

Deployment

Frontend on Vercel (Free)

• Framework: Vite
• Root directory: client
• Build command: npm run build
• Output directory: dist
• Environment variable: VITE_API_URL=https://<your-render-service>.onrender.com/api

Backend on Render (Free)

• Service type: Web Service
• Root directory: server
• Build command: npm install
• Start command: npm start
• Required environment variables:
  • PORT=10000
  • MONGODB_URI=<your_mongodb_atlas_uri>
  • JWT_SECRET=<strong_random_secret>
  • JWT_EXPIRES_IN=7d
  • CLIENT_ORIGIN=https://<your-vercel-app>.vercel.app
  • Optional Cloudinary vars

Frontend to Backend Connection

Set Vercel env var VITE_API_URL to Render API URL, then redeploy frontend.

CORS

Backend supports CLIENT_ORIGIN as a comma-separated list for multi-domain setups.

Seed Accounts

After npm run seed:

• Admin: admin@monastery360.com / password123
• Monk: monk@monastery360.com / password123
• Tourist: tourist@monastery360.com / password123

API Summary

• GET /api/monasteries
• GET /api/monasteries/:id
• GET /api/monasteries/nearby
• GET /api/audio/:monasteryId
• GET /api/archives/:monasteryId
• GET /api/events
• POST /api/events/book/:id
• POST /api/auth/register
• POST /api/auth/login
• GET /api/moderation/pending
• POST /api/moderation/approve

PWA

• Manifest: client/public/manifest.json
• Service worker: client/public/sw.js
• Offline caching for monastery API, audio, and media assets.

Notes

• All libraries and services used are free-tier compatible.
• Cloudinary URLs in seed are placeholders and can be replaced with your own uploads.