EduWorld 🌍

⚠️ Disclaimer: This project is not affiliated with any real educational institution or company. EduWorld is a portfolio project created solely to showcase full-stack development skills. All names, features, and content are for demonstration purposes only.

🌐 Live Demo: https://eduworld-phi.vercel.app/
☁️ Hosted Infrastructure: This application is hosted online using Vercel. The database relies on MongoDB Atlas (Free Tier) which is connected online for demonstration purposes.

---

📸 Screenshots

Landing Page

Footer

UI Sneak Peek 👀

ChatBot in Action

Login & Register Pages

Dashboards & Forms

---

🎥 Demo Videos

All feature demonstrations are available in the Google Drive Demo Folder.

---

🚀 Overview

EduWorld is a modern, full-stack educational platform designed to connect students, faculty, and administrators in a seamless, interactive environment. With a focus on global recognition, career success, and innovative learning, EduWorld offers a comprehensive suite of features for admissions, course management, enquiries, and more.

---

✨ Key Features

• 🤖 AI-Powered ChatBot — 24/7 support covering admissions, fees, scholarships, campus life, and more. Includes smart keyword detection, typing indicators, message rating (thumbs up/down), quick reply suggestions, and minimise/close controls.
• 📞 Floating Call Button — Instantly connect with support via phone, WhatsApp, or email from any page.
• 🎨 Modern UI/UX — Smooth Framer Motion page transitions, animated hero sections, interactive spotlight cursor effect, welcome popup with newsletter subscription, and a dark/light theme toggle via next-themes.
• 📝 Applications & Enquiries — Students can submit multi-step applications (personal info → academic details → course selection) with per-step validation. Enquiry form available on the Contact page.
• 🎓 Role-Based Dashboards — Separate dashboards for students (apply, track status) and faculty (view all applications & enquiries, see platform stats).
• 📊 Analytics Dashboard — Real-time counts for applications, enquiries, students, and faculty shown on the faculty dashboard.
• 🛡️ Robust Security — Passwords are securely hashed using bcryptjs. We use jsonwebtoken (JWT) for stateless authentication and authorization with role-based access control (student / faculty). API routes are protected by HTTP header security via helmet, cross-origin resource sharing governance via cors, and basic protection against brute-force/DDoS attacks using express-rate-limit.
• 🛒 Course Catalogue — Browse UG and PG programs with search, category filters, sort options, favouriting, and animated cards.
• 🌐 Multi-Channel Contact — Phone, email, WhatsApp, and the full contact form with subject, priority level, and preferred contact method.
• ☁️ Vercel-Ready — Configured for serverless deployment with vercel.json routing API requests to Express and serving the React SPA for all other routes.

---

🛠️ Tech Stack

---

📦 Folder Structure

eduworld-fullstack/
├── api/
│   └── index.js                     # Vercel serverless entry — re-exports Express app
│
├── backend/
│   ├── config/
│   │   └── db.js                    # MongoDB connection (serverless-safe)
│   ├── controllers/
│   │   ├── applicationsController.js
│   │   ├── authController.js
│   │   ├── dashboardController.js
│   │   └── enquiriesController.js
│   ├── middleware/
│   │   └── middleware.js            # JWT auth middleware
│   ├── models/
│   │   ├── Application.js           # { userId, personalInfo, academicInfo, courseSelected, intake, documents }
│   │   ├── Enquiry.js               # { name, email, phone, course, message, preferredContact, urgency }
│   │   └── User.js                  # { name, email, password, role: "student"|"faculty" }
│   ├── routes/
│   │   ├── applicationsRoutes.js
│   │   ├── authRoutes.js
│   │   ├── dashboardRoutes.js
│   │   └── enquiriesRoutes.js
│   ├── server.js                    # Express app — exported for Vercel, started locally
│   └── package.json
│
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── chat/
│   │   │   │   ├── ChatBot.jsx      # Full chatbot UI (open/minimise/close, typing, ratings)
│   │   │   │   └── chatbotData.js   # Keyword map, responses, quick replies
│   │   │   ├── common/
│   │   │   │   ├── CallButton.jsx   # Floating contact button (phone/WhatsApp/email)
│   │   │   │   ├── CallToAction.jsx # Reusable CTA section
│   │   │   │   ├── Footer.jsx
│   │   │   │   ├── Header.jsx       # Responsive nav with user dropdown
│   │   │   │   ├── HeroSection.jsx  # Parallax + cursor spotlight hero
│   │   │   │   └── WelcomePopup.jsx # Newsletter popup (shown once via localStorage)
│   │   │   ├── forms/
│   │   │   │   ├── ApplicationForm.jsx  # 3-step multi-stage form
│   │   │   │   ├── AuthForm.jsx         # Shared login/register form
│   │   │   │   ├── EnquiryForm.jsx
│   │   │   │   └── UserTypePopup.jsx    # Student / Faculty selector modal
│   │   │   ├── theme-provider.jsx   # next-themes wrapper
│   │   │   └── ui/
│   │   │       ├── Toast.jsx        # Sonner toast utility + container
│   │   │       ├── button.jsx       # Base UI + CVA button
│   │   │       ├── card.jsx
│   │   │       └── input.jsx
│   │   ├── pages/
│   │   │   ├── About.jsx            # Timeline, values, testimonials, leadership
│   │   │   ├── Contact.jsx          # Contact cards, form, FAQ accordion
│   │   │   ├── Courses.jsx          # Filter, sort, favourites, course cards
│   │   │   ├── Enquiry.jsx          # Standalone enquiry page
│   │   │   ├── Home.jsx             # Hero, stats, bento grid features, CTA
│   │   │   ├── Login.jsx
│   │   │   ├── Register.jsx
│   │   │   ├── faculty/
│   │   │   │   ├── Applications.jsx # Table with review modal (+ mock data fallback)
│   │   │   │   ├── Dashboard.jsx    # Stats + quick links
│   │   │   │   └── Enquiries.jsx    # Table with detail modal
│   │   │   └── student/
│   │   │       ├── Apply.jsx        # Wraps ApplicationForm
│   │   │       ├── Dashboard.jsx    # Action cards
│   │   │       └── Status.jsx       # Application status display
│   │   ├── utils/
│   │   │   └── api.js               # Axios instance with JWT interceptor
│   │   ├── App.jsx                  # Router, AnimatePresence page transitions
│   │   ├── index.css                # Tailwind v4 + CSS variables (light/dark)
│   │   └── main.jsx
│   ├── index.html
│   ├── jsconfig.json                # @ alias → ./src
│   ├── package.json
│   ├── tailwind.config.js
│   └── vite.config.js               # SWC + Tailwind plugin + @ alias + chunk splitting
│
├── package.json                     # Monorepo scripts
└── vercel.json                      # Vercel deployment config

---

⚡ Getting Started

Prerequisites

• Node.js v20+
• A MongoDB Atlas cluster (or local MongoDB instance)

1. Clone the Repository

git clone https://github.com/darshan-gowdaa/eduworld-fullstack.git
cd eduworld-fullstack

2. Install All Dependencies

npm run setup

This runs npm install concurrently in the root, frontend/, and backend/ directories.

3. Configure Environment Variables

Create a .env file inside the backend/ folder:

MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_super_secret_jwt_key
PORT=5000
NODE_ENV=development

4. Run in Development Mode

Backend only:

npm run dev:backend
# Starts Express with nodemon on http://localhost:5000

Frontend only:

npm run dev:frontend
# Starts Vite dev server on http://localhost:5173

Both together:

# In two separate terminals, run the commands above

5. Production Build

npm run build   # builds the React app into frontend/dist
npm start       # starts the Express server

---

🔗 API Reference

Base URL (local): http://localhost:5000/api

Auth

Method	Endpoint	Auth	Description
POST	/auth/register	—	Register a new user
POST	/auth/login	—	Login and receive JWT
GET	/auth/me	✅ JWT	Get current user profile

Register / Login payload:

{
  "name": "Mindri Mahesh",
  "email": "mindri.mahesh@example.com",
  "password": "$tR0ngp@$$word67",
  "role": "student"
}

Response:

{
  "token": "<jwt>",
  "user": { "id": "...", "name": "Mindri Mahesh", "email": "...", "role": "student" }
}

Applications

Method	Endpoint	Auth	Role	Description
POST	/applications/	✅	student	Submit a new application
GET	/applications/	✅	faculty	Get all applications
GET	/applications/mine	✅	student	Get own application

Enquiries

Method	Endpoint	Auth	Role	Description
POST	/enquiries/	—	public	Submit an enquiry
GET	/enquiries/	✅	faculty	Get all enquiries

Dashboard

Method	Endpoint	Auth	Role	Description
GET	/dashboard/stats	✅	faculty	Get platform statistics

---

🗂️ Data Models

User

{ name, email, password /* bcrypt hashed */, role: "student"|"faculty", createdAt }

Application

{
  userId,          // ref → User
  personalInfo,    // { fullName, email, phone, dob }
  academicInfo,    // { qualification, institution, year, score }
  courseSelected,
  intake,
  documents,       // array
  createdAt
}

Enquiry

{ name, email, phone, course, message, preferredContact, urgency, createdAt }

---

🧠 ChatBot Details

The chatbot (ChatBot.jsx + chatbotData.js) works entirely client-side with no external AI API. It uses a keyword map to match user input against synonyms and return pre-written responses with follow-up suggestions.

Supported topics: courses, admissions, fees, contact, scholarships, campus, faculty, deadlines, housing, internships, job placement, B.Tech, MBA, required documents, payment plans, virtual tours, English proficiency, and international students.

UI Features:

• Typing indicator animation
• Thumbs up / thumbs down message rating
• Quick reply suggestion chips (scroll horizontally on mobile)
• Minimise to a headphone icon bubble
• Clear chat button
• Timestamps on every message

---

☁️ Deploying to Vercel

1. Push the repo to GitHub.
2. Import the project in Vercel.
3. Set the following Environment Variables in the Vercel dashboard:
   • MONGO_URI
   • JWT_SECRET
   • NODE_ENV=production
4. Vercel will use vercel.json to route /api/* to the serverless Express function and serve the React SPA for everything else.

Note: The api/index.js file re-exports the Express app from backend/server.js so Vercel treats it as a serverless function.

---

🗺️ Roadmap

• Student application & multi-step form
• Faculty/admin dashboards with live stats
• Role-based authentication (JWT)
• Interactive AI-style chatbot
• Enquiry submission & management
• Dark / Light theme toggle
• Smooth page transitions with Framer Motion
• Vercel serverless deployment support
• Email notifications on application status change
• Admin panel for approving/rejecting applications
• File upload for application documents
• Real-time notifications with WebSockets

---

📬 Contact

• Open an Issue
• GitHub Profile

---

🏅 Badges

---

EduWorld: Transforming education, empowering futures.