Skip to content

Sangeeta-20-stack/HerbVerse

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

17 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🌿 HerbVerse – Virtual Herbal Garden

HerbVerse is a Virtual Herbal Garden web application that provides an immersive way to explore medicinal plants using 3D models, detailed botanical information, and curated virtual tours.
Built with the MERN stack and Three.js (React Three Fiber), it is designed for education, awareness, and digital preservation of herbal knowledge (AYUSH-focused).


✨ Features

🌱 Plant Exploration

  • Detailed plant profiles (Botanical name, common names, habitat, medicinal uses, cultivation)
  • High-quality plant images
  • Interactive 3D GLB plant models

🧭 Virtual Tours

  • Auto-rotating 3D plant models
  • Timed transitions between plants
  • Themed tours with duration control

πŸ‘€ Role-Based Access

  • Guest: View plants & tours
  • User: Explore full content
  • Admin:
    • Add / edit / delete plants
    • Manage users
    • Create and manage virtual tours

🎨 UI / UX

  • Nature-inspired green theme
  • Responsive design (mobile, tablet, desktop)
  • Smooth hover effects, shadows, and animations
  • Clean admin dashboards

πŸ›  Tech Stack

Frontend

  • React (Vite)
  • Tailwind CSS
  • React Three Fiber
  • Drei
  • Axios
  • React Router DOM

Backend

  • Node.js
  • Express.js
  • MongoDB + Mongoose
  • JWT Authentication
  • Multer (image & GLB uploads)

πŸ“ Project Structure

HerbVerse/ β”‚ β”œβ”€β”€ frontend/ β”‚ β”œβ”€β”€ src/ β”‚ β”‚ β”œβ”€β”€ components/ β”‚ β”‚ β”œβ”€β”€ pages/ β”‚ β”‚ β”œβ”€β”€ services/ β”‚ β”‚ └── App.jsx β”‚ └── dist/ # Vite production build β”‚ β”œβ”€β”€ backend/ β”‚ β”œβ”€β”€ models/ β”‚ β”œβ”€β”€ routes/ β”‚ β”œβ”€β”€ controllers/ β”‚ β”œβ”€β”€ middleware/ β”‚ └── server.js β”‚ └── README.md


πŸš€ Installation & Setup

1️⃣ Clone Repository

git clone https://github.com/USERNAME/HerbVerse.git
cd HerbVerse

```Backend Setup
cd backend
npm install

```Create .env file 
PORT=5000
MONGO_URI=your_mongodb_uri
JWT_SECRET=your_secret

```Run backend
nodemon server.js

```Frontend Setup
cd frontend
npm install
npm run dev


###  πŸ“Έ Screens & Media

3D plant visualization using .glb files

Images stored via backend uploads

Optimized loading & rendering

### πŸ” Authentication

JWT-based authentication

Protected admin routes

Secure CRUD operations

### 🎯 Future Enhancements

Search & filter plants

AR / VR tour support

Multilingual plant descriptions

User bookmarks & favorites

###πŸ‘©β€πŸ’» Author

Sangeeta Kundu
MERN Stack Developer | Virtual Garden Project
🌱 Passionate about tech + nature





About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages